new Vue({
  el: '#window',
  data:{
    codes: new Array(6).fill('')
  },
  methods:{
    onFocus (index) {
      const el = this.$refs.codes[index]
      if (el.value) {
        el.placeholder = el.value
        el.prevValue = el.value
        this.$set(this.codes, index, '')
      }
    },
    onBlur (index) {
      const el = this.$refs.codes[index]
      if (el.prevValue  && el.value === '') {
        this.$set(this.codes, index, el.prevValue)
        el.placeholder = ''
        el.prevValue = null
      }
    },
    onDelete (index) {
      const el = this.$refs.codes[index]
      // 删除内容处理
      el.prevValue = ''
      el.placeholder = ''
      el.value = ''
      if (index > 0) {
        this.$refs.codes[index - 1].focus()
      }
    },
    // 跳转到当前 Index 的下一格
    onJump (index) {
      const codesLen = this.codes.length
      let nextIndex = null
      
      if ( event.key === 'ArrowLeft' || event.key === 'Left') {
        nextIndex = index > 0 ? index - 1 : codesLen - 1
      } else if ( event.key === 'ArrowRight' || event.key === 'Right' ){
        nextIndex = index < codesLen - 1 ? index + 1 : 0
      }
      this.$refs.codes[nextIndex].focus()
    },
    onKeyUp (index) {
      const el = this.$refs.codes[index]
      let val = el.value

      // 快速输入问题解决, 将接收到输入事件，但此时 value 没有值。
      const char = event.key
      if (char.length === 1) val = char
      
      // filter
      val = val.replace(/[^0-9]/ig, "");
      
      if (!val) {
        el.focus()
      } else if (index < this.codes.length - 1){
        this.$refs.codes[index + 1].focus()
      } else {
        // 在输入到最后一个内容时,建议让其失去焦点，以免过多的输入导致最后一位内容被覆盖
        el.blur()
      }
      
      // 更新 Vue 内容
      if (val !== this.codes[index]) this.$set(this.codes, index, val)
    },
    onPaste (index) {
      const el = this.$refs.codes[index]
   
      const paste = (event.clipboardData || window.clipboardData).getData('text')
      // 过滤出符合条件的数字
      // const match = paste.match(/(?<!\d)\d{6}(?!\d)/i) //  不被兼容
      const match = ` ${paste}`.match(/[^\d](?<code>\d{6})(?!\d)/i)
      const codes = match ? match.groups.code.toString() : ''
      if(codes.length === this.codes.length && +codes == codes){
        el.blur()
        this.codes = [...codes]
      }
    }
  }
})