<template>
  <div class="demo-form-box-basic">
    <ui-form-box ref="formBox">
      <ui-form
        :data="model1"
        :rules="rules1">
        <ui-form-field
          field="name"
          label="第1个表单">
          <ui-input v-model="model1.name"></ui-input>
        </ui-form-field>
      </ui-form>
      <ui-form
        :data="model2"
        :rules="rules2">
        <ui-form-field
          field="name"
          label="第2个表单">
          <ui-input v-model="model2.name"></ui-input>
        </ui-form-field>
      </ui-form>
      <ui-form
        :data="model3"
        :rules="rules3">
        <ui-form-field
          field="name"
          label="第3个表单">
          <ui-input v-model="model3.name"></ui-input>
        </ui-form-field>
      </ui-form>
    </ui-form-box>
    <div>
      <ui-button @click="testHandler">
        测试
      </ui-button>
    </div>
  </div>
</template>

<script>
import { FormBox, Form, FormField, Input, Button } from "amumu-ui"
export default {
  components: {
    "ui-form-box": FormBox,
    "ui-form": Form,
    "ui-form-field": FormField,
    "ui-input": Input,
    "ui-button": Button,
  },
  data() {
    return {
      model1: {
        name: "",
      },
      rules1: {
        name: [
          {
            required: true,
            message: "这是一个必填项",
          },
        ],
      },
      model2: {
        name: "",
      },
      rules2: {
        name: [
          {
            required: true,
            message: "这是一个必填项",
          },
        ],
      },
      model3: {
        name: "",
      },
      rules3: {
        name: [
          {
            required: true,
            message: "这是一个必填项",
          },
        ],
      },
    }
  },
  methods: {
    testHandler() {
      this.$refs.formBox
        .validate({
          scroll: true,
        })
        .then(() => {
          console.log("s")
        })
        .catch(() => {
          console.log("e")
        })
    },
  },
}
</script>

<style lang="scss">
.demo-form-box-basic {
}
</style>
