<template>
  <div>
    <el-tree-select
      check-strictly
      :check-on-click-node="true"
      v-model="data"
      :props="{ label: 'name', value: 'id' }"
      :data="categoryOptions"
      :render-after-expand="false"
      style="width: 240px" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import api from "@/lib/request";
import { ElMessage } from "element-plus";
const data = defineModel({
  default: 0,
});

const categoryOptions = ref<{ id: number; name: string }[]>([]);

const loadCategoryTree = async () => {
  try {
    const res = await api().get("/service-category/list");
    if (res.data.list.length) {
      categoryOptions.value = [{ id: 0, name: "无" }, ...res.data.list];
    } else {
      categoryOptions.value = [{ id: 0, name: "无" }];
    }
  } catch (err) {
    ElMessage.error("获取分类树失败");
  }
};

// 页面加载时获取分类树
onMounted(() => {
  loadCategoryTree();
});
</script>
<style lang="scss" scoped></style>
