<template>
  <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="80px">
    <div
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="index"
      class="form-item"
    >
      <el-form-item>
        {{ index + 1 }}
      </el-form-item>
      <el-form-item
        label="姓名"
        size="mini"
        :prop="'domains.' + index + '.name'"
        :rules="{
          required: true,
          message: '姓名不能為空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.name"></el-input>
      </el-form-item>
      <el-form-item
        label="年齡"
        size="mini"
        :prop="'domains.' + index + '.age'"
        :rules="{
          required: true,
          message: '年齡不能為空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.age"></el-input>
      </el-form-item>
      <el-form-item
        label="地址"
        size="mini"
        :prop="'domains.' + index + '.address'"
        :rules="{
          required: true,
          message: '地址不能為空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.address"></el-input>
      </el-form-item>
      <el-form-item
        label="手機(jī)"
        size="mini"
        :prop="'domains.' + index + '.phone'"
        :rules="{
          required: true,
          message: '手機(jī)不能為空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="saveCurrentData(domain, index)"
          >保存</el-button
        >
      </el-form-item>
    </div>
    <el-form-item class="form-footer">
      <el-button type="primary" size="mini" @click="submitForm('dynamicValidateForm')"
        >全部保存</el-button
      >
      <el-button size="mini" @click="resetForm('dynamicValidateForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      dynamicValidateForm: {
        domains: [],
      },
    };
  },
  created() {
    const item = {
      name: "",
      age: "",
      address: "",
      phone: "",
    };
    for (let i = 0; i < 5; i++) {
      this.dynamicValidateForm.domains.push(Object.assign({}, item));
    }
  },
  methods: {
    // 定義局部校驗(yàn)函數(shù)
    validateFn(domain, index) {
      let validateFieldArr = ["name", "age", "address", "phone"];
      return new Promise((resolve, reject) => {
        for (let item of validateFieldArr) {
          this.$refs.dynamicValidateForm.validateField(
            `domains.${index}.${item}`,
            (err) => {
              if (err) {
                return reject(err); // 失敗返回err
              }
              resolve(true); // 成功返回true
            }
          );
        }
      });
    },
    async saveCurrentData(domain, index) {
      const validateResult = await this.validateFn(domain, index);
      if (validateResult) {
        console.log("-------校驗(yàn)通過(guò)啦------");
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.form-item {
  display: flex;
}
.form-footer {
  display: flex;
  justify-content: center;
}
</style>