<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-cascader ref="cascaderRef" style="width: 100%" class="el-cascader-zj" :show-all-levels="false" :props="endProps"
      :placeholder="props.modelValue ? props.placeholder : ''" :options="tableData" v-model="props.modelValue"
      @change="handleChange" clearable :before-filter="inputChange" />
  </div>
</template>

<script setup>
import { debounce } from "lodash";
import { COMPONENT_WIDTH } from "@/constant";
import {
  ref,
  defineProps,
  defineEmits,
  defineExpose,
  computed,
  onMounted,
  watch,
  nextTick
} from "vue";
// import { getDept, getOrgTree } from "@/api/user-manage";
// import { kebabCase } from "element-plus/lib/utils";
import { getSysDictByCode } from "@/api/sysDict";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  multiple: {
    default: false,
    type: Boolean
  },
  filterable: {
    default: false,
    type: Boolean
  },
  modelValue: {
    type: Array || String,
    default: []
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  },
  dict: String

});
const cascaderRef = ref(null);
const node_had = ref([]);
const resolve_had = ref([]);
//配置项
const endProps = {
  children: "itemList",
  value: "dm",
  label: "zdmc",
  checkStrictly: true,
  multiple: props.multiple,
};
const tableData = ref([]);
const getSysMenuTree = async (dict) => {
  const res = await getSysDictByCode({ dictCode: dict });
  let data = res.itemList
  for (let i = 0; i < data.length; i++) {
    data[i].leaf = !data[i].itemList || data[i].itemList == [];
  }
  tableData.value = data;
};
// 搜索
onMounted(() => {
  getSysMenuTree(props.dict)

});
const emits = defineEmits(["update:modelValue", "change"]);
const handleChange = (e) => {
  if (props.multiple === true) {
    const data = e.map((item) => {
      return item[item.length - 1];
    });
    emits("update:modelValue", data);
  } else {
    const data = e ? e[e.length - 1] : "";
    let obj = {};
    let item = cascaderRef.value.getCheckedNodes()[0] ? cascaderRef.value.getCheckedNodes()[0].data : "";
    obj.dm = item.dm;
    obj.zdmc = item.zdmc;
    emits("update:modelValue", data);
    emits("change", obj);
  }
};
</script>

<style lang="scss" scoped>
.el-cascader-zj {
  width: 100%;
}
</style>
