<template>
  <div>
    <div @click="openSelectLicensePlate" class="clickable-input">
      <a-input :placeholder="placeholder" v-model="licensePlate" readonly class="clickable-input"/>
    </div>
    <a-modal v-model="licensePlateShow" title="选择车牌号" :bodyStyle="{height:'auto'}" @ok="okHandle" :zIndex="1901">
      <div class="license-plate_container">
        <!-- 输入框 -->
        <div @click="onSlotClick">
          <div class="input_container">
            <a-space>
              <div style="margin: 0;padding: 0" v-for="(item, index) in 2" :key="`${item}_${inputValue[index]}`">
                <a-input
                  v-model="inputValue[index]"
                  @click.stop="inputClick(index)"
                  style="width: 2.3rem"
                  :maxLength="1">
                </a-input>
              </div>
              <b>·</b>
              <div style="margin: 0;padding: 0" v-for="(item, index) in 6" :key="`${item}_${inputValue[index]}`">
                <a-input
                  v-model="inputValue[index+2]"
                  @click.stop="inputClick(index+2)"
                  style="width: 2.3rem"
                  :maxLength="1">
                </a-input>
              </div>
            </a-space>
          </div>
        </div>
        <!-- 键盘 -->
        <div class="keyboard_container">
          <a-row type="flex">
            <a-col v-if="activeIndex === 0" span="3" v-for="item in provinceList" :key="item">
              <a-button
                class="button"
                @click="btnClick(item)"> {{ item }}
              </a-button>
            </a-col>
            <a-col span="3" v-if="activeIndex !== 0" v-for="(item, index) of numberList" :key="item">
              <a-button
                class="button"
                @click="btnClick(item, activeIndex === 1)"
                :disabled="activeIndex === 1 && index < 10"> {{ item }}
              </a-button>
            </a-col>
            <a-col span="3" v-if="activeIndex !== 0" v-for="item of letterList" :key="item">
              <a-button
                class="button"
                @click="btnClick(item, item === 'O' && activeIndex > 1)"
                :disabled="item === 'O' && activeIndex > 1"> {{ item }}
              </a-button>
            </a-col>
            <a-col span="3" v-if="activeIndex !== 0" v-for="item of charList" :key="item">
              <a-button
                class="button"
                @click="btnClick(item, activeIndex < 5)"
                :disabled="activeIndex < 7"> {{ item }}
              </a-button>
            </a-col>
            <a-button type="dashed" v-if="activeIndex !== 0" @click="delClick" class="button last-button">
              <a-icon type="swap-left"/>
              删除
            </a-button>
          </a-row>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const LICENSE_PLATE_RULE = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳使领]$/
export default {
  name: 'XLicensePlate',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入车牌号'
    },
  },
  data () {
    return {
      provinceList: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '临'],
      numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      charList: ['警', '领', '港', '澳', '挂', '学'],
      activeIndex: -1,
      inputValue: ['', '', '', '', '', '', '', ''],
      licensePlateShow: false
    }
  },
  computed: {
    licensePlate () {
      return this.inputValue.join('')
    }
  },
  watch: {
    value () {
      this.initLicensePlate()
    }
  },
  mounted () {
    this.initLicensePlate()
    this.activeIndex = 0
  },
  methods: {
    okHandle () {
      this.licensePlateShow = false
      this.change()
    },
    openSelectLicensePlate () {
      this.licensePlateShow = true
    },
    initLicensePlate () {
      if (this.value && LICENSE_PLATE_RULE.test(this.value)) {
        this.inputValue = this.value.split('')
      }
    },
    onSlotClick (event) {
      const length = this.inputValue.filter(it => it).length
      this.activeIndex = length == 0 ? 0 : length - 1
    },
    inputClick (index, event) {
      this.activeIndex = index
    },
    btnClick (val, disabled) {
      if (disabled) {
        return false
      }
      this.$set(this.inputValue, this.activeIndex, `${val}`)
      this.activeIndex++
      this.change()
    },
    delClick () {
      if (this.inputValue[this.activeIndex]) {
        this.$set(this.inputValue, this.activeIndex, ``)
      } else {
        this.$set(this.inputValue, this.activeIndex - 1, ``)
        this.activeIndex--
      }
      this.change()
    },
    change () {
      const value = this.inputValue.join('')
      const pass = LICENSE_PLATE_RULE.test(value)
      this.$emit('change', {
        array: this.inputValue.filter(it => it !== ''),
        value: value,
        pass: pass,
      })
      this.$emit('input', value)
    }
  }
}
</script>

<style lang='less' scoped>
.license-plate_container {
  box-sizing: border-box;

  .input_container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .keyboard_container {
    width: 100%;
    height: auto;
    background-color: #e2e3e7;
    padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px) 5px;
    box-sizing: border-box;
    text-align: center;

    .button {
      margin: 2px;
      width: 2.8rem;
    }

    .last-button {
      width: auto;
      margin-left: 7px;
    }
  }
}
</style>
