<!-- input展示页面 -->
<template>
  <div>
      <h4 >单行文本输入框</h4>
      <el-form  label-width="80px" >
        <el-form-item label="标准" >
          <sh-input 
          size="larger"
          placeholder="请输入内容"
          disabled
          v-model="val1"
          ></sh-input>
        </el-form-item>
        <el-form-item label="输入上限">
          <sh-input 
          placeholder="请输入内容"
          maxlength="10"
          show-word-limit
          v-model="val2"
          ></sh-input>
        </el-form-item>
        <el-form-item label="密码类型">
          <sh-input 
          placeholder="请输入内容"
          show-password
          v-model="val3"
          ></sh-input>
        </el-form-item>
        <el-form-item label="清除输入">
          <sh-input 
          placeholder="请输入内容"
          clearable
          v-model="val4"
          ></sh-input>
        </el-form-item>
        <el-form-item label="气泡提示">
          <sh-input 
          showPopUp
          placeholder="请输入内容"
          v-model="val12"
          ></sh-input>
        </el-form-item>
      </el-form>

      <h4>验证码输入框</h4>
      <sh-input 
      show-code
      v-model="val9"
      @input="input"
      :callBack="callBack"
      ></sh-input>
      <sh-code-input v-model="val91" @input="input" ></sh-code-input>
      
      <h4>其他输入框</h4>
      <el-form  label-width="140px">
          <el-form-item label="icon输入框">
            <sh-input 
            placeholder="请输入内容"
            suffix-icon="el-icon-date"
            v-model="val7"
            ></sh-input>
            <sh-input 
            placeholder="请输入内容"
            v-model="val7"
            >
              <i slot="suffix" class="el-input__icon el-icon-date"></i>
            </sh-input>
            <sh-input 
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="val71"
            ></sh-input>
            <sh-input 
            placeholder="请输入内容"
            v-model="val7"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </sh-input>
          </el-form-item>

          <el-form-item label="前后缀输入">
            <sh-input 
            placeholder="请输入内容"
            v-model="val8"
            @input="input"
            >
              <template slot="prepend">
                  http://
              </template>
              <template slot="append">
                  <el-select v-model="val81" >
                    <el-option
                      v-for="item in val82"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </template>
            </sh-input>
          </el-form-item>   
          <el-form-item label="范围输入">
            <sh-input 
            show-range
            v-model="val101"
            start-placeholder="请输入内容"
            end-placeholder="请输入内容"
            @input="input"
            ></sh-input>
            <sh-range-input v-model="val10"  @input="input"/>
          </el-form-item>       
      </el-form>
      


      <h4>多行文本输入框</h4>
      <sh-input 
      type="textarea"
      placeholder="请输入内容"
      v-model="val6"
      show-word-limit
      autosize
      resize="none"
      ></sh-input>



      <h4>状态文本框结合表单</h4>

      <sh-form :formModel="form.formModel" :formColumns="form.formColumns" :formConfig="form.formConfig"></sh-form>

      <h4>状态文本框不结合表单</h4>
      <sh-status-input 
        placeholder="请输入内容"
        v-model="val11"
        :status="status"
        :msg="msg"
        label="错误状态"></sh-status-input>
      <sh-input 
        placeholder="请输入内容"
        v-model="val11"
        :status="status2"
        :msg="msg2"
        label="正确状态"
        
      ></sh-input>
      <sh-input 
        placeholder="请输入内容"
        v-model="val11"
        :status="status3"
        :msg="msg3"
        label="验证状态"
        
      ></sh-input>


        
  </div>
</template>

<script>
export default {
  data () {
    return {
        form:{
          formModel:{
            "status-regular":"",
            "status-success":"",
            "status-info":"",
            "status-error":"",
          },
          formConfig:{
            labelWidth:"90px"
          },
          formColumns:[
            {
              component:"baseInput",
              label:"正常状态",
              prop:"status-regular",
              
            },
            {
              component:"baseInput",
              label:"错误状态",
              prop:"status-success",
              callBack(){console.log(this)},
              "validate-event":true,
              rules:[
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, 
                { validator: (rule, value, callback) => {
                    if (!/^[0-9A-Za-z-\u4e00-\u9fa5\_]{0,30}$/.test(value)) {
                        callback(new Error('名称允许输入中文、字母、数字、下划线、中横线,且不超过30个字符'));
                    } else {
                        callback();
                    }
                }, trigger: 'blur' }
              ]
            }
          ]
        },
        //单行文本输入框
        val1:"",
        val2:"",
        val3:"",
        val4:"",
        val5:"",
        val12:"sdfsdfsdfsd",

        //验证码输入框
        val9:"",
        val91:"",
        //其他类型本输入框
        val7:"",
        val71:"",
        val8:"",
        val81:".com",
        val82:[{label:".com",value:"1"},{label:".cn",value:"2"},{label:".cnet",value:"3"}],
        val10:[0,0],
        val101:[],
        //多行文本输入框
        val6:"",

        val11:"",

        status:"error",
        msg:"错误",
        status2:"success",
        msg2:"正确",
        status3:"check",
        msg3:"验证"
    };
  },

  components: {},

  computed: {},


  methods: {
    input(v){
      console.log(v)
    },
    callBack(){
      console.log(this)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>