<template>
  <el-cascader v-model="modelValue" placeholder="请选择类目" filterable :options="options" :props="props"
    style="width: 300px;"></el-cascader>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCategory } from '@/api/common'

const modelValue = defineModel({
  type: String,
  default: ''
})

const options = ref([])

const props = ref({
  children: 'child',
  emitPath: false
})

// 获取类目
async function getCategoryAjax() {
  try {
    const res = await getCategory()
    res.map(item => {
      item.label = item.firstCategory
      item.child.map(val => {
        val.label = `${val.secondCategory}`
        val.value = `${val.firstCategoryCode}_${val.secondCategoryCode}`
      })
    })
    options.value = res
    console.log('options.value', options.value);
  } catch (error) {
    console.log(error);
  }
}

onMounted(() => {
  getCategoryAjax()
})
</script>