<template>
  <div class="ta-sensitive-input">
    <ta-input v-model="showValue" :placeholder="placeholder" :disabled="inputDisabled" @change="handleInputChange">
      <ta-icon slot="addonAfter" :type="isLock?'lock':'unlock'" class="lock-icon" :class="{'not-auth-lock-icon': !authUser, 'unLock-icon': !isLock && authUser}" @click="handleLock" />
    </ta-input>
    <p v-if="!isLock && authUser" style="color: red">
      敏感数据变更需锁定
    </p>
    <confirm-auth v-if="authUser" :visible.sync="confirmAuthVisible" :input-value="inputValue" v-bind="$attrs" @authPass="handleAuthPass" />
  </div>
</template>

<script type="text/jsx">
import confirmAuth from './confirmAuth'
import encryption from '../../utils/js/encryption'

const sensitiveChar = '*'
const defaultFormat = {prefix: 0, suffix: 0}
export default {
  name: 'TaSensitiveInput',
  components: {confirmAuth},
  props: {
    authUser: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: null,
    },
    value: {
      type: String,
    },
  },
  data () {
    return {
      showValue: '',
      inputValue: null,
      inputDisabled: false,
      componentValue: {},
      isLock: true,
      confirmAuthVisible: false,
      format: null,
      formatReg: {reg: '', replace: ''},
    }
  },
  watch: {
    value: {
      handler (val) {
        if (this.authUser) {
          try {
            this.componentValue = JSON.parse(val)
          } catch (e) {
            this.componentValue = {}
          }
        } else {
          this.componentValue = val
        }
      },
      immediate: true,
    },
    componentValue: {
      handler (val) {
        if (this.authUser) {
          this.format = val.format || defaultFormat
          this.handleInitComponent(val.sensitiveField)
        } else {
          this.handleInitComponent(val, false)
        }
      },
      immediate: true,
    },
  },
  created () {
    this.isLock = this.inputDisabled = this.authUser
  },
  methods: {
    initFormatter (val = '') {
      let formatLen = val.length - this.format.prefix - this.format.suffix
      if (formatLen < 0) formatLen = 0
      let sensitive = ''
      for (let i = 0; i < formatLen; i++) {
        sensitive += sensitiveChar
      }
      this.formatReg.replace = '$1' + sensitive + '$3'
      this.formatReg.reg = new RegExp('(\\d{' + this.format.prefix + '})(\\d{' + formatLen + '})(\\d{' + this.format.suffix + '})')
    },
    handleLock () {
      if (!this.authUser) return
      if (this.isLock) {
        this.confirmAuthVisible = true
      } else {
        this.triggerChange()
      }
    },
    handleInputChange () {
      if (!this.authUser) {
        this.triggerChange()
      }
    },
    handleInitComponent (val, bool = true) {
      this.showValue = val
      this.isLock = this.inputDisabled = bool
    },
    handleAuthPass (val) {
      this.showValue = val
      this.isLock = this.inputDisabled = false
    },
    triggerChange  () {
      if (this.authUser) {
        if (this.isLock) return
        let val = {}
        this.inputValue = this.showValue
        val.sensitiveField = this.formatDeal(this.inputValue)
        val.encryptField = this.securityDeal(this.inputValue)
        val.format = this.format
        this.$emit('change', JSON.stringify(val))
      } else {
        this.inputValue = this.showValue
        this.$emit('change', this.inputValue)
      }
    },
    securityDeal (key) {
      return encryption.encryptString(key)
    },
    formatDeal (val) {
      this.initFormatter(val)
      return val.replace(this.formatReg.reg, this.formatReg.replace)
    },
  },
}
</script>

<style scoped>

</style>
