<script setup lang="ts">
import { shallowRef } from "vue"
import { httpCategories } from "/@/api/netOrderEnter/netOrderEntry";
import { useVModel } from "@vueuse/core"

const loading = shallowRef(false)
const props = defineProps<{ placeholder: string; disabled: boolean; size: string; companyNo: string ;modelValue: string }>()
const value = useVModel(props, 'modelValue')

const componentProps =  {
  checkStrictly: true,
  expandTrigger: 'hover',
  lazy: true, // 开启远程加载
  lazyLoad: async(node, resolve) => {
    const { level, value } = node
    const model = {
      pid: '',
      cat_name: '',
      status: '',
      companyNo: props.companyNo || 'GS2404151647395616',
      size: 1000
    }
    const list = []
    if (level === 0) {
      model.pid = '0'
    } else {
      model.pid = value
    }

    const res = await httpCategories(model)
    const { code, data } = res
    if (code === 0) {
      data.list.forEach((v1) => {
        const province = {
          value: v1.cat_id,
          label: v1.cat_name,
          leaf: level >= 2,
          desc: v1.cat_desc
        }
        String(v1.status) !== '0' && v1.status !== null && list.push(province)
      })
      resolve(list)
    } else {
      resolve([])
    }
  }
}

</script>

<template>
  <el-cascader
    v-if="!loading"
    v-model="value"
    :placeholder="placeholder || ''"
    :disabled="disabled"
    style="width: 100%"
    :props="componentProps"
    filterable
    clearable
  />
</template>

