<template>
  <el-cascader
    ref="cascaderRef"
    v-model="modelValue"
    :props="cascaderProps"
    :show-all-levels="showAllLevels"
  />
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { ref } from "vue";
import {
  layoutFnGetLevels,
  layoutFnGetLevelsAndChildrenNumber,
} from "@/assets/js/data_dictionary.js";

defineOptions({
  name: "LayoutCascader",
});
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
    required: true,
  },
  id: {
    type: String,
    required: true,
    default: "",
  },
  level: {
    type: [Number, String],
    default: 3,
  },
  checkStrictly: {
    type: Boolean,
    default: true,
  },
  showAllLevels: {
    type: Boolean,
    default: true,
  },
  value: {
    type: String,
    default: "DICTIONARIES_ID",
  },
  joinSeparator: {
    type: String,
    default: "/",
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const cascaderRef = ref(null);
const cascaderProps = {
  lazy: true,
  lazyLoad: async (node, resolve) => {
    let resData;
    if (props.checkStrictly)
      resData = await layoutFnGetLevels(node.data.DICTIONARIES_ID || props.id);
    else
      resData = await layoutFnGetLevelsAndChildrenNumber(
        node.data.DICTIONARIES_ID || props.id
      );
    resolve(
      resData.value.map((item) => {
        return {
          DICTIONARIES_ID: item.DICTIONARIES_ID,
          BIANMA: item.BIANMA,
          NAME: item.NAME,
          leaf: props.checkStrictly
            ? node.level >= props.level
            : item.zcount === 0,
        };
      })
    );
  },
  value: props.value,
  id: "DICTIONARIES_ID",
  label: "NAME",
  children: "children",
  checkStrictly: props.checkStrictly,
};
const getCheckedNodes = () => {
  return cascaderRef.value
    .getCheckedNodes()[0]
    .pathLabels.join(props.joinSeparator);
};
defineExpose({
  getCheckedNodes,
});
</script>

<style scoped></style>
