<template>
  <view>
    <!-- 用戶信息表單 -->
    <u-form :model="userForm" ref="userForm" @submit="submitForms">
      <u-form-item label="姓名" prop="name" :rules="nameRules">
        <u-input v-model="userForm.name" placeholder="請(qǐng)輸入姓名" />
      </u-form-item>
      <u-form-item label="年齡" prop="age" :rules="ageRules">
        <u-input type="number" v-model="userForm.age" placeholder="請(qǐng)輸入年齡" />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" block formType="submit">提交用戶信息</u-button>
      </u-form-item>
    </u-form>

    <!-- 公司信息表單 -->
    <u-form :model="companyForm" ref="companyForm" @submit="submitForms">
      <u-form-item label="公司名稱" prop="companyName" :rules="companyNameRules">
        <u-input v-model="companyForm.companyName" placeholder="請(qǐng)輸入公司名稱" />
      </u-form-item>
      <u-form-item label="職位" prop="position" :rules="positionRules">
        <u-input v-model="companyForm.position" placeholder="請(qǐng)輸入職位" />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" block formType="submit">提交公司信息</u-button>
      </u-form-item>
    </u-form>

    <!-- 提交按鈕 -->
    <u-button type="success" block @click="submitForms">提交所有信息</u-button>
  </view>
</template>

export default {
  data() {
    return {
      // 用戶信息表單的數(shù)據(jù)
      userForm: {
        name: '',
        age: ''
      },
      // 用戶信息表單的校驗(yàn)規(guī)則
      nameRules: [
        { required: true, message: '姓名是必填的', trigger: 'blur' }
      ],
      ageRules: [
        { required: true, message: '年齡是必填的', trigger: 'blur' },
        { type: 'number', message: '請(qǐng)輸入有效的年齡', trigger: 'blur' }
      ],

      // 公司信息表單的數(shù)據(jù)
      companyForm: {
        companyName: '',
        position: ''
      },
      // 公司信息表單的校驗(yàn)規(guī)則
      companyNameRules: [
        { required: true, message: '公司名稱是必填的', trigger: 'blur' }
      ],
      positionRules: [
        { required: true, message: '職位是必填的', trigger: 'blur' }
      ]
    };
  },
  methods: {
    // 提交表單
    submitForms() {
      // 同時(shí)校驗(yàn)所有表單
      const userFormValidation = this.$refs.userForm.validate();
      const companyFormValidation = this.$refs.companyForm.validate();

      // 使用 Promise.all 來(lái)并行驗(yàn)證多個(gè)表單
      Promise.all([userFormValidation, companyFormValidation])
        .then(() => {
          // 如果所有表單驗(yàn)證通過(guò)
          this.$u.toast('所有表單驗(yàn)證通過(guò)，提交成功');
          // 可以在這里進(jìn)行數(shù)據(jù)提交
        })
        .catch(() => {
          // 如果有任何表單驗(yàn)證失敗
          this.$u.toast('表單驗(yàn)證失敗，請(qǐng)檢查輸入');
        });
    }
  }
};