<template>
  <el-form
    :model="formData"
    label-width="100px"
    inline
    style="padding-bottom: 20px">
    <el-form-item label="服务项目名称">
      <el-input
        v-model="formData.name"
        placeholder="请输入服务项目名称"></el-input>
    </el-form-item>
    <el-form-item label="单位">
      <el-input v-model="formData.unit" placeholder="请输入单位"></el-input>
    </el-form-item>
    <el-form-item label="售价">
      <el-input v-model="formData.price" placeholder="请输入售价"></el-input>
    </el-form-item>
    <el-form-item label="数量" v-if="props.type === '手工录入服务'">
      <el-input v-model="formData.quantity" placeholder="请输入数量"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
    </el-form-item>
    <el-row v-if="props.type !== '手工录入服务'">
      <el-form-item label="分类" style="width: 100%">
        <serviceSelect v-model="formData.parentId"></serviceSelect>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import api from "@/lib/request";

let props = defineProps<{
  type: "手工录入服务";
}>();
// 表单数据
const formData = defineModel({
  default: {
    name: "", // 服务项目名称
    quantity: 1, // 数量
    unit: "", // 单位
    price: 0, // 售价
    remark: "", // 备注
    parentId: 0, // 分类ID
  },
});

// 分类选项数据
const categoryOptions = ref<{ id: number; name: string }[]>([]);

// 页面加载时获取分类树
onMounted(() => {});
</script>
