<script setup lang="ts">
import { useResponseHandle } from "/@/hooks/useAsync";
import { httpList } from "/@/api/components/goodClass";
import { useVModel } from "@vueuse/core";

const props = defineProps<{
  placeholder?: string;
  modelValue?: any[];
}>();

defineEmits(["update:modelValue"]);

const responseHandle = useResponseHandle();

const value = useVModel(props, "modelValue");

async function lazyLoad(node, resolve) {
  const { level, value } = node;
  let model = {
    cat_name: "",
    pid: "",
    status: ""
  };
  let list = [];
  if (level === 0) {
    model.pid = "0";
  } else {
    model.pid = value;
  }
  const { code, message, data } = await httpList(model);

  responseHandle({
    code,
    message,
    handler: () => {
      data.forEach(v1 => {
        let province = {
          value: v1.id,
          label: v1.cat_name,
          leaf: level >= 2,
          desc: v1.cat_desc
        };
        list.push(province);
      });

      resolve(list);
    }
  });
}
</script>

<template>
  <ElCascader
    v-model="value"
    :props="{
      checkStrictly: true,
      expandTrigger: 'hover',
      lazy: true,
      lazyLoad
    }"
    :placeholder="placeholder"
  />
</template>
