<template>
  <span class="payPassword">
    <input
      ref="input"
      :aria-disabled="disable"
      v-model="val"
      type="number"
      :name="name"
      class="sixDigitPassword"
      @keydown="keydown"
      @contextmenu="() => false"
      @paste="() => false"
      @copy="() => false"
      @cut="() => false"
      @blur="blur"
      autocomplete="off"
      :maxlength="length"
      :minlength="length">
    <div
      @focus="focus"
      class="sixDigitPassword"
      :tabindex="tabindex">
      <i
        :key="i"
        v-for="(index, i) in length">
        <b v-show="index <= val.length" />
      </i>
      <span
        v-show="status === MODE.FOCUS"
        :style="inputStyle" />
    </div>
  </span>
</template>

<script>
export default {
  name: 'PayPasswrod',
  props: {
    onlyNumber: {
      type: Boolean,
      default: true
    },
    value: {
      type: String,
      default: ''
    },
    length: {
      type: Number,
      default: 6
    },
    tabindex: {
      type: Number,
      default: 0
    },
    disable: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'payPassword'
    }
  },
  data () {
    return {
      status: '',
      val: '',
      step: 0,
      MODE: {
        FOCUS: 1,
        BLUR: 2,
        COMPLETE: 3
      }
    }
  },
  computed: {
    inputStyle () {
      return {
        width: `29px`,
        left: `${this.val.length * this.step}px`
      }
    }
  },
  watch: {
    val (val) {
      if (val.length > this.length) {
        this.val = val.slice(0, 6)
      }
      this.$emit('input', val)

      if (this.status === this.MODE.BLUR) {
        return
      }

      if (val.length === this.length) {
        this.status = this.MODE.COMPLETE
      } else {
        this.status = this.MODE.FOCUS
      }
    },
    value (value) {
      this.updateVal(value)
    }
  },
  mounted () {
    this.status = this.MODE.BLUR
    this.updateVal(this.value)
    this.step = (this.$el.offsetWidth - 2) / this.length
  },
  methods: {
    keydown (e) {
      if (!this.onlyNumber) {
        return
      }

      const key = e.charCode || e.keyCode || 0

      if (!(
        key == 8 ||
        key == 9 ||
        key == 46 ||
        key == 110 ||
        key == 190 ||
        (key >= 35 && key <= 40) ||
        (key >= 48 && key <= 57) ||
        (key >= 96 && key <= 105)
      )) {
        e.preventDefault()
      }
    },
    updateVal (value) {
      if (this.val === value || value.length > this.length) {
        return
      }

      this.val = value
    },
    clear () {
      this.val = ''
      this.$emit('clear')
    },
    blur () {
      this.status = this.MODE.BLUR

      this.$emit('blur')
    },
    focus (e) {
      if (this.disable) {
        if (e) {
          e.preventDefault()
          e.stopPropagation()
        }
        return false
      }

      this.$refs.input.focus()

      if (this.val.length === this.length) {
        this.status = this.MODE.COMPLETE
      } else {
        this.status = this.MODE.FOCUS
      }

      this.$emit('focus')
    }
  }
}
</script>

<style lang="less" scoped>
.payPassword {
  zoom: 1;
  height: 24px
}

.payPassword,
.payPassword * {
  vertical-align: bottom
}

.payPassword input.sixDigitPassword {
  position: absolute;
  color: #fff;
  opacity: 0;
  width: 1px;
  height: 1px;
  font-size: 1px;
  left: 0;
  box-sizing: content-box;
  -webkit-user-select: initial;
  outline: none;
  margin-left: -9999px
}

.payPassword div.sixDigitPassword {
  cursor: text;
  background: #fff;
  outline: none;
  position: relative;
  /* height: 14px; */
  /* border-radius: 2px; */
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payPassword div.sixDigitPassword i {
  display: block;
  text-align: center;
  display: flex;
  align-items: center;
  height: 42px;
  background-color: #F7F7F7;
  border-radius: 5px;
  border: 1px solid #DFDFDF;
  flex: 1;
  & + i {
    margin-left: 6px;
  }
}


.payPassword div.sixDigitPassword b {
  display: block;
  margin: 0 auto;
  width: 7px;
  height: 7px;
  overflow: hidden;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFMEJERTVFQ0JGMTFFNEJFNDlDMzlCQkVGRTJDMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFMEJERTZFQ0JGMTFFNEJFNDlDMzlCQkVGRTJDMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkUwQkRFM0VDQkYxMUU0QkU0OUMzOUJCRUZFMkMyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkUwQkRFNEVDQkYxMUU0QkU0OUMzOUJCRUZFMkMyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrgCY0EAAABYSURBVHjaYmBlZWUA4jAgvgLEP6E0iM/ACCRCGBgYVjNggnCQ5BUgQxuL5FWQ5E8ggw2L5C8mIHGbATu4zQwEr4GMUCySeQxQ14YD8TUg/gWlQXwGgAADAFrYEDnM6rQXAAAAAElFTkSuQmCC)
}

.payPassword div.sixDigitPassword span {
  position: absolute;
  display: none;
  left: 0;
  top: -1px;
  height: 30px;
  border-radius: 2px;
  background: url(data:image/gif;base64,R0lGODlhAwAaAJECAB4eHgAAAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk5QUExQUQyMEM1MTFFNUIwOUU5QUFCMkJCRDUyMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk5QUExQUUyMEM1MTFFNUIwOUU5QUFCMkJCRDUyMDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5OTlBQTFBQjIwQzUxMUU1QjA5RTlBQUIyQkJENTIwOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5OTlBQTFBQzIwQzUxMUU1QjA5RTlBQUIyQkJENTIwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAkrAAIALAAAAAADABoAAAIPlC9gsS38HJyyxkuxU8gUACH5BAUrAAIALAAAAAADABoAAAIHlI+py+0PCwA7) no-repeat 50%;
  background-size: auto 15px
}
</style>
