<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class>
      <el-form-item label="指标分类" prop="parentids">
        <el-cascader
          v-model="parentids"
          :options="typeDropDatas"
          :props="props"
          placeholder="请选择指标分类,默认为顶级分类"
          clearable
          filterable
          change-on-select
          style="width: 300px;"
          ></el-cascader>
      </el-form-item>
      <el-form-item label="分类名称" prop="F_CategoryName">
        <el-input v-model="ruleForm.F_CategoryName" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="排列序号" prop="F_Sort">
        <el-input v-model.number="ruleForm.F_Sort" placeholder="请输入排列序号" maxlength="10" show-word-limit />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getqualityList,
  getqualityDrop,
  addType,
  editType,
  getTypeDetails,
} from "@/api/qualityCheck/quotaManagement";
export default {
  name: "AddOrEditType",
  props: {
    rowid: {
      type: String,
      default: "",
    },
    layerid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      parentids: [],
      ruleForm: {
        F_ParentId: "", // 父节点id
        id: "", // 当前节点id
        F_Sort: "", // 序号
        F_CategoryName: "", // 分类名称
      },
      rules: {
        F_Sort: [
          {
            required: true,
            message: "排列序号不能为空",
          },
          {
            type: "number",
            message: "排列序号必须为数字",
          },
        ],
        F_CategoryName: [
          {
            required: true,
            message: "分类名称不能为空",
          },
        ],
      },
      typeDropDatas: [], // 下拉分类
      // 自定义菜单下拉数据的key值
      props: {
        value: "id",
        label: "text",
      },
    };
  },
  created() {
    this.getTypeDrop().then(() => {
      if (this.rowid) {
        this.ruleForm.id = this.rowid;
        this.getTypeDetail(this.rowid);
      }
    });
  },
  methods: {
    // 获取分类下拉
    getTypeDrop() {
      return new Promise((resolve) => {
        const params = {};
        getqualityDrop(params).then((response) => {
          if (response.state.toLowerCase() === "success") {
            this.typeDropDatas = response.data;
          }
        });
        resolve();
      });
    },
    // 获取菜单详情
    getTypeDetail(rid) {
      getTypeDetails(rid).then((response) => {
        if (response.state.toLowerCase() === "success") {
          const res = response.data;
          this.ruleForm.F_CategoryName = res.F_CategoryName; // 分类名称
          this.ruleForm.F_Sort = res.F_Sort; // 排序
          this.ruleForm.F_ParentId = res.F_ParentId; // 父节点id
          if(res.ParentId.length!=0){
            this.parentids=res.ParentId.map(Number).reverse();
          }
        }
      });
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.parentids.length!=0){
            if(this.rowid == this.parentids[this.parentids.length-1]){
              this.$message.info('不能选择的上级分类')
              return false
            }
          }
          this.loading = true;
          return new Promise((resolve) => {
            const params = {
              F_CategoryName: this.ruleForm.F_CategoryName,
              F_ParentId: this.parentids.length==0?0:this.parentids[this.parentids.length-1],
              F_Sort: this.ruleForm.F_Sort,
              F_CategoryId: this.rowid,
            };
            if (!this.rowid) {
              // 添加
              addType(params)
                .then((response) => {
                  this.loading = false;
                  if (response.state.toLowerCase() === "success") {
                    this.$parent.$layer.close(this.layerid);
                    this.$parent.getQualityLists(); // 重新加载父级数据
                    this.$message.success("恭喜你，质检分类添加成功!");
                  }
                })
                .catch(() => {
                  this.loading = false;
                });
              return;
            }
            // 编辑
            editType(params)
              .then((response) => {
                this.loading = false;
                if (response.state.toLowerCase() === "success") {
                  this.$parent.$layer.close(this.layerid);
                  this.$parent.getQualityLists(); // 重新加载父级数据
                  this.$message.success("恭喜你，质检分类编辑成功!");
                  this.$parent.treeclickId=''
                }
              })
              .catch(() => {
                this.loading = false;
              });
          });
        } else {
          this.$message.error("请输入有效的必填项信息!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
