<template>
  <div>
    <el-form
      ref="validateForm"
      :model="formData"
      @validate="onValidate"
      :status-icon="true"
    >
      <el-form-item label="姓名" :rules="ruleObj.name" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="狀態(tài)" :rules="ruleObj.status" prop="status">
        <el-select v-model="formData.status">
          <el-option :value="1" label="啟用"></el-option>
          <el-option :value="2" label="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="賬號(hào)" :rules="ruleObj.account" prop="account">
        <el-input v-model="formData.account"></el-input>
      </el-form-item>
      <el-form-item
        label="開始日期"
        :rules="ruleObj.beginDate"
        prop="beginDate"
      >
        <el-date-picker
          type="date"
          v-model="formData.beginDate"
          placement="bottom-start"
          value-format="yyyy-MM-dd"
          @change="(values) => onChange(values, 'endDate')"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="結(jié)束日期" :rules="ruleObj.endDate" prop="endDate">
        <el-date-picker
          type="date"
          v-model="formData.endDate"
          placement="bottom-start"
          value-format="yyyy-MM-dd"
          @change="(values) => onChange(values, 'beginDate')"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-button type="primary" :disabled="!validatePass" @click="onSave">
      保存
    </el-button>
  </div>
</template>

<script>
export default {
  name: "StyleTextPage",
  data() {
    return {
      formData: {
        status: null,
        name: null,
        account: null,
        endDate: null,
        beginDate: null,
      },
      // 表單是否整體通過驗(yàn)證
      validatePass: false,
      // 賬號(hào)ajax是否正處于驗(yàn)證中
      accountAjaxValidating: false,
      ruleObj: {
        endDate: [
          {
            validator: (rule, value, callback) => {
              if (this.formData.beginDate === this.formData.endDate) {
                return callback(new Error("開始日期不能等于結(jié)束日期"));
              } else {
                // 如果即在endDate驗(yàn)證成功時(shí)，立即觸發(fā)beginDate的驗(yàn)證，且在beginDate驗(yàn)證成功時(shí)，立即觸發(fā)endDate的驗(yàn)證會(huì)導(dǎo)致驗(yàn)證死循環(huán)，因此這種驗(yàn)證，只能在change事件中觸發(fā)
                // this.$nextTick(() => {
                //   this.$refs.validateForm.validateField("beginDate");
                // });
                return callback();
              }
            },
            trigger: "change",
          },
        ],
        beginDate: [
          {
            validator: (rule, value, callback) => {
              if (this.formData.beginDate === this.formData.endDate) {
                return callback(new Error("開始日期不能等于結(jié)束日期"));
              } else {
                // 如果即在beginDate驗(yàn)證成功時(shí)，立即觸發(fā)endDate的驗(yàn)證，且在endDate驗(yàn)證成功時(shí)，立即觸發(fā)beginDate的驗(yàn)證會(huì)導(dǎo)致驗(yàn)證死循環(huán)，因此這種驗(yàn)證，只能在change事件中觸發(fā)
                // this.$nextTick(() => {
                //   this.$refs.validateForm.validateField("endDate");
                // });
                return callback();
              }
            },
            trigger: "change",
          },
          { required: true, message: "必填", trigger: "change" },
        ],
        name: [],
        account: [
          { required: true, message: "必填" },
          {
            validator: (rule, value, callback) => {
              console.log("自定義賬號(hào)校驗(yàn)");
              this.accountAjaxValidating = true;
              // 進(jìn)入賬號(hào)自定義驗(yàn)證方法，則將表單設(shè)置為驗(yàn)證不通過（用來保證setTimeout休眠期間，保存按鈕是不可用的），最中是否通過由setTimeout的結(jié)果決定
              this.validatePass = false;
              setTimeout(() => {
                console.log("獲取到驗(yàn)證結(jié)果");
                this.accountAjaxValidating = false;
                if (value === "111") {
                  return callback(new Error("賬號(hào)已存在"));
                } else {
                  return callback();
                }
              }, 2000);
            },
            trigger: "blur",
          },
        ],
        status: [{ required: true, message: "必填" }],
      },
    };
  },
  mounted() {
    console.log(this.$refs.validateForm.fields);
    this.updateFormValidateStatus();
  },
  methods: {
    onChange(val, relValidateField) {
      console.log(val, relValidateField);
      this.$refs.validateForm.validateField(relValidateField);
    },
    updateFormValidateStatus() {
      let validateStateArr = [];
      if (this.$refs.validateForm) {
        validateStateArr = this.$refs.validateForm.fields.map((item) => {
          if (item.validateState) {
            return item.validateState;
          } else if (item.rules && item.rules.length > 0) {
            return "error";
          } else {
            return "success";
          }
        });
      }
      this.validatePass =
        !this.accountAjaxValidating &&
        validateStateArr.find((item) => item === "error") !== "error";
    },
    onValidate(...args) {
      console.log("args", args);
      this.updateFormValidateStatus();
    },
    async onSave() {
      try {
        await this.$refs.validateForm.validate();
      } catch (e) {
        console.error(e);
      }
    },
  },
};
</script>

<style scoped></style>