<template>
  <div>
    <el-form ref="bbb" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                  prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="单行文本" prop="field101">
        <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="field102">
        <el-input v-model="formData.field102" placeholder="请输入密码" clearable show-password
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="计数器" prop="field103">
        <el-input-number v-model="formData.field103" placeholder="计数器"></el-input-number>
      </el-form-item>
      <el-form-item label="多行文本" prop="field104">
        <el-input v-model="formData.field104" type="textarea" placeholder="请输入多行文本"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item label="多选框组" prop="field106">
        <el-checkbox-group v-model="formData.field106" size="medium">
          <el-checkbox v-for="(item, index) in field106Options" :key="index" :label="item.value"
                       :disabled="item.disabled">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="滑块" prop="field107" required>
        <el-slider :max='100' :step='1' v-model="formData.field107"></el-slider>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
    export default {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    mobile: '',
                    field101: undefined,
                    field102: undefined,
                    field103: undefined,
                    field104: undefined,
                    field105: [],
                    field106: [],
                    field107: 0,
                },
                rules: {
                    mobile: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }, {
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                        message: '手机号格式错误',
                        trigger: 'blur'
                    }],
                    field101: [{
                        required: true,
                        message: '请输入单行文本',
                        trigger: 'blur'
                    }],
                    field102: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    field103: [{
                        required: true,
                        message: '计数器',
                        trigger: 'blur'
                    }],
                    field104: [{
                        required: true,
                        message: '请输入多行文本',
                        trigger: 'blur'
                    }],
                    field105: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个field105',
                        trigger: 'change'
                    }],
                    field106: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个field106',
                        trigger: 'change'
                    }],
                },
                field105Options: [],
                field106Options: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                field105Props: {
                    "multiple": false
                },
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['bbb'].validate(valid => {
                    if (!valid) return
                    // TODO 提交表单
                })
            },
            resetForm() {
                this.$refs['bbb'].resetFields()
            },
            getField105Options() {
                // TODO 发起请求获取数据
                this.field105Options
            },
        }
    }

</script>
<style>
</style>
