<template>
  <div class="el-bio-psd">
    <el-input
      class="bio-psd"
      ref="psd"
      :value="pR"
      autocomplete="off"
      clearable
      :size="size"
      :placeholder="placeholder"
      onselect="return false;"
      oncopy="return false;"
      oncut="return false;"
      @input="onInput"
      @blur="onBlur"
      @change="onChange"
      @clear="onClear">
      <template slot="prefix">
        <slot name="prefix"/>
      </template>

      <template slot="append">
        <bio-icon
          v-if="showPassword"
          name="eye"
          :class="{'color-blue': showPsdFlag}"
          @click="showPsd"/>
      </template>
    </el-input>
  </div>
</template>

<script>
import cryptoJs from 'crypto-js';
import Locale from 'bio-ui-vue2/src/mixins/locale';

export default {
  name: 'BioPsd',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },

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

    size: {
      type: String
    },

    placeholder: {
      type: String
    },

    showPassword: {
      type: Boolean,
      default: false
    }
  },
  mixins: [Locale],

  data() {
    return {
      psd: '',
      pR: '', // 用来做显示的值 将用户输入的信息替换为 '*'
      title: '',
      showPsdFlag: false
    };
  },

  methods: {
    /**
     * 本组件实现的功能：将输入的值替换为 * 以达到保密的目的
     * 因为无法获取鼠标选取时的起始位置，所以不支持有值时的粘贴操作，不能中间插值也不能中间删除
     * 只能在末尾添加字符以及删除字符
     *
     */
    onInput(value) {
      const req = /[\u4e00-\u9fa5]/ig;
      let e = value.replace(req, ''); // 禁止输入中文

      if (this.showPsdFlag || e === '') {
        this.pR = e;
        this.psd = e;
        if (req.test(value)) {
          this.$message({
            message: this.t('bio.public.noChinese'),
            type: 'warning'
          });
        }
      } else {
        const _n = e.length - this.pR.length;
        const position = this.$refs.psd.$refs.input.selectionStart;

        if (_n >= 0) {
          if (position === e.length) {
            if (_n === 1) { // 末尾加值，一次只能加一个
              this.pR += '*'.repeat(_n);
              this.psd += e[e.length - 1];
            } else {
              if (!this.pR.length) { // 密码框为空时的粘贴行为
                this.pR += '*'.repeat(_n);
                this.psd = e;
              } else { // 密码框不为空不让复制
                this.$message({
                  message: this.t('bio.public.deleteBeforeCopy'),
                  type: 'warning'
                });
                // this.$warnNotify(this.$t('public.deleteBeforeCopy'));
              }
            }
          } else {
            if (req.test(value)) {
              this.$message({
                message: this.t('bio.public.noChinese'),
                type: 'warning'
              });
            } else {
              this.$message({
                message: this.t('bio.public.noMidPut'),
                type: 'warning'
              });
            }
            // this.$warnNotify(this.$t('public.noMidPut'));
          }
        } else {
          if (position === e.length) { // 末位删除，一次只能删除一个
            this.pR = this.pR.substr(0, e.length);
            this.psd = this.psd.substr(0, e.length);
          } else {
            this.$message({
              message: this.t('bio.public.noMidDelete'),
              type: 'warning'
            });
            // this.$warnNotify(this.$t('public.noMidDelete'));
          }
        }
      }

      this.$emit('input', this.encryption ? cryptoJs.MD5(this.psd.toString()).toString() : this.psd);
    },

    showPsd() {
      this.showPsdFlag = !this.showPsdFlag;
      this.pR = this.showPsdFlag ? this.psd : '*'.repeat(this.psd.length);
    },

    onBlur() {
      this.$emit('blur', this.psd);
    },

    onChange() {
      this.$emit('change', this.psd);
    },

    onClear() {
      this.$emit('clear', this.psd);
    }
  }
};
</script>
