<template>
  <div class="input mui-flex aic">
    <input :value="value"
           :type="cType"
           v-bind="$attrs"
           @input="onInput"
           class="mui-flex__cell"
           :class="['icon',iconCls]">
    <!-- 密码框不需要作为背景图片在框内，因为它要被点击 -->
    <div class="btn btn--pwd"
         :class="{pwd:'',isShow:!isShowPwdIcon}"
         v-if="icon==='pwd'"
         @click="tapChangeIcon"></div>
  </div>
</template>

<script>
export default {
  name: 'Input',
  model: {
    prop: 'value',
    event: 'my-change'
  },
  props: {
    type: {
      type: String,
      default: 'text'
    },
    // v-modal 需要的值
    value: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconCls() {
      // 判断过滤icon类型
      const { icon } = this;
      if (icon === 'pwd') {
        return '';
      }
      return `icon--${icon}`;
    }
  },

  data() {
    return {
      isShowPwdIcon: false,
      cType: this.type
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    /**
     * @desc 改变密码明文
     */
    tapChangeIcon() {
      console.log('this.type :', this.type);
      this.isShowPwdIcon = !this.isShowPwdIcon;
      this.cType = this.isShowPwdIcon ? 'text' : 'password';
    },
    onInput(e) {
      // 如果是密码明文模式要判断输入是否为汉字
      if (this.type === 'password') {
        e.target.value = e.target.value.replace(/[\u4e00-\u9fa5]/ig, '');
      }
      this.$emit('my-change', e.target.value);
    }

  }
};
</script>
