<template>
  <el-dialog title="载具类别表单" v-model="visible" width="400px" append-to-body draggable>
    <div class="form-container">
      <el-form ref="carrierCategoryRef" v-loading="loading" class="master-container" :model="form" :rules="rules"
        label-width="80px">
        <el-form-item label="父级类别" prop="parentId" :rules="rules">
          <el-tree-select v-model="form.parentId" :data="parentCategories" check-strictly
            :render-after-expand="false" />
        </el-form-item>
        <el-form-item label="类别名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="类别名称" />
        </el-form-item>
        <el-form-item label="检查箱子" prop="isInspection">
          <el-select v-model="form.isInspection">
            <el-option v-for="item in is_allow_more" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否多批" prop="isAllowMore" v-if="form.parentId !== '0'">
          <el-select v-model="form.isAllowMore">
            <el-option v-for="item in is_allow_more" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="form.remark" placeholder="请填写备注" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button type="primary" icon="Check" @click="handleSave">确 定</el-button>
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getCategory, saveCategory } from "@/api/business/carrier";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
/** 字典数组区 */
const { is_allow_more } = proxy.useDict("is_allow_more");
/** 父类别 */
const parentCategories = ref([]);
const loading = ref(false);
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    name: [{ required: true, message: "类别名称不能为空", trigger: "blur" }],
    parentId: [
      { required: true, trigger: "blur", validator: validateParentId },
    ],
  },
});
const { form, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
  reset();
  visible.value = true;
  loading.value = true;
  getCategory(id || 0).then((res) => {
    if (res.data.formData) {
      form.value = res.data.formData;
      form.value.isAllowMore = form.value.isAllowMore + "";
      form.value.isInspection = form.value.isInspection + "";
    }
    parentCategories.value = res.data.parentOptions;
    parentCategories.value.unshift({
      value: "0",
      label: "一级分类",
    });
    if (id) {
      var index = parentCategories.value.findIndex((obj) => obj.value === id);
      if (index > -1) {
        parentCategories.value.splice(index, 1);
      }
    }
    loading.value = false;
  });
}

/** 取消按钮 */
function handleCancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    parentId: "0",
    code: "",
    name: "",
    remark: "",
    sort: 1,
    isInspection:null
  };
  proxy.resetForm("carrierCategoryRef");
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs["carrierCategoryRef"].validate((valid) => {
    if (valid) {
      saveCategory(form.value).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("操作成功");
          emit("handleSaveSuccess");
        }
        visible.value = false;
      });
    }
  });
}

/**
 * 校验自己不能是自己的父级
 */
function validateParentId(rule, value, callback) {
  if (value == form.value.id) {
    callback(new Error("不能选择自己为父级"));
  } else {
    callback();
  }
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
