<template>
  <div class="demo-form-panel">
    <div class="demo-form-block">
      <div class="form-block-title bx-hairline--bottom">
        切换方式
      </div>
      <div class="demo-btn-group">
        <bxs-button
          :type="isContentVerticalAlignment ? 'primary' : 'assist'"
          @click="changeAlignType(true)"
          >
          内容对齐
        </bxs-button>
        <bxs-button
          :type="isContentVerticalAlignment ? 'assist' : 'primary'"
          @click="changeAlignType(false)"
          >
          普通对齐
        </bxs-button>
      </div>
      <div class="demo-btn-group">
        <bxs-button
          :type="ignoreValidate ? 'primary' : 'assist'"
          @click="changeIgnoreType()"
          >
          忽略字段
        </bxs-button>
      </div>
    </div>
    <div class="demo-form-block">
      <div class="form-block-title bx-hairline--bottom">
        基础信息
      </div>
      <bxs-form
        ref="form_main"
        :model="form"
        :rules="rules"
        auto-position-error
        :ignore-last-line="false"
        :auto-show-toast="false"
        :is-content-vertical-alignment="isContentVerticalAlignment"
        >
        <!-- 可忽略字段 -->
        <bxs-form-item
          prop="ignoreField"
          label="可忽略字段"
          :ignore-validate="ignoreValidate"
          >
          <bxs-input
            type="text"
            v-model="form.ignoreField"
            placeholder="配置ignore-validate即可"
            right-icon="arrow-right"
            />
        </bxs-form-item>
        <!-- 姓名 -->
        <bxs-form-item
          prop="name"
          label="姓名"
          >
          <bxs-input
            type="text"
            v-model="form.name"
            placeholder="请填写姓名"
            />
        </bxs-form-item>
        <!-- 年龄 -->
        <bxs-form-item
          prop="age"
          label="年龄"
          >
          <bxs-input
            type="text"
            v-model="form.age"
            placeholder="请填写年龄"
            />
        </bxs-form-item>
        <!-- 出生日期 -->
        <bxs-form-item
          prop="brithday"
          label="出生日期"
          required="请选择出生日期"
          >
          <bxs-input
            type="text"
            v-model="form.brithday"
            placeholder="请选择出生日期"
            readonly
            @click="chooseBrithday"
            />
        </bxs-form-item>
        <!-- 性别 -->
        <bxs-form-item
          prop="sex"
          label="性别"
          content-position="right"
          >
          <bxs-radio-group v-model="form.sex">
            <bxs-radio :name="1">
              男
            </bxs-radio>
            <bxs-radio :name="0">
              女
            </bxs-radio>
          </bxs-radio-group>
        </bxs-form-item>
        <!-- 手机号码 -->
        <bxs-form-item
          prop="mobile"
          label="手机号码"
          >
          <bxs-input
            type="text"
            v-model="form.mobile"
            placeholder="请填写手机号码"
            />
        </bxs-form-item>
        <!-- 身份证 -->
        <bxs-form-item
          prop="idCard"
          label="身份证"
          >
          <bxs-input
            type="text"
            v-model="form.idCard"
            placeholder="请填写身份证号码"
            />
        </bxs-form-item>
        <!-- 银行卡号 -->
        <bxs-form-item
          prop="bankNo"
          label="银行卡号"
          >
          <bxs-input
            type="text"
            v-model="form.bankNo"
            placeholder="请填写银行卡号"
            />
        </bxs-form-item>
        <!-- 邮箱 -->
        <bxs-form-item
          prop="email"
          label="邮箱"
          >
          <bxs-mail-input
            type="text"
            v-model="form.email"
            placeholder="请填写邮箱"
            />
        </bxs-form-item>
        <!-- 自我介绍 -->
        <bxs-form-item
          prop="intro"
          label="自我介绍"
          required="请填写简介"
          label-position="top"
          >
          <bxs-input
            type="textarea"
            v-model="form.intro"
            :autosize="{minHeight: 44, maxHeight: 88}"
            placeholder="请填写自我介绍"
            />
        </bxs-form-item>
      </bxs-form>
    </div>
    <div class="demo-form-block">
      <div class="form-block-title bx-hairline--bottom">
        额外信息
      </div>
      <bxs-form
        ref="form_other"
        :model="form"
        :rules="rules"
        auto-position-error
        :auto-show-toast="false"
        :is-content-vertical-alignment="isContentVerticalAlignment"
        >
        <!-- 开关 -->
        <bxs-form-item
          prop="switch"
          label="通知"
          content-position="right"
          >
          <bxs-switch v-model="form.switch" />
        </bxs-form-item>
        <!-- 步进器 -->
        <bxs-form-item
          prop="step"
          label="步进器"
          required="请选择数量"
          content-position="right"
          >
          <bxs-stepper v-model="form.step" />
        </bxs-form-item>
        <!-- 原生input -->
        <bxs-form-item
          prop="pureInput"
          label="原生input"
          required="请填写内容"
          >
          <input
            type="text"
            v-model="form.pureInput"
            placeholder="请填写内容"
            @focus="$refs.form_other.resetFields('pureInput')"
            @blur="$refs.form_other.validate('pureInput')"
            >
        </bxs-form-item>
        <!-- 原生input -->
        <bxs-form-item
          prop="pureTextarea"
          label="原生textarea"
          required="请填写内容"
          label-position="top"
          >
          <textarea
            type="text"
            v-model="form.pureTextarea"
            placeholder="请填写内容"
            @focus="$refs.form_other.resetFields('pureTextarea')"
            @blur="$refs.form_other.validate('pureTextarea')"
            />
        </bxs-form-item>
        <!-- 上传图片 -->
        <bxs-form-item
          prop="image"
          label="身份证正面"
          required="请上传图片"
          label-position="top"
          >
          <bxs-uploader
            :oss-type="1"
            list-style="single"
            bg-img="file"
            v-model="images"
            file-dir="project-name"
            @upload-success="uploadSuccess"
            @delete="uploadDelete"
            />
        </bxs-form-item>
        <!-- 勾选协议 -->
        <bxs-form-item prop="protocol">
          <bxs-protocol
            :protocol-list="protocolList"
            v-model="form.protocol"
            style="padding: 15px 0;background-color: #FFF"
            />
        </bxs-form-item>
      </bxs-form>
    </div>
    <div style="padding: 0 15px 15px 15px">
      <bxs-button
        class="demo-form-button"
        size="middle"
        @click="submit"
        >
        提交
      </bxs-button>
      <bxs-button
        class="demo-form-button"
        size="middle"
        @click="reset"
        >
        重置
      </bxs-button>
    </div>
  </div>
</template>
<script>
import PromiseSequential from 'promise-sequential'

const getDefaultForm = () => ({
  ignoreField: '',
  name: '',
  age: '',
  brithday: '',
  sex: 0,
  mobile: '',
  email: '',
  idCard: '',
  bankNo: '',
  intro: '',
  desc: '',
  protocol: true,
  switch: false,
  pureInput: '',
  pureTextarea: '',
  step: 0,
  image: '',
})
export default {
  data() {
    return {
      form: getDefaultForm(),
      images: [
        {
          bgImg: 'file',
        },
      ],
      rules: {
        ignoreField: {
          required: true,
          message: '请填写内容',
        },
        name: {
          required: true,
          message:
            '请填写姓名，这条错误信息很长很长，应该被换行展示的，这条错误信息很长很长，应该被换行展示的，这条错误信息很长很长，应该被换行展示的',
        },
        age: [
          { required: true, message: '请填写年龄' },
          { len: 2, message: '请填写长度等于2的数字' },
        ],
        mobile: {
          required: true,
          type: 'mobile',
          message: '请输入手机号码',
        },
        email: {
          required: true,
          type: 'email',
          message: '请选择输入的邮箱',
        },
        idCard: {
          required: true,
          type: 'idCard',
          message: '请输入身份证号码',
        },
        bankNo: {
          required: true,
          type: 'bank',
          message: '请输入银行卡号',
        },
        protocol: {
          validator(rule, value) {
            return value === true
          },
          message: '请勾选协议约定',
        },
        switch: {
          validator(rule, value) {
            return value === true
          },
          message: '请切换开关',
        },
        step: {
          validator(rule, value) {
            return value > 0
          },
          message: '请选择数量',
        },
      },
      protocolList: [
        {
          name: '《投保须知》',
          onClick: this.a,
        },
        {
          name: '《投保须知2》',
          url: 'http://www.baidu.com',
          target: '_blank',
          onClick: this.a,
        },
      ],
      isContentVerticalAlignment: true,
      ignoreValidate: false,
    }
  },
  methods: {
    chooseBrithday() {
      const self = this
      this.$datetime({
        value: new Date(),
        type: 'datetime',
        confirmButtonColor: '#508cee',
        confirm(data) {
          self.form.brithday = new Date(data).getTime()
          self.$refs.form_main.validate('brithday')
        },
        cancel() {
          self.$refs.form_main.validate('brithday')
        },
      })
    },
    uploadSuccess(options) {
      this.form.image = options.image.url
    },
    uploadDelete(options) {
      this.form.image = options.image.url
    },
    submit() {
      PromiseSequential([
        () => this.$refs.form_main.validate(),
        () => this.$refs.form_other.validate(),
      ])
        .then(() => {
          console.log('验证通过')
        })
        .catch(error => {
          console.log('验证失败 逻辑可自行处理', error)
          this.$toast(error[0].message)
        })
    },
    reset() {
      this.form = getDefaultForm()
      this.$refs.form_main.resetFields()
      this.$refs.form_other.resetFields()
    },
    changeAlignType(type) {
      this.isContentVerticalAlignment = type
    },
    changeIgnoreType() {
      this.ignoreValidate = !this.ignoreValidate
      this.reset()
    },
  },
}
</script>
<style lang="css">
.demo-form-panel {
  /* padding: 0 15px 15px 15px; */
  background-color: #FFF;
}
.demo-form-placeholder {
  font-size: 16px;
}
.demo-form-button {
  display: block;
  width: 100%;
  margin: 15px auto;
}
.demo-form-block {
  & .form-block-title {
    padding: 15px 15px;
    font-size: 16px;
    font-weight: bold;
  }
}
.demo-btn-group {
  padding: 15px 15px;
  & .bx-button {
    margin-right: 15px;
  }
}
</style>
