<template>
  <div>
    <h1>表单</h1>
    <p class="fbg-text">由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</p>
    <h3 class="fbg-title">基础用法</h3>
    <demo :code="baseFormStr">
      <el-form ref="formRef" :model="formData" type="table" :rules="rules">
        <el-form-item prop="name" label="名称：">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item prop="region" label="地区：">
          <el-select v-model="formData.region">
            <el-option label="广州" value="1"/>
            <el-option label="深圳" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="sex" label="性别：" >
          <el-radio-group v-model="formData.sex" multiple>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="hobby" label="爱好：" >
          <el-checkbox-group v-model="formData.hobby">
            <el-checkbox value="1">吃零食</el-checkbox>
            <el-checkbox value="2">刷抖音</el-checkbox>
            <el-checkbox value="3">睡觉</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="job" label="职业" >
          <el-input clearable v-model="formData.job" placeholder="请输入">
            <el-select v-model="formData.jobType" style="width: 90px;" slot="selection">
              <el-option :value="1" label="互联网"/> 
              <el-option :value="2" label="电商"/> 
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item prop="dateTime" label="时间：" >
            <el-date-picker type="date" v-model="formData.dateTime">
              <el-form-item prop="dateTimeWay" label="" label-width="0px" slot="selection">
                <el-select v-model="formData.dateTimeWay" style="width: 90px;" >
                  <el-option :value="1" label="更细时间"/> 
                </el-select>
              </el-form-item>
            </el-date-picker>
        </el-form-item>
        <el-form-item prop="dateTimeRange" label="时间段：" >
            <el-date-picker type="datetimerange" v-model="formData.dateTimeRange">
            </el-date-picker>
        </el-form-item>
        <el-form-item prop="status" label="状态：" >
          <el-button-group v-model="formData.status" >
            <el-button-group-item label="开启" :value="1" />
            <el-button-group-item label="关闭" :value="0" />
          </el-button-group>
        </el-form-item>
        <el-form-item prop="remark" label="备注：" >
          <el-input type="textarea" v-model="formData.remark" />
        </el-form-item>
        <el-form-item  >
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </demo>
    <h3 class="fbg-title">Form 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>rules</td>
          <td>表单验证规则</td>
          <td>object</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>model</td>
          <td>表单数据对象</td>
          <td>object</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>label-width</td>
          <td>表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。</td>
          <td>string  </td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>model</td>
          <td>表单数据对象</td>
          <td>object</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Form 方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>validate</td>
          <td>对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise</td>
          <td>Function(callback: Function(boolean, object))</td>
        </tr>
        <tr>
          <td>validateField</td>
          <td>对部分表单字段进行校验的方法</td>
          <td>Function(props: array | string, callback: Function(errorMessage: string))</td>
        </tr>
        <tr>
          <td>resetFields</td>
          <td>对整个表单进行重置，将所有字段值重置为初始值并移除校验结果</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">Validate 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>数据类型</td>
          <td>String</td>
          <td>string｜array</td>
          <td>string</td>
        </tr>
        <tr>
          <td>required</td>
          <td>必填</td>
          <td>Boolean</td>
          <td>true｜false</td>
          <td>false</td>
        </tr>
        <tr>
          <td>min</td>
          <td>允许输入的最小长度</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>max</td>
          <td>允许输入的最大长度</td>
          <td>Number</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>pattern</td>
          <td>校验的正则表达式</td>
          <td>Regexp</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>validator</td>
          <td>自定义验证方法</td>
          <td>Function(value, {rules, prop}, callback)</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>message</td>
          <td>错误信息</td>
          <td>string</td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">FormItem 属性</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>prop</td>
          <td>表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的</td>
          <td>string</td>
          <td>传入 Form 组件的 model 中的字段</td>
          <td>--</td>
        </tr>
        <tr>
          <td>label</td>
          <td>标签文本</td>
          <td>string</td>
          <td>--</td>
          <td>--</td>
        </tr>
        <tr>
          <td>label-width</td>
          <td>表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。</td>
          <td>string  </td>
          <td>--</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
    <h3 class="fbg-title">FormItem 方法</h3>
    <table class="fbg-table">
      <thead>
        <tr>
          <th>方法名</th>
          <th>说明</th>
          <th>参数</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>resetField</td>
          <td>对该表单项进行重置，将其值重置为初始值并移除校验结果</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import hljs from '../util/highlight';
export default {
  data() {
    const validateFun = (value, data, callback) => {
      if (value.length > 5) {
        callback(new Error('名称长度不能大于5'));
      } else {
        callback();
      }
    }
    return {
      checked: true,
      formData: {
        name: '',
        region: '',
        sex: 1,
        hobby: ['1'],
        status: '',
        remark: '',
        jobType: 1,
        job: '',
        dateTime: '',
        dateTimeWay: '',
        dateTimeRange: []
      },
      rules: {
        name: [
          {validator: validateFun, message: '请输入名称！', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择地区！', trigger: 'change'}
        ],
        sex: [
          {required: true, message: '请选择性别！', trigger: 'change'}
        ],
        hobby: [
          {type: 'array', min: 2, message: '请选择两个以上爱好！', trigger: 'change'}
        ],
        job: [
          {required: true, message: '请填写您的职称', trigger: 'blur'}
        ],
        status: [
          { required: true, message: '请选择状态！', trigger: 'change'}
        ],
        dateTimeWay: [
          { required: true, message: '请选择时间类型', trigger: 'change'}
        ],
        dateTime: [
          { required: true, message: '请选择时间', trigger: 'change'}
        ],
        dateTimeRange: [
          { type: 'array', required: true, message: '请选择时间段', trigger: 'change'}
        ],
        remark: [
          { pattern: /^[a-zA-Z\s]+$/, message: '只能输入英文！', trigger: 'blur'},
          {min: 3, max: 18, message: '字符长度限制为3-18个！', trigger: 'blur'}
        ]
      },
      baseFormStr: `
        <template>
          <div>
            <h1>Dialog 对话框</h1>
            <p class="fbg-text">在保留当前页面状态的情况下，告知用户并承载相关操作。</p>
            <h3 class="fbg-title">基础用法</h3>
            <el-form ref="formRef" :model="formData" type="table" :rules="rules">
              <el-form-item prop="name" label="名称：">
                <el-input v-model="formData.name" />
              </el-form-item>
              <el-form-item prop="region" label="地区：">
                <el-select v-model="formData.region">
                  <el-option label="广州" value="1"/>
                  <el-option label="深圳" value="2"/>
                </el-select>
              </el-form-item>
              <el-form-item prop="sex" label="性别：" inline>
                <el-radio-group v-model="formData.sex" multiple>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="hobby" label="爱好：" inline>
                <el-checkbox-group v-model="formData.hobby">
                  <el-checkbox value="1">吃零食</el-checkbox>
                  <el-checkbox value="2">刷抖音</el-checkbox>
                  <el-checkbox value="3">睡觉</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item prop="job" label="职业" >
                <el-input clearable v-model="formData.job" placeholder="请输入">
                  <el-select v-model="formData.jobType" style="width: 90px;" slot="selection">
                    <el-option :value="1" label="互联网"/> 
                    <el-option :value="2" label="电商"/> 
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item prop="dateTime" label="时间：" >
                  <el-date-picker type="date" v-model="formData.dateTime">
                    <el-form-item prop="dateTimeWay" label="" label-width="0px" slot="selection">
                      <el-select v-model="formData.dateTimeWay" style="width: 90px;" >
                        <el-option :value="1" label="更细时间"/> 
                      </el-select>
                    </el-form-item>
                  </el-date-picker>
              </el-form-item>
              <el-form-item prop="dateTimeRange" label="时间段：" >
                  <el-date-picker type="datetimerange" v-model="formData.dateTimeRange">
                  </el-date-picker>
              </el-form-item>
              <el-form-item prop="status" label="状态：" inline>
                <el-button-group v-model="formData.status" >
                  <el-button-group-item label="开启" :value="1" />
                  <el-button-group-item label="关闭" :value="0" />
                </el-button-group>
              </el-form-item>
              <el-form-item prop="remark" label="备注：" inline>
                <el-input type="textarea" v-model="formData.remark" />
              </el-form-item>
              <el-button @click="handleSubmit">提交</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form>

          </div>
        </template>
        <script>
        export default {
          data() {
            const validateFun = (value, data, callback) => {
              if (value === '') {
                callback(new Error());
              } else {
                callback();
              }
            }
            return {
              checked: true,

              formData: {
                name: '',
                region: '',
                sex: 1,
                hobby: ['1'],
                status: '',
                remark: '',
                job: '',
                jobType: 1,
                dateTime: '',
                dateTimeRange: [],
                dateTimeWay: ''
              },
              rules: {
                name: [
                  {validator: validateFun, message: '请输入名称！', trigger: 'blur'}
                ],
                region: [
                  {required: true, message: '请选择地区！', trigger: 'change'}
                ],
                sex: [
                  {required: true, message: '请选择性别！', trigger: 'change'}
                ],
                hobby: [
                  {type: 'array', min: 2, message: '请选择两个以上爱好！', trigger: 'change'}
                ],
                job: [
                  {required: true, message: '请填写您的职称', trigger: 'blur'}
                ],
                status: [
                  { required: true, message: '请选择状态！', trigger: 'change'}
                ],
                dateTimeWay: [
                  { required: true, message: '请选择时间类型', trigger: 'change'}
                ],
                dateTime: [
                  { required: true, message: '请选择时间', trigger: 'change'}
                ],
                dateTimeRange: [
                  { type: 'array', required: true, message: '请选择时间段', trigger: 'change'}
                ],
                remark: [
                  { pattern: /^[a-zA-Z\s]+$/, message: '只能输入英文！', trigger: 'blur'},
                  {min: 3, max: 18, message: '字符长度限制为3-18个！', trigger: 'blur'}
                ]
              }
            }
          },
          mounted() {
          },
          methods: {
            handleReset() {
              this.$refs.formRef.resetFields();
            },
            handleSubmit() {
              this.$refs.formRef.validate(vali => {
                if (vali) {
                  console.log(this.formData)
                }
              })
            }
          }
        }
        <\/script>
      `
    }
  },
  mounted() {
    hljs.highlightCode();
  },
  methods: {
    handleReset() {
      this.$refs.formRef.resetFields();
    },
    handleSubmit() {
      this.$refs.formRef.validate(vali => {
        if (vali) {
          console.log(this.formData)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>