<template>
  <el-cascader
    ref="cascaderRef"
    v-model="modelValue"
    :options="hiddenDangerTypeList"
    :props="{
      value: 'id',
      label: 'name',
      children: 'nodes',
      checkStrictly: 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: "/",
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const cascaderRef = ref(null);
const getCheckedNodes = () => {
  return cascaderRef.value
    .getCheckedNodes()[0]
    .pathLabels.join(props.joinSeparator);
};
defineExpose({
  getCheckedNodes,
});
const hiddenDangerTypeList = await getHiddenDangerType();
</script>

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