<template>
  <div class="onestop-input">
    <!-- 头部内容 -->
    <span :class="[$slots.prefix ? 'onestop-input__prefix' : 'onestop-input__prefix_icon']" v-if="$slots.prefix || prefixIcon">
      <slot name="prefix"></slot>
      <onestop-icon :iconName="prefixIcon" v-if="prefixIcon" ></onestop-icon>
    </span>
    <el-input
      v-model="inValue"
      :maxlength="maxlength"
      :type="showPassword ? (this.passwordFlag ? 'text': 'password') : this.type"
      :minlength="minlength"
      :show-word-limit="showWordLimit"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :rows="rows"
      :autosize="autosize"
      :name="name"
      :readonly="readonly"
      :max="max"
      :min="min"
      :autofocus="autofocus"
      :tabindex="tabindex"
      :style="[onestopWidth]"
      @focus="focusHandler"
      @blur="blurHandler"
      @change="changeHandler"
      @input="inputHandler"
      @clear="clearHandler"
      resize="none"
      :class="[
        getSize,
        {
         'onestop-input--suffix':  ($slots.suffix || suffixIcon) && type !== 'textarea',
         'onestop-input-textarea--count': showWordLimit && type == 'textarea',
         'onestop-input--prefix': type !== 'textarea' && ($slots.prefix || prefixIcon)
        }
      ]"
    >
    </el-input>
    <!-- 尾部内容 -->
    <span :class="[$slots.suffix ? 'onestop-input__suffix':  'onestop-input__suffix_icon']" v-if="getSuffixVisible()">
      <slot name="suffix"></slot>
      <onestop-icon :iconName="suffixIcon" v-if="suffixIcon"></onestop-icon>
      <onestop-icon :iconName="passwordFlag? 'eye':'eye-crossed'" v-if="showPassword" @click="getFlag()" ></onestop-icon>  
    </span>
  </div>
</template>

<script>
// import OnestopIcon from 'packages/icon';
export default {
  name: "OnestopInput",
  model: {
    prop: "modelValue",
    event: "returnModel",
  },
  // components: {OnestopIcon},
  props: {
    modelValue:[String,Array,Object,Boolean ,Number],
    type: {
      type: String,
      default: 'text'
    },
    maxlength: Number,
    minlength: Number,
    showWordLimit: {
      type: Boolean,
      default: false
    },
    placeholder:String,
    clearable: {
      type: Boolean,
      default: false
    },
    showPassword: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prefixIcon: String,
    suffixIcon: String,
    rows: {
      type: Number,
      default: 2
    },
    autosize:  [Boolean, Object],
    name: String,
    readonly: {
      type: Boolean,
      default: false
    },
    max: Number,
    min:Number,
    autofocus: {
      type: Boolean,
      default: false
    },
    tabindex: String,
    width:{
      type: Number,
      default: 528
    },
    // md[height:40]\lg[height:48]\xl[height:56]
    size: {
      type: String,
      default: 'md'
    }
  },

  computed: {
    inValue: {
      get: function () {
        // 获取传入的v-model
        return this.modelValue;
      },
      set: function (newValue) {
        // 修改时同时修改v-model
        this.$emit("returnModel", newValue);
        return newValue;
      }
    },
    onestopWidth (){
      if (this.width) {
        return { 'width': this.width + 'px'}
      }
    },
    getSize (){
      if (this.type !== 'textarea') {
        if (this.size) {
          return 'onestop-input--' + this.size 
        }
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      passwordFlag: false,
      flagType: 'text'
    }
  },
  methods: {
    focusHandler(event) {
      this.$emit('focus',event)
    },
    blurHandler(event) {
      this.$emit('blur',event)
    },
    changeHandler(event) {
      this.$emit('change',event)
    },
    inputHandler(event) {
      this.$emit('input',event)
    },
    clearHandler() {
      this.$emit('clear')
    },
    getSuffixVisible () {
      return this.$slots.suffix ||
        this.suffixIcon || this.showPassword 
    },
    // 小眼睛切换状态
    getFlag(){
      this.passwordFlag = !this.passwordFlag
    }
  }
};
</script>
