<!--
 * @Descripttion: 限制输入框组件
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-12-06 13:44:22
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-15 10:00:20
 -->
<!--
   <limit-input
    :input-width="500"
    :limit-class="'limit-color'"
    :disflag='!childItem.fieldEdited'
    :input-value.sync="ruleForm.addressDetail"
    :holder="'请输入详细地址'"
    :get-by-type="'word'"
    :max-length="40">
  </limit-input>
  import limitInput from '@/components/limit-input.vue';
 -->
<template>
  <div :class="['input-line-cell', limitClass]" :style="{ width: inputWidth + 'px' }">
    <el-input :style="{ width: inputWidth + 'px' }" v-model="itemValue" :disabled="disflag" :placeholder="holder" :maxlength="inputLength" @blur="inputBlur()" @keyup.native="value => toInput(value)"> </el-input>
    <span class="input-cell-tip"><span class="len_span">{{ inputNum }}</span>/{{ limitLength }}</span>
  </div>
</template>
<script>
import strLength from '@/common/js/strlen';
export default {
  name: 'LimitInput',
  props: {
    // 传入 input value
    inputValue: {
      type: [ String, Number ],
      default() {
        return '';
      }
    },
    // 限制长度
    maxLength: {
      type: Number,
      default: 10
    },
    // input 长度
    inputWidth: {
      type: Number,
      default: 500
    },
    // 字或字符判断类型
    getByType: {
      type: String,
      default: 'word' // word: 字, char: 字符, normal: 一个字一个字符都算一个
    },

    holder: {
      type: String,
      default: '请输入'
    },

    disflag: {
      type: Boolean,
      default: false
    },

    limitClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      inputNum: 0,
      limitLength: 10,
      itemValue: '',
      inputLength: this.getByType == 'normal' ? this.maxLength : 500
    };
  },

  /* 接收数据 */
  mounted() {
    let that = this;
    that.limitLength = that.maxLength;
    that.itemValue = that.inputValue || '';
    if (that.getByType == 'normal') {
      that.inputNum = that.inputValue.length;
      return false;
    }
    if (that.getByType == 'word') {
      that.inputNum = strLength.getZhLen(that.inputValue);
    } else {
      that.inputNum = strLength.getByteLen(that.inputValue);
    }
  },
  methods: {
    /**
     * @description: 输入
     * @param {String} value
     * @returns {Boolean}
     * @author: 无尘
     */
    toInput: function(value) {
      const that = this;
      if (that.getByType == 'normal') {
        that.itemValue = String(value.target.value).trim();
        that.inputNum = that.itemValue.length;
        that.$emit('update:inputValue', that.itemValue);
        return false;
      }
      let temp = '';
      if (that.getByType == 'word') {
        temp = strLength.getByteVal(value.target.value, that.limitLength);
        that.itemValue = temp.trim();
        that.inputNum = strLength.getZhLen(that.itemValue);
      } else {
        temp = strLength.getCharVal(value.target.value, that.limitLength);
        that.itemValue = temp.trim();
        that.inputNum = strLength.getByteLen(that.itemValue);
      }
      that.$emit('update:inputValue', that.itemValue);
    },
    /**
     * @description: blur
     * @author: 无尘
     */
    inputBlur() {
      const that = this;
      that.$emit('update:inputValue', that.itemValue);
    }
  },
  watch: {
    maxLength: function(newData, oldData) {
      const that = this;
      that.limitLength = newData;
    },
    inputValue: function(newData, oldData) {
      let that = this;
      that.itemValue = newData || '';
      if (that.getByType == 'normal') {
        that.inputNum = String(that.itemValue).trim().length;
        return false;
      }
      if (that.getByType == 'word') {
        that.inputNum = strLength.getZhLen(that.itemValue);
      } else {
        that.inputNum = strLength.getByteLen(that.itemValue);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.input-line-cell {
  position: relative;
  display: inline-block;

  &.limit-color {
    .input-cell-tip  {
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .input-cell-tip {
    position: absolute;
    top: 2px;
    right: 10px;
    display: inline-block;
    line-height: 32px;
    text-align: right;
    font-size: 12px;
    color: #c0c4cc;
  }
}

.w-340 {
  width: 340px;
  /deep/ .el-input__inner {
    font-size: 14px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
.el-input {
  /deep/ .el-input__inner {
    font-size: 14px;
    color: #606266;
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.is-disabled {
    opacity: 0.5;
  }

  .is-disabled {
    /deep/ .el-input__inner {
      font-size: 14px;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}


</style>
