<template>
  <div>
    <h1>標(biāo)記有誤/取消標(biāo)記有誤：</h1>
    <el-button @click="() => onMarkError(['markField', 'mustAndMarkField'])">
      將第二個和最后一個標(biāo)記有誤
    </el-button>
    <el-button @click="() => onMarkError(['markField'])"
      >將第二個標(biāo)記有誤</el-button
    >
    <el-button @click="() => onMarkError(['mustAndMarkField'])"
      >將最后一個標(biāo)記有誤</el-button
    >
    <el-button
      @click="() => onCancelMarkError(['markField', 'mustAndMarkField'])"
    >
      取消第二個和最后一個標(biāo)記有誤
    </el-button>
    <el-button @click="() => onCancelMarkError(['markField'])">
      取消第二個標(biāo)記有誤
    </el-button>
    <el-button @click="() => onCancelMarkError(['mustAndMarkField'])">
      取消最后一個標(biāo)記有誤
    </el-button>
    <el-button type="primary" @click="onSubmit">提交表單</el-button>

    <el-button-group>
      <el-button @click="() => onChangeModel('hasValuePassMarkError')"
        >只要有值則標(biāo)記有誤驗證通過</el-button
      >
      <el-button @click="() => onChangeModel('ignoreMarkError')">
        不執(zhí)行標(biāo)記有誤驗證</el-button
      >
    </el-button-group>
    <el-form :model="formData" ref="formDataRef">
      <el-form-item
        label="必填字段"
        prop="mustField"
        :rules="formDataRule.mustField"
      >
        <el-input v-model="formData.mustField"></el-input>
      </el-form-item>
      <el-form-item
        label="標(biāo)記有誤字段"
        prop="markField"
        :rules="formDataRule.markField"
      >
        <el-input v-model="formData.markField"></el-input>
      </el-form-item>
      <el-form-item
        label="普通字段"
        prop="normalField"
        :rules="formDataRule.normalField"
      >
        <el-input v-model="formData.normalField"></el-input>
      </el-form-item>
      <el-form-item
        label="必填且標(biāo)記有誤字段"
        prop="mustAndMarkField"
        :rules="formDataRule.mustAndMarkField"
      >
        <el-input v-model="formData.mustAndMarkField"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "StyleTextPage",
  components: {},
  data() {
    return {
      /**
       * 標(biāo)記有誤驗證方法執(zhí)行模式：
       * hasValuePassMarkError：只要有值，則通過驗證，否則不通過驗證
       * ignoreMarkError: 一律通過
       */
      onChangeModel: "hasValuePassMarkError",
      // 表單數(shù)據(jù)
      formData: {
        mustField: null,
        markField: null,
        normalField: null,
        mustAndMarkField: null,
      },
      // 存放標(biāo)記有誤數(shù)據(jù)的對象
      markErrorData: null,
      // 自定義驗證規(guī)則：驗證是否存在標(biāo)記有誤數(shù)據(jù)，如果存在，則將標(biāo)記有誤數(shù)據(jù)，顯示為錯誤數(shù)據(jù)
      validateMarkError(rule, value, callback, fieldName) {
        if (this.onChangeModel === "ignoreMarkError") {
          // 一律通過
          return callback();
        }
        if (this.markErrorData && this.markErrorData[fieldName]) {
          // 當(dāng)前驗證字段存在標(biāo)記有誤信息
          if (this.onChangeModel === "hasValuePassMarkError") {
            if (value) {
              // 只要有值則通過
              return callback();
            } else {
              // 沒值，不通過
              return callback(new Error(this.markErrorData[fieldName]));
            }
          }
        }
        return callback();
      },
      // 測試不同的驗證規(guī)則組合情況
      formDataRule: {
        mustField: [{ required: true, message: "必填" }],
        markField: [
          {
            validator: (rule, value, callback) =>
              this.validateMarkError(rule, value, callback, "markField"),
            trigger: "blur",
          },
        ],
        normalField: [],
        mustAndMarkField: [
          {
            validator: (rule, value, callback) =>
              this.validateMarkError(rule, value, callback, "mustAndMarkField"),
            trigger: "blur",
          },
          { required: true, message: "必填" },
        ],
      },
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.formDataRef.validate((ret) => {
        if (ret) {
          this.$message({
            message: "驗證通過",
            type: "success",
          });
        } else {
          this.$message({
            message: "表單數(shù)據(jù)驗證失敗",
            type: "error",
          });
        }
      });
    },
    // 手動刪除錯誤提示信息
    onCancelMarkError(cancelMarkErrorPropArr) {
      if (!this.markErrorData) {
        this.markErrorData = {};
      }
      cancelMarkErrorPropArr.forEach((fieldName) => {
        this.$set(this.markErrorData, fieldName, null);
      });
      this.$refs.formDataRef.clearValidate(cancelMarkErrorPropArr);
    },
    // 手動添加錯誤提示信息
    onMarkError(markErrorPropArr) {
      if (!this.markErrorData) {
        this.markErrorData = {};
      }
      markErrorPropArr.forEach((fieldName) => {
        this.$set(
          this.markErrorData,
          fieldName,
          `對字段 ${fieldName} 標(biāo)記有誤`
        );
      });
      this.$refs.formDataRef.validateField(markErrorPropArr);
    },
  },
};
</script>

<style scoped lang="scss">
.js-validate-form ::v-deep(.is-error .o-show-data) {
  color: red;
}
</style>