<template>
  <el-cascader
    class="def-region-choose"
    v-model="regionVal"
    :show-all-levels="showAllLevels"
    :disabled="disabled"
    :props="propsParams"
    v-bind="$attrs"
    @change="handleRegionSelect"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { requestRegionList } from './api'

/* 类型声明 */
interface IPropsObj {
  // expandTrigger: string
  // multiple: boolean
  // checkStrictly: boolean
  emitPath: boolean
  value: string
  label: string
  children: string
  // disabled: string
  // leaf: string
  lazy: boolean
  lazyLoad: any
}
/* 参数相关 */
const props = defineProps({
  region: {
    // 回显行政区值
    type: [String, Number, Array],
    required: true
  },
  showAllLevels: {
    // 是否显示所有层级
    type: Boolean,
    default: false
  },
  disabled: {
    // 是否禁用
    type: Boolean,
    default: false
  },
  leaf: {
    // 叶子节点 123 => 省市区
    type: Number,
    default: 3
  },
  // props赋值
  emitPath: {
    // 返回选中数组
    type: Boolean,
    default: true
  },
  value: {
    type: String,
    default: 'value'
  },
  label: {
    type: String,
    default: 'label'
  },
  children: {
    type: String,
    default: 'children'
  }
})

const emits = defineEmits(['update:region'])

/* 数据处理 */
const regionVal = ref<string | number | any[]>(props.region)
const regionLeaf = ref(+props.leaf)
const propsParams = ref<IPropsObj>({
  // expandTrigger: 'click', // 次级菜单的展开方式 click / hover
  // multiple: false, // 是否多选
  // checkStrictly: false, // 是否严格的遵守父子节点不互相关联
  emitPath: props.emitPath || false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
  value: props.value, // 指定选项的值为选项对象的某个属性值
  label: props.label, // 指定选项标签为选项对象的某个属性值
  children: props.children, // 指定选项的子选项为选项对象的某个属性值
  // disabled: 'disabled', // 指定选项的禁用为选项对象的某个属性值
  // leaf: 'leaf', // 指定选项的叶子节点的标志位为选项对象的某个属性值
  lazy: true, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
  /**
   * 加载动态数据的方法，仅在 lazy 为 true 时有效
   * @param node 为当前点击的节点
   * @param resolve 为数据加载完成的回调(必须调用)
   */
  async lazyLoad(node: any, resolve: any) {
    const { level, value } = node
    // 数组传入格式为字符串数组自动回显数据
    setTimeout(async () => {
      // 调用接口获取数据
      const {
        data: { list }
      } = await requestRegionList(value)
      list.forEach((item: any) => {
        item.leaf = level >= regionLeaf.value - 1 // 设叶子节点（末节点）
      })
      resolve(list)
    }, 300)
  }
})
// 选中回调
const handleRegionSelect = (value: string | number | any[]) => {
  // 传回父级
  emits('update:region', value)
}
// 清空内容
const clear = () => {
  if (Array.isArray(regionVal.value)) {
    regionVal.value = []
  } else {
    regionVal.value = ''
  }
  emits('update:region', regionVal.value)
}
defineExpose({
  clear
})
</script>

<style scoped lang="scss">
.def-region-choose {
}
</style>
