<template>
  <n-cascader label-field="name" value-field="areaCode" :options="optionsData" placeholder="请选择所属区域" remote ref="cascaderInstRef"
    :on-load="loadData" clearable :disabled="disabled" v-model:value="selectedOptions" check-strategy="child" show-path 
    @update:value="handleUpdateValue"/>
</template>
<script setup lang="ts" name="china-area">
import { ref, onMounted, computed, watch } from 'vue'
import { getCityByList } from "@/api/system/user";
import type { CascaderOption } from 'naive-ui'
const emit = defineEmits(['update:modelValue', 'change']);
const optionsData = ref([]);
const tempData=ref([])
const cascaderInstRef = ref()
const props = defineProps({
  // 当前的值
  modelValue: [String,Array],
  // 类型 (二级联动，三级联动)
  type: {
    type: Number,
    default: 3,
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: () => false,
  },
});

watch(
  () => props,
  async () => {
    if(props && props.modelValue.length >0){
      if(optionsData.value.length==0) {
        const data = await getCityByList(0)
        data.map(item => {
          item.isLeaf = false
        })
        optionsData.value = data
      }
      setData(props.modelValue);
    }  
  },
  {
    deep: true,
  },
);
const getCityData = async (pid: any) => {
  const data = await getCityByList(pid)
  data.map(item => {
    item.isLeaf = false
  })
  return data
}
const changeFlag = ref(false)
const selectedOptions = computed({
  get: () => {
    return props.modelValue[3];
  },
  set: (val) => {
    emit('update:modelValue',  tempData.value);
  },
});
const setData = async (data) => {
  if (changeFlag.value) return
  let index1 = findListChild(optionsData.value, data[0])
  let data1 = await getCityByList(data[0])
  optionsData.value[index1].children = data1


  let index2 = findListChild(data1, data[1])
  let data2 = await getCityByList(data[1])
  optionsData.value[index1].children[index2].children = data2


  let index3 = findListChild(data2, data[2])
  let data3 = await getCityByList(data[2])
  optionsData.value[index1].children[index2].children[index3].children = data3

}

const findListChild = (list: any, value: any) => {
  let child = null
  let index = 0
  for (let i = 0; i < list.length; i++) {
    if (list[i].areaCode == value) {
      child = list[i]
      index = i
      break;
    }
  }
  return index
}
const loadData = async (option: CascaderOption) => {
  tempData.value[option.level]=option.areaCode
  return new Promise<void>(async (resolve) => {
    const data = await getCityByList(option.areaCode)
    data.map(item => {
      item.isLeaf = item.level==3?true:false
    })
    option.children = data
    resolve()
  })
};
const handleUpdateValue =(val)=>{
  if(val){
    changeFlag.value = true
    tempData.value[3] = val
  }
}

onMounted(async () => {
  const data = await getCityByList(0)
   data.map(item => {
    item.isLeaf = false
  })
  optionsData.value = data
});
</script>
<style lang="less">
.ant-cascader-menu {
  background-color: #ffffff;
}
</style>
