<template>
  <div style="width: 100%;">
    <el-cascader ref="cascader" v-model="modelVal" filterable :props="pageData.cascaderProps"
      :options="pageData.options" @change="handleChange" :placeholder="props.placeholder" style="width: 100%;"
      :disabled="props.disabled" :show-all-levels="showAllLevels" clearable />
  </div>
</template>
<script setup>
import { defineProps, reactive, onMounted, defineEmits, ref, watchEffect } from "vue"
import { getApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  modelValue: String,//选中的数据|| 回显
  placeholder: {
    type: String,
    default: "请选择"
  },
  //类型：通用字典 || xzqh 行政区划|| array结构后的字典(数组)
  type: {
    type: String,
    default: ""
  },
  zdlist: {
    type: Array,
    default: [],//结构后的字典(数组)
  },
  disabled: Boolean,
  zdbh: String,//字典编号
})
const modelVal = defineModel()
const cascader = ref()
const emits = defineEmits(["update:modelValue", "nameChange", "onChange"])
const showAllLevels = ref(false);//是否显示全部路径
const pageData = reactive({
  options: [],
  cascaderProps: {
    children: "itemList",
    label: "zdmc",
    value: "dm",
    checkStrictly: false
  }
})
onMounted(() => {

})

//获取字典数据
const getDictCdata = () => {
  showAllLevels.value = false;
  getApi({ zdbh: props.zdbh }, "/mosty-base/sysDict/getDictTree").then(res => {
    if (res) {
      pageData.options = res.itemList
    }
  })
}
//获取行政区划字典数据
const getXzqhDictCdata = () => {
  showAllLevels.value = false;
  pageData.cascaderProps.checkStrictly = true
  getApi({ zdbh: props.zdbh, dm: "52" }, "/mosty-base/sysDict/getDictTreeXzqh").then(res => {
    pageData.options = res ? res.itemList : []

  })
}
const handleChange = (val) => {
  if (cascader.value.getCheckedNodes()[0]) {
    /** 选择的名称数组例如['载客','大型'] */
    const pathLabels = cascader.value.getCheckedNodes()[0].pathLabels
    /**选择的值 例如 [1,2] */
    const pathValues = cascader.value.getCheckedNodes()[0].pathValues
    const checkedNodes = cascader.value.getCheckedNodes()[0].label
    const checkObj = {
      dm: cascader.value.getCheckedNodes()[0].value,
      label: cascader.value.getCheckedNodes()[0].label,
    }
    emits("update:modelValue", cascader.value.getCheckedNodes()[0].value)
    emits("nameChange", checkedNodes, pathLabels)
    emits("onChange", checkObj, pathValues)
  } else {
    emits("update:modelValue", '')
    emits("nameChange", null, [])
    emits("onChange", null, [])
  }

}

watchEffect(() => {
  if (props.zdbh) {
    if (props.type == 'xzqh') {
      getXzqhDictCdata()
    } else {
      getDictCdata()
    }
  } else {
    if (props.type == 'array') {
      pageData.options = props.zdlist
    }
  }
})

</script>
<style lang="scss" scoped></style>
<style>
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  color: #fff;
}
</style>