<template>
  <div class="demo-form">
    <div class="page__hd">
      <h1 class="page__title">Form</h1>
      <p class="page__desc">表单（校验显示位置）</p>
    </div>
    <div class="demo-form-position-padds">
      <tiny-form ref="ruleForm" :model="createData" :rules="rules" label-width="100px" label-position="left">
        <tiny-form-item label="你真的好优秀呀！" prop="users" vertical>
          <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="你真的好优秀呀！" prop="users" vertical ellipsis>
          <tiny-input v-model="createData.user" placeholder="请输入内容" type="form"></tiny-input>
        </tiny-form-item>
        <tiny-form-item class="demo-form-item">
          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
        </tiny-form-item>
      </tiny-form>
    </div>
    <tiny-dialog-box
      :visible="boxVisibility"
      @update:visible="boxVisibility = $event"
      :modal-append-to-body="false"
      title="消息提示"
    >
      <span>提交成功！</span>
    </tiny-dialog-box>
  </div>
</template>

<script>
import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'

export default {
  components: {
    TinyForm: Form,
    TinyFormItem: FormItem,
    TinyInput: Input,
    TinyButton: Button,
    TinyDialogBox: DialogBox
  },
  data() {
    return {
      createData: {
        users: '',
        user: ''
      },
      rules: {
        users: [{ required: true, message: '必填', trigger: 'change' }]
      },
      boxVisibility: false
    }
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.boxVisibility = true
        }
      })
    }
  }
}
</script>

<style scoped>
.page__hd {
  padding: 40px;
}
.page__title {
  font-weight: 400;
  font-size: 21px;
  text-align: left;
}
.demo-form {
  height: 100%;
  overflow: auto;
  padding-left: 16px;
  padding-right: 15px;
  background: #f4f4f4;
}
.demo-form-position-padds {
  padding-right: 15px;
  background: white;
  padding-left: 15px;
  margin-bottom: 15px;
}

.demo-form-item {
  margin-top: 12px;
}
</style>

<style>
.demo-form-position-padds .tiny-mobile-input-form__input {
  text-align: right;
}
</style>
