<template>
    <div class="ht-base-form-validator-other-demo">
        <ht-base-form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="100">
            <ht-base-form-item prop="selectField" label="选择">
                <ht-base-select v-model="formInline.selectField">
                    <ht-base-option value="v1">选项一</ht-base-option>
                    <ht-base-option value="v2">选项二</ht-base-option>
                    <ht-base-option value="v3">选项三</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item prop="inputNumberField" label="输入编号">
                <ht-base-input-number :min="0" v-model="formInline.inputNumberField"></ht-base-input-number>
            </ht-base-form-item>
            <ht-base-form-item prop="switchField" label="开关">
                <ht-base-switch v-model="formInline.switchField"/>
            </ht-base-form-item>
            <ht-base-form-item prop="radioButtonField" label="按钮">
                <ht-base-radio-group v-model="formInline.radioButtonField" type="button">
                    <ht-base-radio label="北京"></ht-base-radio>
                    <ht-base-radio label="深圳"></ht-base-radio>
                    <ht-base-radio label="杭州"></ht-base-radio>
                </ht-base-radio-group>
            </ht-base-form-item>
            <ht-base-form-item prop="checkboxField" label="多选">
                <ht-base-checkbox-group v-model="formInline.checkboxField">
                    <ht-base-checkbox label="香蕉"></ht-base-checkbox>
                    <ht-base-checkbox label="苹果" disabled></ht-base-checkbox>
                    <ht-base-checkbox label="西瓜"></ht-base-checkbox>
                    <ht-base-checkbox label="橘子"></ht-base-checkbox>
                </ht-base-checkbox-group>
            </ht-base-form-item>
            <ht-base-form-item prop="rateField" label="评分">
                <ht-base-rate v-model="formInline.rateField" />
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formInline')">确定</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseFormValidatorOtherDemo',
      data () {
          const validateTipError = (rule, value, callback) => {
              if (value === null) {
                  callback({message:'不能为空，请填入正数',type:'error'});
              } else if (value >= 0) {
                  // callback();
                  setTimeout(()=>{
                      callback();
                  },1000)
              }else if(value < 0){
                  callback({message:'不能为负数，请填入正数',type:'error'});
              }
          };
          return {
              formInline: {
                  selectField:'',
                  inputNumberField:0,
                  switchField:'',
                  radioButtonField:'',
                  checkboxField:[],
                  rateField:0
              },
              ruleInline: {
                  selectField: [
                      { required: true, message: '不能为空', trigger: 'change' }
                  ],
                  inputNumberField: [
                      { required: true,type: 'number',validator: validateTipError, trigger: 'change'},
                  ],
                  switchField: [
                      {type: 'boolean', required: true, message: '不能为空', trigger: 'change' }
                  ],
                  radioButtonField: [
                      { required: true, message: '不能为空', trigger: 'blur' }
                  ],
                  checkboxField: [
                      { required: true,type:'array', message: '不能为空', trigger: 'blur' }
                  ],
                  rateField: [
                      {type: 'number',min:1, required: true, message: '不能为空', trigger: 'blur' }
                  ],
              }
          }
      },
      methods: {
          handleSubmit(name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      this.$HtBaseMessage.success('校验成功!');
                  } else {
                      this.$HtBaseMessage.error('校验失败!');
                  }
              })
          }
      }
  }
</script>
<style>
    .ht-base-form-validator-other-demo {
        width:500px;
        margin:0 auto;
    }
</style>

