<template>
  <div class="license-plate-panel">
    <div class="input-area">
      <div v-for="(num, index) in 8" :key="num" @click="selectHandle(index)" :class="{ active: selected === index }" class="input-text">
        {{ licensePlate[index] }}
      </div>
    </div>
    <div class="keyboard-panel">
      <div class="tool-bar">
        <div @click="cancelHandle">取消</div>
        <div @click="okHandle" class="btn-ok" :class="{ right: isRight }">
          确定
        </div>
      </div>
      <div class="text-panel">
        <div class="row" v-if="selected !== 0">
          <div class="text-key" v-for="text in carNum" :key="text" @click="numHandle(text)" :class="{'disabled': numDisable}">
            {{ text }}
          </div>
        </div>
        <div class="row" v-for="(keys, row) in carTxt" :key="row" v-if="selected === 0">
          <div v-for="(text, index) in keys" :key="text + index" @click="keyHandle(text)" class="text-key" :class="{'selected': licensePlate[selected] === text}">
            {{ text }}
          </div>
          <template v-if="row === carTxt.length - 1">
            <div style="flex: 1"></div>
            <div class="text-key del-key" @click="deleteKey()">
              删除
            </div>
          </template>
        </div>
        
        <div class="row" v-for="(keys2, row2) in carLetter" :key="row2" v-if="selected !== 0">
          <div v-for="(text, index2) in keys2" :key="text + index2" @click="keyHandle(text)" 
          :class="{'text-key': true, 
          'disabled': selected=== 1 &&  text === 'Z',
          'selected': licensePlate[selected] === text
          }">
            {{ text }}
          </div>
          <template v-if="row2 === carLetter.length - 1">
            <div style="flex: 1"></div>
            <div class="text-key del-key" @click="deleteKey()">
              删除
            </div>
          </template>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LicensePlatNum',
  props: {
    code: {
      type: 'String',
      default: ''
    }
  },
  data() {
    return {
      licensePlate: {
        0: '',
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: ''
      },
      selected: 0,
      keyRows: [],
      keyLast: [],
      carTxt: [
        ['粤', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑'],
        ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂'],
        ['琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁'],
        ['甘', '青', '宁']
      ],
      numDisable: true,
      disableList: {
        1: ['Z']
      },
      carNum: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      carLetter: [
        ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
        ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
        ['W', 'X', 'Y', 'Z']
      ]
    };
  },
  computed: {
    isRight() {
      const val = Object.values(this.licensePlate).join('');
      return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
        val
      );
    }
  },
  mounted() {
    const codes = this.code.split('');
    for (let i = 0; i < 8; i++) {
      this.licensePlate[i] = codes[i] || '';
    }
    let index = codes.length - 1;
    if (index < 0) {
      index = 0;
    }
    this.selectHandle(index);
  },
  methods: {
    getStyle(item) {
      return 'disable';
      // return {
      //   'text-key-last': this.selected === 0,
      //   'disable': !this.isEnable(item),
      //   'selected': this.licensePlate[this.selected] === item
      // };
    },
    getNumStyle(item) {
      return {
        disable: this.numDisable,
        selected: this.licensePlate[this.selected] === item
      };
    },
    isEnable(item) {
      const _dis = this.disableList[this.selected];

      if (_dis) {
        console.log(_dis.indexOf(item) !== -1, item);
        return _dis.indexOf(item) !== -1;
      }
      return false;
    },
    selectHandle(item) {
      this.selected = item;
      if (item === 0) {
        // this.keyRows = this.carTxt;
      } else {
        // this.keyRows = this.carLetter;
        this.numDisable = item === 1;
      }
    },
    keyHandle(text) {
      if (!this.isEnable(text)) {
        this.licensePlate[this.selected] = text;
        const next = this.selected + 1;
        if (next <= 7) {
          this.selectHandle(next);
        }
      }
    },
    numHandle(text) {
      if (!this.numDisable) {
        this.licensePlate[this.selected] = text;
        const next = this.selected + 1;
        if (next <= 7) {
          this.selectHandle(next);
        }
      }
    },
    deleteKey() {
      if (this.licensePlate[this.selected] !== '') {
        this.licensePlate[this.selected] = '';
      } else if (this.selected !== 0) {
        this.selectHandle(this.selected - 1);
        this.licensePlate[this.selected] = '';
      }
    },
    cancelHandle() {
      this.claer();
      this.$emit('cancel');
    },
    claer() {
      this.licensePlate = {
        0: '',
        1: '',
        2: '',
        3: '',
        4: '',
        5: '',
        6: '',
        7: ''
      };
      this.selected = 0;
    },
    okHandle() {
      if (this.isRight) {
        const val = Object.values(this.licensePlate).join('');
        this.claer();
        this.$emit('ok', val);
      }
    }
  }
};
</script>

<style lang="stylus">
.license-plate-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: #fff;

  .input-area {
    display: flex;
    padding-top: 20vh;
    box-sizing: border-box;
    justify-content: center;

    .input-text {
      width: 10vw;
      height: 10vw;
      line-height: 10vw;
      box-sizing: border-box;
      border-top: 1px solid #dcdee2;
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      text-align: center;

      &.active {
        border: 1px solid #2db7f5 !important;
      }

      &:first-child {
        overflow: hidden;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          right: -5px;
          width: 10px;
          height: 10px;
          background-color: #dcdee2;
          transform: rotate(45deg);
        }

        &.active::after {
          background-color: #2db7f5;
        }
      }

      &:last-child {
        margin-left: 5px;
        border: 1px dashed #dcdee2;

        &.active {
          border: 1px dashed #2db7f5 !important;
        }
      }

      &:nth-child(2) {
        margin-right: 25px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          border-radius: 50%;
          top: 50%;
          right: -15px;
          transform: translateY(-50%);
          width: 5px;
          height: 5px;
          background-color: #000;
        }
      }

      &:first-child, &:nth-child(3) {
        border-left: 1px solid #dcdee2;
      }
    }
  }

  .keyboard-panel {
    position: absolute;
    bottom: 0;
    border-top: 1px solid #eef0f4;
    background: #eeeeee;
    box-sizing: border-box;
    width: 100%;

    .tool-bar {
      display: flex;
      font-size: 0.9em;
      justify-content: space-between;
      background-color: #fff;
      padding: 10px 15px;
    }

    .text-panel {
      padding: 0 1vw 5px 1vw;
    }

    .row {
      display: flex;
      margin: 1vw 0;
    }

    .text-key {
      display: inline-block;
      text-align: center;
      font-size: 14px;
      width: 8.8vw;
      margin: 0 0.5vw;
      padding: 10px 0;
      box-shadow: 0 1px 2px #dddddd;
      border-radius: 4px;
      background-color: #ffffff;
      text-align: center;
      flex-shrink: 0;
      flex-grow: 0;
    }

    .text-key.disabled {
      background-color: #f1f1f1;
      color: #bebebe;
    }

    .text-key.selected {
      background-color: #2db7f5;
      color: #fff;
    }

    .del-key {
      width: 19vw;
    }

    .btn-ok {
      color: #c5c8ce;

      &.right {
        color: #17233d;
      }
    }
  }
}
</style>
