<!--资质管理新增弹窗-->
<template>
  <el-dialog
    :title="title"
    width="440px"
    :visible.sync="isShowInfo"
    append-to-body
    @close="close"
  >
    <el-form
      :inline="true"
      :model="cerInfo"
      class="demo-form-inline"
      :rules="rules"
      label-width="115px"
      ref="form"
    >
      <div class="item">
        <el-form-item label="资质要求名称:" prop="qualifyName">
          <el-input v-model.trim="cerInfo.qualifyName" style="width: 250px" />
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item label="资质要求描述:" prop="qualifyDesc">
          <el-input v-model.trim="cerInfo.qualifyDesc" style="width: 250px" />
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item label="资质要求证明材料要求:" prop="proveMaterialDesc">
          <el-input
            v-model.trim="cerInfo.proveMaterialDesc"
            style="width: 250px"
          />
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item label="备注:">
          <el-input
            v-model.trim="cerInfo.remark"
            style="width: 250px"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
      </div>
      <div class="item">
        <el-form-item class="btnBOX">
          <el-button type="primary" @click="save"> 保存 </el-button>
          <el-button type="info" style="margin-left: 100px" @click="close">
            取消
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
// import dialogHeader from "./dialogHeader.vue";
// import inputVue from "../input/inputVue.vue";
// import InputNumber from "../input/inputNumber.vue";
// import RedStar from "../redStar.vue";
// import { Message } from 'element-ui'
// import { C_add,C_list,C_update,detail } from "../../../api/product/category"
// import { getCertification } from '../../../api/systemNew/systemNew'
import { add, update } from "../../../../api/system/certification";
export default {
  components: {
    // inputVue,
    // dialogHeader,
    // InputNumber,
    // RedStar,
    // Message
  },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
    dataInfo: {
      type: Object,
    },
    title: "",
  },
  data() {
    return {
      // 品类信息
      cerInfo: {
        qualifyName: "",
        qualifyDesc: "",
        proveMaterialDesc: "",
        remark: "",
      },
      categoryList: [],
      // 资质列表
      certificationList: [],

      rules: {
        empty: [{ required: true, message: "此内容不能为空", trigger: "blur" }],
        qualifyDesc: [
          { required: true, message: "此内容不能为空", trigger: "blur" },
        ],
        proveMaterialDesc: [
          { required: true, message: "此内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    dataInfo: {
      handler(vla) {
        if (vla != "") {
          // 编辑操作
          if (!vla.id) return;
          this.cerInfo.id = vla.id;
          this.cerInfo.qualifyName = vla.qualifyName;
          this.cerInfo.qualifyDesc = vla.qualifyDesc;
          this.cerInfo.proveMaterialDesc = vla.proveMaterialDesc;
          this.cerInfo.remark = vla.remark;
        } else {
          this.resetData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // C_list().then((res) => {
    //   this.categoryList = res;
    // });
    // getCertification().then((res) => {
    //   console.log(res);
    //   this.certificationList = res;
    // });
  },
  methods: {
    close() {
      this.$emit("close");
      // 重置数据
      // this.resetData()
    },
    // 数据处理
    save() {
      console.log(this.$refs)
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title == "新增资质要求") {
            add(this.cerInfo).then((res) => {
              console.log(res, res != "");
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.close();
              // 保存后刷新数据
              this.$emit("refresh");
            });
          } else {
            update(this.cerInfo).then((res) => {
              this.$message({
                message: "更新成功",
                type: "success",
              });
              this.close();
              // 保存后刷新数据
              this.$emit("refresh");
            });
          }
        } else {
          return false;
        }
      });
    },
    resetData() {
      this.cerInfo = {
        qualifyName: "",
        qualifyDesc: "",
        proveMaterialDesc: "",
        remark: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.btnBOX {
  display: flex;
  justify-content: space-between;
}
.categoryDialog {
  width: 800px;
  box-sizing: border-box;
  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .inputContent {
      flex: 1;
      padding: 0 10px;
      box-sizing: border-box;
      .inputbox {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }
    }
  }

  .AddContent {
    max-height: 180px;
    overflow: auto;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #999;
    padding: 10px;

    .addBtn {
      margin-bottom: 10px;
    }

    .addItem {
      display: flex;

      .item {
        padding-right: 10px;
        display: flex;
        align-items: center;

        .label,
        .el-form-item.el-form-item__label {
          line-height: 21px !important;
          line-height: NONE;
        }
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>