<script setup lang="ts">
import { 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,
  focusing?: boolean
}>()
const emits = defineEmits(["update:modelValue", "update:modelName", "update:teamId", "update:teamName", "update:gradeId", "update:gradeName"])

const loading = ref(false)

const value = ref(props.modelValue)
const options = ref<{
  class_name: string,
  class_id: string,
  team_id?: string,
  team_name?: string,
  grade_id?: string,
  grade_name?: string,
}[]>((props.modelValue && props.modelName) ? [{
  class_name: props.modelName,
  class_id: props.modelValue,
  team_id: props.teamId,
  team_name: props.teamName,
  grade_id: props.gradeId,
  grade_name: props.gradeName,
}] : [])

if (!props.focusing) {
  remoteMethod().then(() => {
    if (props.modelValue && props.modelName && !options.value.find(({ class_id: val }) => val === props.modelValue)) {
      options.value.unshift({
        class_name: props.modelName,
        class_id: props.modelValue
      })
    }
  })
}

// let Initing = true
const handleFocus = () => {
  // && Initing
  if (props.focusing ) {
    remoteMethod().then(() => {
      if (props.modelValue && props.modelName && !options.value.find(({ class_id: val }) => val === props.modelValue)) {
        options.value.unshift({
          class_name: props.modelName,
          class_id: props.modelValue
        })
      }
      // Initing = false
    })
  }
}

function remoteMethod(keyword?: string) {
  loading.value = true
  // console.log('object :>> ', props.teamId, props.gradeId);
  const assignData = props.focusing ? {
    team_id: props.teamId,
    grade_id: props.gradeId,
  } : {}
  return request({
    url: `/jcxx/class/index`,
    data: {
      keyword,
      limit: 15,
      ...assignData
    }
  }).then(({ data }) => {
    options.value = data.page_data
    loading.value = false
  })
}



watch(
  () => value.value,
  (val) => {
    const item = options.value.find(({ class_id }) => class_id === val)
    emits("update:modelValue", val)
    emits("update:modelName", item?.class_name)
    if (!props.focusing) {
      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)
  }
)

watch(() => props.modelValue, (val) => {
  if (val === undefined) {
    value.value = undefined
  }
})

if (props.focusing) {
  function init() {
    if ((props.teamId || props.gradeId) && value.value !== undefined) {
      // Initing = true
      value.value = ''
    }
  }
  watch(() => props.teamId, () => init())
  watch(() => props.gradeId, () => init())
}
</script>


<template>
  <el-select class="w-full" v-model="value" filterable remote reserve-keyword clearable :remote-method="remoteMethod"
    :loading="loading" @focus="handleFocus">
    <el-option v-for="item in options" :key="item.class_id" :label="item.class_name" :value="item.class_id" />
  </el-select>
</template>

