<script setup lang="ts">
import type { Chapter } from '@/api/subject/subject'
import { storeToRefs } from 'pinia'
import { useLeadTaskStore } from '@/stores/lead-task'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const props = withDefaults(
  defineProps<{
    active?: string
    data: Chapter
    index?: number | null
    prop?: {
      label: string
      select: string
    }
    idx: number
  }>(),
  {
    index: null,
  },
)

const emits = defineEmits(['select', 'update:modelValue'])

const { chapterIds } = storeToRefs(useLeadTaskStore())

function handleSelect(item: anyObj = props.data) {
  if (props.active === item.id) return
  emits('select', item)
}

watch(
  [() => props.data, () => chapterIds.value],
  () => {
    const chapter = props.data
    if (!chapter) return
    const cfg = chapterIds.value[chapter.id]
    const correct = chapter.correctCount
    if (cfg) {
      chapter.progressText = `(${correct}/${cfg.amount})`
      if (Number(correct) === Number(cfg.amount)) {
        chapter.progressClass = 'finished'
      } else {
        chapter.progressClass = ''
      }
    } else {
      chapter.progressText = `${correct}`
    }
  },
  {
    immediate: true,
  },
)

defineOptions({
  name: 'XTreeItem',
})
</script>

<template>
  <el-collapse-item :name="data.id">
    <template #title>
      <div
        :class="['title', `title_${idx}`, active === data.id ? 'active' : '']"
        @click="handleSelect()"
      >
        <!-- <template v-if="index !== null"> {{ index! + 1 }}. </template> -->
        <span>{{ (data as any)[prop?.label || 'label'] }}</span>
        <span :class="data.progressClass">{{ data.progressText }}</span>
      </div>
      <div class="icon-box">
        <Icon
          v-if="data.children?.length"
          class="arrow-icon"
          name="textbook_arrow_up_grey"
          size="24"
          style="margin-right: 32px"
        />
      </div>
    </template>
    <template v-if="data.children?.length">
      <div class="child-list">
        <template v-for="(item, index) in data.children" :key="item.id">
          <XTreeItem
            v-if="item.children?.length"
            :active="active"
            :index="index"
            :data="item"
            :prop="prop"
            :idx="idx + 1"
            @select="handleSelect"
          />
          <template v-else>
            <div
              :class="['child-list-item', active === item.id ? 'active' : '']"
              @click="handleSelect(item)"
            >
              <div :class="['title', `title_${idx + 1}`]">
                <!-- {{ idx + 1 }}. -->
                <span>{{ (item as any)?.[prop?.label || 'label'] }}</span>
                <span :class="item.progressClass">{{ item.progressText }}</span>
              </div>
            </div>
          </template>
        </template>
      </div>
    </template>
    <slot></slot>
  </el-collapse-item>
</template>
<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}

.finished {
  color: #44e38d;
}

:deep(.el-collapse-item) {
  margin-left: 0;
  padding-left: 0;
  &:not(.is-active) {
    .arrow-icon {
      transform: rotate(0) !important;
    }
  }
  &.is-active {
    .arrow-icon {
      transform: rotate(180deg);
    }
  }
}
</style>
