<template>
  <el-tree-select
    ref="treeSelectRef"
    v-model="modelValue"
    :data="data"
    node-key="id"
    :props="{
      children: 'children',
      label: 'NAME',
    }"
    :render-after-expand="false"
    accordion
    check-strictly
    :clearable="true"
  />
</template>

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

defineOptions({
  name: "LayoutRegulatoryType",
});
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
    default: "",
  },
  territory: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emits);
const treeSelectRef = ref(null);
const data = ref([]);
const fnGetData = async () => {
  const { value } = await layoutFnGetRegulatoryType({
    PROVINCE: props.territory[0],
    CITY: props.territory[1],
    COUNTY: props.territory[2],
  });
  data.value = value;
};
watchEffect(() => {
  if (props.territory.length > 0) fnGetData();
});
</script>

<style scoped></style>
