<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import request from '~/utils/request';


const props = defineProps<{
  modelValue?: string,
  modelName?: string,
  teamId?: string,
  teamName?: string,
  gradeId?: string,
  gradeName?: string,
  change?: (item: object | undefined) => void,
}>()
const emits = defineEmits(["update:modelValue", "update:modelName", "update:teamId", "update:teamName", "update:gradeId", "update:gradeName"])

// const loading = ref(true)

const value = ref(props.modelValue)
type TItem = {
  label: string,
  value: string,
  children?: TItem[],
  leaf?: boolean,
  disabled?: boolean,
}
// const options = ref<TItem[]>([])

const theProps = ref()

type TFullItem = {
  team_id: string, team_name: string, grade_id: string, grade_name: string, class_id: string, class_name: string
}
// let teamArr: Array<{ team_id: string, team_name: string }>
// let gradeArr: Array<{ grade_id: string, grade_name: string }>
let classList: Array<{
  value: string,
  label: string,
  leaf: boolean,
  origin: TFullItem
}>

new Promise((resolve: (value: TItem | null) => void) => {
  if (props.modelValue) {
    request({
      url: `/jcxx/class/index`,
      data: {
        limit: 15,
        class_id: props.modelValue,
      }
    }).then(res => {
      const data = res.data.page_data[0]
      resolve(
        {
          label: data.team_name,
          value: data.team_id,
          disabled: true,
          children: [
            {
              label: data.grade_name,
              value: data.grade_id,
              disabled: true,
              children: [
                {
                  label: data.class_name,
                  value: data.class_id,
                  leaf: true,
                  disabled: true,
                }
              ]
            }
          ]
        }
      )
    })
  } else {
    resolve(null)
  }
}).then((res0) => {
  return Promise.all([
    request({ url: `/jcxx/team/index`, data: { limit: 100 } }),
    request({ url: `/jcxx/grade/index`, data: { limit: 100 } }),
  ]).then(([res1, res2]) => {
    const teamArr: Array<TItem> = res1.data.page_data.map(({ team_id, team_name }: { team_id: string, team_name: string }) => ({
      value: team_id,
      label: team_name,
      leaf: false
    }))
    const gradeArr: Array<TItem> = res2.data.page_data.map(({ grade_id, grade_name }: { grade_id: string, grade_name: string }) => ({
      value: grade_id,
      label: grade_name,
      leaf: false
    }))

    theProps.value = {
      emitPath: false,
      // 'validate-event': false,
      lazy: true,
      lazyLoad(node: { level: number, pathValues: string[] }, resolve: (d: unknown) => void) {
        switch (node.level) {
          case 0: {
            if (res0) {
              teamArr.unshift(res0)
              resolve(teamArr)
            }
            else { resolve(teamArr) }
            break;
          }
          case 1: {
            resolve(gradeArr)
            break;
          } case 2: {
            // loading.value = true
            request({
              url: `/jcxx/class/index`,
              data: {
                limit: 15,
                team_id: node.pathValues[0],
                grade_id: node.pathValues[1]
              }
            }).then((res) => {
              const classArr: Array<TFullItem> = res.data.page_data
              if (classArr.length > 0) {
                resolve(classList = classArr.map((item) => ({
                  value: item.class_id,
                  label: item.class_name,
                  leaf: true,
                  origin: item
                })))
              }
              else {
                resolve([])
              }
              // loading.value = false
            })
            break;
          }

        }
      }
    }

  })
})






watch(
  () => value.value,
  (val) => {
    if (classList) {
      const item = (classList.find(({ value }) => value === val))?.origin
      console.log('item :>> ', item);
      emits("update:modelName", item?.class_name)
      emits("update:modelValue", val)

      emits("update:teamId", item?.team_id)
      emits("update:teamName", item?.team_name)
      emits("update:gradeId", item?.grade_id)
      emits("update:gradeName", item?.grade_name)

      props?.change?.(item)
    }
  }
)

</script>


<template>
  <el-cascader class="w-full" v-model="value" filterable reserve-keyword clearable :props="theProps" />
</template>

