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

<script setup>
import { ref } from "vue";
import { postRequest } from "../../axios/index.js";
import { ElCascader } from 'element-plus'
import "element-plus/es/components/cascader/style/css";

defineOptions({
  name: "AppCascader",
});
const props = defineProps({
  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: "dictionariesId" },
  joinSeparator: { type: String, default: "/" },
  controlLevel: { type: Boolean, default: false },
});
const modelValue = defineModel({ type: Array, required: true });
const cascaderRef = ref(null);
const cascaderProps = {
  lazy: true,
  lazyLoad: async (node, resolve) => {
    const { dictionariesList } = await postRequest("/sys/dictionaries/list", {
      parentId: node.data.dictionariesId || props.id,
    });
    resolve(
      dictionariesList.map((item) => {
        return {
          dictionariesId: item.dictionariesId,
          bianma: item.bianma,
          name: item.name,
          leaf: props.controlLevel
            ? node.level >= props.level
            : item.hasChildren === 0,
        };
      })
    );
  },
  value: props.value,
  id: "dictionariesId",
  label: "name",
  children: "children",
  checkStrictly: props.checkStrictly,
};
const getCheckedNodes = () => {
  return (
    cascaderRef.value
      .getCheckedNodes()[0]
      ?.pathLabels.join(props.joinSeparator) || ""
  );
};
defineExpose({
  getCheckedNodes,
});
</script>

<style scoped></style>
