<template>
    <div class="ht-base-form-tip-demo">
        <ht-base-form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="120">
            <ht-base-form-item label="错误：" prop="tipError" validateStatus="error">
                <ht-base-input v-model="formCustom.tipError" placeholder="错误"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="警告：" prop="tipWarning" validateStatus="warning">
                <ht-base-input v-model="formCustom.tipWarning" placeholder="警告"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="正确：" prop="tipSuccess" validateStatus="success">
                <ht-base-input v-model="formCustom.tipSuccess" placeholder="正确"></ht-base-input>
            </ht-base-form-item>
            <ht-base-form-item label="验证：" prop="tipValidating" validateStatus="validating">
                <ht-base-input v-model="formCustom.tipValidating" placeholder="验证"></ht-base-input>
                <div class="ivu-form-item-validating-tip" v-if="title">正在验证信息...</div>
            </ht-base-form-item>
            <ht-base-form-item label="下拉错误:" prop="selectError" validateStatus="error">
                <ht-base-select v-model="formCustom.selectError" style="width:200px">
                    <ht-base-option value="option1">选项一</ht-base-option>
                    <ht-base-option value="option2">选项二</ht-base-option>
                    <ht-base-option value="option3">选项三</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item label="下拉警告:" prop="selectWarning" validateStatus="warning">
                <ht-base-select v-model="formCustom.selectWarning" style="width:200px">
                    <ht-base-option value="option1">选项一</ht-base-option>
                    <ht-base-option value="option2">选项二</ht-base-option>
                    <ht-base-option value="option3">选项三</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item label="下拉正确:" prop="selectSuccess" validateStatus="success">
                <ht-base-select v-model="formCustom.selectSuccess" style="width:200px">
                    <ht-base-option value="option1">选项一</ht-base-option>
                    <ht-base-option value="option2">选项二</ht-base-option>
                    <ht-base-option value="option3">选项三</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item label="下拉验证:" prop="selectValidating" validateStatus="validating">
                <ht-base-select v-model="formCustom.selectValidating" style="width:200px">
                    <ht-base-option value="option1">选项一</ht-base-option>
                    <ht-base-option value="option2">选项二</ht-base-option>
                    <ht-base-option value="option3">选项三</ht-base-option>
                </ht-base-select>
            </ht-base-form-item>
            <ht-base-form-item label="数字错误：" prop="inputNumberError" validateStatus="error">
                <ht-base-input-number :max="10" :min="0" v-model="formCustom.inputNumberError"></ht-base-input-number>
            </ht-base-form-item>
            <ht-base-form-item label="数字警告：" prop="inputNumberWarning" validateStatus="warning">
                <ht-base-input-number :max="10" :min="0" v-model="formCustom.inputNumberWarning"></ht-base-input-number>
            </ht-base-form-item>
            <ht-base-form-item label="数字正确：" prop="inputNumberSuccess" validateStatus="success">
                <ht-base-input-number :max="10" :min="0" v-model="formCustom.inputNumberSuccess"></ht-base-input-number>
            </ht-base-form-item>
            <ht-base-form-item label="数字验证：" prop="inputNumberValidating" validateStatus="validating">
                <ht-base-input-number :max="10" :min="0" v-model="formCustom.inputNumberValidating"></ht-base-input-number>
            </ht-base-form-item>
            <ht-base-form-item label="日期错误：" prop="datePickerError" validateStatus="error">
                <ht-base-date-picker type="date" v-model="formCustom.datePickerError" placeholder="Select date" style="width: 200px"></ht-base-date-picker>
            </ht-base-form-item>
            <ht-base-form-item label="日期警告：" prop="datePickerWarning" validateStatus="warning">
                <ht-base-date-picker type="date" v-model="formCustom.datePickerWarning" placeholder="Select date" style="width: 200px"></ht-base-date-picker>
            </ht-base-form-item>
            <ht-base-form-item label="日期正确：" prop="datePickerSuccess" validateStatus="success">
                <ht-base-date-picker type="date" v-model="formCustom.datePickerSuccess" placeholder="Select date" style="width: 200px"></ht-base-date-picker>
            </ht-base-form-item>
            <ht-base-form-item label="日期验证：" prop="datePickerValidating" validateStatus="validating">
                <ht-base-date-picker type="date" v-model="formCustom.datePickerValidating" placeholder="Select date" style="width: 200px"></ht-base-date-picker>
            </ht-base-form-item>
            <ht-base-form-item>
                <ht-base-button type="primary" @click="handleSubmit('formCustom')">确定</ht-base-button>
                <ht-base-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</ht-base-button>
            </ht-base-form-item>
        </ht-base-form>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseFormTipDemo',
      data(){
          const validateTipError = (rule, value, callback) => {
              if (value === '') {
                  callback({message:'填空和其他为错误，填1为正确',type:'error'});
              } else if (value === '1') {
                  // callback();
                  setTimeout(()=>{
                      callback();
                  },1000)
              }else{
                  callback({message:'填空和其他为错误，填1为正确',type:'error'});
              }
          };
          const validateTipError2 = (rule, value, callback) => {
              if (value != '1') {
                  callback({message:'填空为错误，填1为正确，填其他为警告',type:'warning'});
              } else {
                  // callback();
                  setTimeout(()=>{
                      callback();
                  },1000)
              }
          };
          const validateTipWarning = (rule, value, callback) => {
              if (value === '') {
                  callback(new Error('不能为空'));
              } else {
                  callback();
              }
          };
          const validateTipValidating = (rule, value, callback) => {
              if (value =="") {
                  this.title=false;
              }else{
                  this.title=true;
              }
          };
          const validateSelectError = (rule, value, callback) =>{
              if (value == '') {
                  callback({message:'填空为错误，填1为正确，填其他为警告',type:'error'});
              } else {
                  callback();
              }
          };
          const validateSelectError2 = (rule, value, callback) =>{
              if (value != 'option1') {
                  callback({message:'请选择第一项',type:'error'});
              } else {
                  callback();
              }
          };
          const validateInputNumberError = (rule, value, callback) =>{
              if(value == 0){
                  callback({message:'填0为错误，填1为正确，填其他为警告',type:'error'});
              } else {
                  callback();
              }
          };
          const validateInputNumberError2 = (rule, value, callback) =>{
              if(value != 1){
                  callback({message:' ',type:'warning'});
              } else {
                  callback();
              }
          };
          const validateDatePickerError = (rule, value, callback) =>{
              if(!value){
                  callback({message:'日期不能为空',type:'error'});
              } else {
                  callback({message:'请选择正确的日期',type:'error'});
              }
          };
        return {
            title: false,
            formCustom: {
                tipError: '',
                tipWarning: '',
                tipSuccess: '',
                tipValidating:'',
                selectError:'',
                selectWarning:'',
                selectSuccess:'',
                selectValidating:'',
                inputNumberError:0,
                inputNumberWarning:0,
                inputNumberSuccess:0,
                inputNumberValidating:0,
                datePickerError:'',
                datePickerWarning:'',
                datePickerSuccess:'',
                datePickerValidating:''
            },
            ruleCustom: {
                tipError: [
                    { validator: validateTipError, trigger: 'blur'},
                    { validator: validateTipError2, trigger: 'blur'}
                ],
                tipWarning: [
                    { validator: validateTipWarning, trigger: 'blur'}
                ],
                tipValidating: [
                    { validator: validateTipValidating, trigger: 'blur'}
                ],
                selectError:[
                    { validator: validateSelectError, trigger: 'change'},
                    { validator: validateSelectError2, trigger: 'change'},
                ],
                inputNumberError:[
                    { validator: validateInputNumberError, trigger: 'change'},
                    { validator: validateInputNumberError2, trigger: 'change'},
                ],
                datePickerError:[
                    { validator: validateDatePickerError, trigger: 'change'}
                ]
            }
        }
      },
      methods:{
          handleSubmit (name) {
              this.$refs[name].validate().then((data)=>{
                  console.log(data);
              })
          },
          handleReset (name) {
              this.$refs[name].resetFields();
          }
      }
  }
</script>
<style>
    .ht-base-form-tip-demo {

    }
</style>

