<template>
    <div class="content">
      <e-row :gutter="24">
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>基础</span>
            </div>
            <div>
              <e-form :model="form" label-width="80px">
                <e-form-item label="活动名称">
                  <el-input v-model="form.name" />
                </e-form-item>
                <e-form-item label="活动区域">
                  <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </e-form-item>
                <e-form-item label="活动时间">
                  <el-col :span="11">
                    <el-date-picker
                      v-model="form.date1"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%;"
                    />
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-time-picker
                      v-model="form.date2"
                      placeholder="选择时间"
                      style="width: 100%;"
                    />
                  </el-col>
                </e-form-item>
                <e-form-item label="即时配送">
                  <el-switch v-model="form.delivery" />
                </e-form-item>
                <e-form-item label="活动性质">
                  <el-checkbox-group v-model="form.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type" />
                    <el-checkbox label="地推活动" name="type" />
                    <el-checkbox label="线下主题活动" name="type" />
                    <el-checkbox label="单纯品牌曝光" name="type" />
                  </el-checkbox-group>
                </e-form-item>
                <e-form-item label="特殊资源">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助" />
                    <el-radio label="线下场地免费" />
                  </el-radio-group>
                </e-form-item>
                <e-form-item label="活动形式">
                  <el-input v-model="form.desc" type="textarea" />
                </e-form-item>
                <e-form-item>
                  <e-button type="primary" @click="onSubmit">立即创建</e-button>
                  <e-button>取消</e-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>行内表单</span>
            </div>
            <div>
              <e-form :inline="true" :model="formInline" class="demo-form-inline">
                <e-form-item label="审批人">
                  <el-input v-model="formInline.user" placeholder="审批人" />
                </e-form-item>
                <e-form-item label="活动区域">
                  <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </e-form-item>
                <e-form-item>
                  <e-button type="primary" @click="onSubmit">查询</e-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>表单验证</span>
            </div>
            <div>
              <e-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                method-type="validate"
                label-width="100px"
                class="demo-ruleForm"
              >
                <e-form-item label="活动名称" prop="name">
                  <el-input v-model="ruleForm.name" />
                </e-form-item>
                <e-form-item label="活动区域" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </e-form-item>
                <e-form-item label="活动时间" required>
                  <el-col :span="11">
                    <e-form-item prop="date1">
                      <el-date-picker
                        v-model="ruleForm.date1"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%;"
                      />
                    </e-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <e-form-item prop="date2">
                      <el-time-picker
                        v-model="ruleForm.date2"
                        placeholder="选择时间"
                        style="width: 100%;"
                      />
                    </e-form-item>
                  </el-col>
                </e-form-item>
                <e-form-item label="即时配送" prop="delivery">
                  <el-switch v-model="ruleForm.delivery" />
                </e-form-item>
                <e-form-item label="活动性质" prop="type">
                  <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type" />
                    <el-checkbox label="地推活动" name="type" />
                    <el-checkbox label="线下主题活动" name="type" />
                    <el-checkbox label="单纯品牌曝光" name="type" />
                  </el-checkbox-group>
                </e-form-item>
                <e-form-item label="特殊资源" prop="resource">
                  <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="线上品牌商赞助" />
                    <el-radio label="线下场地免费" />
                  </el-radio-group>
                </e-form-item>
                <e-form-item label="活动形式" prop="desc">
                  <el-input v-model="ruleForm.desc" type="textarea" />
                </e-form-item>
                <e-form-item>
                  <e-button type="primary" @click="submitForm('ruleForm')">立即创建</e-button>
                  <e-button @click="resetForm('ruleForm')">重置</e-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>对齐方式</span>
            </div>
            <div>
              <el-radio-group v-model="labelPosition" size="small">
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="right">右对齐</el-radio-button>
                <el-radio-button label="top">顶部对齐</el-radio-button>
              </el-radio-group>
              <div style="margin: 20px;" />
              <e-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <e-form-item label="名称">
                  <el-input v-model="formLabelAlign.name" />
                </e-form-item>
                <e-form-item label="活动区域">
                  <el-input v-model="formLabelAlign.region" />
                </e-form-item>
                <e-form-item label="活动形式">
                  <el-input v-model="formLabelAlign.type" />
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>自定义校验规则</span>
            </div>
            <div>
              <e-form
                ref="ruleForm"
                :model="ruleForm1"
                status-icon
                :rules="rules1"
                label-width="100px"
                class="demo-ruleForm"
              >
                <e-form-item label="密码" prop="pass">
                  <el-input v-model="ruleForm1.pass" type="password" autocomplete="off" />
                </e-form-item>
                <e-form-item label="确认密码" prop="checkPass">
                  <el-input v-model="ruleForm1.checkPass" type="password" autocomplete="off" />
                </e-form-item>
                <e-form-item label="年龄" prop="age">
                  <el-input v-model.number="ruleForm1.age" />
                </e-form-item>
                <e-form-item>
                  <e-button type="primary" @click="submitForm('ruleForm')">提交</e-button>
                  <e-button @click="resetForm('ruleForm')">重置</e-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>动态增减表单项</span>
            </div>
            <div>
              <e-form
                ref="dynamicValidateForm"
                :model="dynamicValidateForm"
                label-width="100px"
                class="demo-dynamic"
              >
                <e-form-item
                  prop="email"
                  label="邮箱"
                  :rules="[
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                  ]"
                >
                  <el-input v-model="dynamicValidateForm.email" />
                </e-form-item>
                <e-form-item
                  v-for="(domain, index) in dynamicValidateForm.domains"
                  :key="domain.key"
                  :label="'域名' + index"
                  :prop="'domains.' + index + '.value'"
                  :rules="{
                    required: true, message: '域名不能为空', trigger: 'blur'
                  }"
                >
                  <el-input v-model="domain.value" /><e-button
                    @click.prevent="removeDomain(domain)"
                  >删除</e-button>
                </e-form-item>
                <e-form-item>
                  <e-button type="primary" @click="submitForm('dynamicValidateForm')">提交</e-button>
                  <e-button @click="addDomain">新增域名</e-button>
                  <e-button @click="resetForm('dynamicValidateForm')">重置</e-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="24" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>数字类型验证</span>
            </div>
            <div>
              <e-form
                ref="numberValidateForm"
                :model="numberValidateForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <e-form-item
                  label="年龄"
                  prop="age"
                  :rules="[
                    { required: true, message: '年龄不能为空' },
                    { type: 'number', message: '年龄必须为数字值' }
                  ]"
                >
                  <el-input v-model.number="numberValidateForm.age" autocomplete="off" />
                </e-form-item>
                <e-form-item>
                  <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
                  <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
        <e-col :span="10" class="box-card">
          <e-card shadow="always">
            <div slot="header" class="clearfix">
              <span>表单内组件尺寸控制</span>
            </div>
            <div>
              <e-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                <e-form-item label="活动名称">
                  <el-input v-model="sizeForm.name" />
                </e-form-item>
                <e-form-item label="活动区域">
                  <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai" />
                    <el-option label="区域二" value="beijing" />
                  </el-select>
                </e-form-item>
                <e-form-item label="活动时间">
                  <el-col :span="11">
                    <el-date-picker
                      v-model="sizeForm.date1"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%;"
                    />
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-time-picker
                      v-model="sizeForm.date2"
                      placeholder="选择时间"
                      style="width: 100%;"
                    />
                  </el-col>
                </e-form-item>
                <e-form-item label="活动性质">
                  <el-checkbox-group v-model="sizeForm.type">
                    <el-checkbox-button label="美食/餐厅线上活动" name="type" />
                    <el-checkbox-button label="地推活动" name="type" />
                    <el-checkbox-button label="线下主题活动" name="type" />
                  </el-checkbox-group>
                </e-form-item>
                <e-form-item label="特殊资源">
                  <el-radio-group v-model="sizeForm.resource" size="medium">
                    <el-radio border label="线上品牌商赞助" />
                    <el-radio border label="线下场地免费" />
                  </el-radio-group>
                </e-form-item>
                <e-form-item size="large">
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button>取消</el-button>
                </e-form-item>
              </e-form>
            </div>
          </e-card>
        </e-col>
      </e-row>
    </div>
  </template>
  <script>
  
  export default {
    components: {},
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm1: {
          pass: '',
          checkPass: '',
          age: ''
        },
        numberValidateForm: {
          age: ''
        },
        sizeForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules1: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        },
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formInline: {
          user: '',
          region: ''
        },
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        },
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
      }
    },
    mounted() {
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
      submitForm(formRef) {
        this.$refs[formRef].validate(valid => {
          if (valid) alert('submit')
          else alert('submit error!')
        })
        // this.$refs[formRef].validateField('name');
      },
      resetForm(formRef) {
        this.$refs[formRef].resetFields()
        // this.$refs[formRef].clearValidate();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
      addDomain() {
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now()
        })
      }
    }
  }
  </script>
  
  <style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  
  .box {
      /* width: 400px; */
  }
  
  .top {
      text-align: center;
  }
  
  .left {
      float: left;
      width: 60px;
  }
  
  .right {
      float: right;
      width: 60px;
  }
  
  .bottom {
      clear: both;
      text-align: center;
  }
  
  .item {
      margin: 4px;
  }
  
  .left .e-tooltip__popper,
  .right .e-tooltip__popper {
      padding: 8px 10px;
  }
  
  .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
  }
  
  .e-table .warning-row {
      background: oldlace;
  }
  
  .e-table .success-row {
      background: #f0f9eb;
  }
  </style>
