<template>
  <div class="rule-exam part-box part-box-pad">
    <h4 class="part-box-tips">变量印刷考务字段配置：</h4>
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="170px"
    >
      <el-form-item label="基础字段：" required>
        <el-checkbox
          v-for="field in modalForm.requiredFields"
          :key="field.code"
          v-model="field.enable"
          :disabled="field.disabled"
          >{{ field.name }}</el-checkbox
        >
      </el-form-item>
      <el-form-item label="扩展字段：">
        <div class="part-box part-box-pad part-box-border">
          <div class="label-edit">
            <div
              v-for="field in modalForm.extendFields"
              :key="field.code"
              class="label-item"
            >
              <el-checkbox
                v-model="field.enable"
                class="label-item-content"
                @change="checkRuleChange"
                >{{ field.name }}</el-checkbox
              >
              <i
                class="label-item-delete el-icon-error"
                @click="deleteField(field)"
              ></i>
            </div>
            <div class="label-add" @click="toAddField">
              <i class="el-icon-plus"></i><i>添加</i>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :disabled="isSubmit"
          style="width: 140px"
          @click="submit"
          >保存</el-button
        >
        <span v-if="ruleChanged" class="tips-info tips-error">（有修改）</span>
      </el-form-item>
    </el-form>

    <!-- ModifyField -->
    <modify-field ref="ModifyField" @confirm="addField"></modify-field>
  </div>
</template>

<script>
import ModifyField from "../components/ModifyField";
import { examRuleDetail, saveExamRule } from "../api";

const initModalForm = {
  id: null,
  requiredFields: "[]",
  extendFields: "[]",
};

export default {
  name: "rule-exam",
  components: { ModifyField },
  data() {
    return {
      modalForm: { ...initModalForm },
      isSubmit: false,
      examRule: {},
      ruleChanged: false,
      prevModalFrom: "",
      rules: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.examRule = await examRuleDetail();
      this.modalForm.requiredFields = JSON.parse(this.examRule.requiredFields);
      if (this.modalForm.extendFields)
        this.modalForm.extendFields = JSON.parse(this.examRule.extendFields);
      this.modalForm.id = this.examRule.id;

      if (!this.examRule.id) {
        this.$message.warning("当前系统还没有考务规则，请修改保存！");
      }

      this.prevModalFrom = JSON.stringify(this.modalForm);
    },
    checkRuleChange() {
      this.ruleChanged = this.prevModalFrom !== JSON.stringify(this.modalForm);
    },
    checkRuleExist() {
      return !!this.examRule.id;
    },
    toAddField() {
      this.$refs.ModifyField.open();
    },
    addField(field) {
      this.modalForm.extendFields.push({ ...field });
      this.checkRuleChange();
    },
    deleteField(field) {
      const index = this.modalForm.extendFields.findIndex(
        (item) => item.code === field.code
      );
      if (index !== -1) this.modalForm.extendFields.splice(index, 1);
      this.checkRuleChange();
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      let datas = {
        ...this.modalForm,
      };
      datas.requiredFields = JSON.stringify(datas.requiredFields);
      datas.extendFields = JSON.stringify(datas.extendFields);
      const data = await saveExamRule(datas).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      this.modalForm.id = data;
      this.examRule.id = data;
      this.prevModalFrom = JSON.stringify(this.modalForm);
      this.checkRuleChange();
      this.$message.success("保存成功！");
    },
  },
};
</script>
