<template>
  <el-cascader
    v-if="type === 'cascader'"
    ref="cascaderRef"
    v-model="modelValue"
    :options="hiddenDangerTypeList"
    :props="{
      value: 'id',
      label: 'name',
      children: 'nodes',
      checkStrictly: true,
    }"
  />
  <el-tree-select
    v-if="type === 'tree'"
    ref="treeSelectRef"
    v-model="modelValue"
    :data="hiddenDangerTypeList"
    :props="{
      value: 'BIANMA',
      children: 'nodes',
      label: 'name',
    }"
    node-key="id"
    :render-after-expand="false"
    accordion
    check-strictly
    :clearable="true"
  />
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { getHiddenDangerType } from "@/request/data_dictionary.js";
import { ref } from "vue";

defineOptions({
  name: "LayoutHiddenDangerType",
});
const props = defineProps({
  modelValue: {
    type: [String, Array],
    required: true,
    default: "",
  },
  joinSeparator: {
    type: String,
    default: "/",
  },
  type: {
    type: String,
    default: "cascader",
    validator: (value) => {
      const typeList = ["cascader", "tree"];
      if (typeList.includes(value)) {
        return true;
      } else {
        throw new Error(`type必须是${typeList.join("、")}之一`);
      }
    },
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const cascaderRef = ref(null);
const treeSelectRef = ref(null);
const getCurrentNode = () => {
  return treeSelectRef.value.getCurrentNode();
};
const getCheckedNodes = () => {
  return cascaderRef.value
    .getCheckedNodes()[0]
    .pathLabels.join(props.joinSeparator);
};
defineExpose({
  getCheckedNodes,
  getCurrentNode,
});
const hiddenDangerTypeList = await getHiddenDangerType();
</script>

<style scoped lang="scss"></style>
