<!-- input -->
<template >
   <div class="sh-input">
        <!-- //是否是验证码输入框 -->
        <div v-if="showCode">
          <sh-code-input 
          :value="value" 
          v-on="$listeners" 
          v-bind="$attrs" 
          :callBack="callBack" 
          :duration="duration"/>
        </div>
        <!-- 状态提示框 -->
        <div v-else-if="status">
          <sh-status-input 
          :type="type"
          :value="value" 
          v-on="$listeners" 
          v-bind="$attrs" 
          :status="status" 
          :msg="msg"/>
        </div>
        <!-- 气泡（这里代码有重复） -->
        <div v-else-if="showPopUp">
          <el-input 
            :type="type"
            v-if="!popInput"
            :value="value"
            v-bind="$attrs"
            :style="{width:type!=='textarea'?width+'px':''}"
            v-on="$listeners"
            slot="reference"
            ref="noPopInput"
          >
            <!-- 前置元素 -->
            <template slot="prepend" v-if="$slots.prepend" >
                <slot name="prepend"></slot>
            </template>
            <!-- 后置元素 -->
            <template slot="append" v-if="$slots.append">
                <slot name="append"></slot>
            </template>
             <!-- 前图标 -->
            <template slot="suffix" v-if="$slots.suffix" >
                <slot name="suffix"></slot>
            </template>
            <!-- 后图标 -->
            <template slot="prefix" v-if="$slots.prefix" >
                <slot name="prefix"></slot>
            </template>
          </el-input>
          <el-popover
            v-else
            placement="top-start"
            trigger="focus"
            popper-class="input-pop-up"
            >
              <div class="pop-up-text">{{value}}</div>
              <el-input 
                :type="type"
                :value="value"
                v-bind="$attrs"
                v-on="$listeners"
                :style="{width:type!=='textarea'?width+'px':''}"
                slot="reference"
                ref="popInput"
              >
                <!-- 前置元素 -->
                <template slot="prepend" v-if="$slots.prepend" >
                    <slot name="prepend"></slot>
                </template>
                <!-- 后置元素 -->
                <template slot="append" v-if="$slots.append">
                    <slot name="append"></slot>
                </template>
                 <!-- 前图标 -->
                <template slot="suffix" v-if="$slots.suffix" >
                    <slot name="suffix"></slot>
                </template>
                <!-- 后图标 -->
                <template slot="prefix" v-if="$slots.prefix" >
                    <slot name="prefix"></slot>
                </template>
              </el-input>
          </el-popover>
         
              
        </div>
        <!-- //是否是范围输入 -->
        <div v-else-if="showRange">
          <sh-range-input 
          :type="type"
          :value="value" 
          v-on="$listeners" 
          :startPlaceholder="startPlaceholder" 
          :endPlaceholder="endPlaceholder"/>
        </div>



        <!-- 普通输入框 -->
        <el-input 
            :type="type"
            v-else
            :value="value"
            v-bind="$attrs"
            v-on="$listeners" 
            :style="{width:type!=='textarea'?width+'px':''}"
        >
          <!-- 前置元素 -->
          <template slot="prepend" v-if="$slots.prepend" >
              <slot name="prepend"></slot>
          </template>
          <!-- 后置元素 -->
          <template slot="append" v-if="$slots.append">
              <slot name="append"></slot> 
          </template>
          <!-- 前图标 -->
          <template slot="suffix" v-if="$slots.suffix" >
              <slot name="suffix"></slot>
          </template>
          <!-- 后图标 -->
          <template slot="prefix" v-if="$slots.prefix" >
              <slot name="prefix"></slot>
          </template>
        </el-input>
        
    </div>
</template>

<script>
import baseMixins from '../baseMixins';

export default {
  name:'sh-input',
  mixins: [baseMixins],
  props:{
    type:[String],
    value: [String, Number,Array],//input的输入值
    showCode:[Boolean],//是否是验证码输入框
    showRange:[Boolean],//是否是范围输入
    showPopUp:[Boolean],//是否是气泡,
    callBack:[Function],
    status:[String],//状态输入框
    msg:[String],//状态提示文字
    startPlaceholder:[String],//开始范围的提示文字
    endPlaceholder:[String],//结束范围的提示文字
    duration:{
      type:[String, Number],
      default:60
    },//禁用时间
    width:{
      type:[String,Number],
      default:240
    },
   
  },
  data () {
    return {
    };
  },

  components: {},

  computed: {
  //气泡相关函数
   popInput(){
     let noEmpty = this.value!==null&&this.value!==undefined&&this.value!=="";
     return noEmpty&&this.showPopUp?true:false
   }
  },
  methods: {
    
  },
  watch:{
    //气泡相关
    popInput(val){
      if(val){
        this.$nextTick(v=>{
          this.$refs.popInput.focus();
        })
      }else{
        this.$nextTick(v=>{
          this.$refs.noPopInput.focus();
        })
        
      }
    }
  }
}

</script>

<style lang="scss" scoped>


</style>