<template>
  <zui-popup :value="value" position="bottom" @show="onShow" @hide="onHide">
    <div class="zui-platenumber">
      <div class="zui-platenumber__head">
        <button class="button" :class="typeClass(1)" @click="changeType(1)">普通车牌</button>
        <button class="button" :class="typeClass(2)" @click="changeType(2)">新能源车牌</button>
      </div>
      <div class="zui-platenumber__body">
        <div class="input-box" :class="{ active: currentInputIndex == 0 }" @click="currentInputIndex = 0">
          <span class="text">{{ currentInputValue[0] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 1 }" @click="currentInputIndex = 1">
          <span class="text">{{ currentInputValue[1] }}</span>
        </div>
        <div class="split-dot"></div>
        <div class="input-box" :class="{ active: currentInputIndex == 2 }" @click="currentInputIndex = 2">
          <span class="text">{{ currentInputValue[2] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 3 }" @click="currentInputIndex = 3">
          <span class="text">{{ currentInputValue[3] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 4 }" @click="currentInputIndex = 4">
          <span class="text">{{ currentInputValue[4] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 5 }" @click="currentInputIndex = 5">
          <span class="text">{{ currentInputValue[5] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 6 }" @click="currentInputIndex = 6">
          <span class="text">{{ currentInputValue[6] }}</span>
        </div>
        <div class="input-box" :class="{ active: currentInputIndex == 7 }" @click="currentInputIndex = 7" v-if="type2">
          <span class="text">{{ currentInputValue[7] }}</span>
        </div>
      </div>
      <div class="zui-platenumber__footer">
        <div class="zui-platenumber__keyboard" :style="{ height: keyboardHeight }">
          <template v-if="inputType == 1">
            <div class="key-text" v-for="key of provinceText" :key="key" @click="chooseKey(key)">{{ key }}</div>
          </template>
          <template v-if="inputType >= 3">
            <div class="key-text" v-for="key of numberText" :key="key" @click="chooseKey(key)">
              {{ key }}
            </div>
          </template>
          <template v-if="inputType >= 2">
            <div class="key-text" v-for="key of wordText" :key="key" @click="chooseKey(key)">
              {{ key }}
            </div>
          </template>
          <template v-if="inputType == 4">
            <div class="key-text" v-for="key of lastWordText" :key="key" @click="chooseKey(key)">{{ key }}</div>
          </template>
        </div>
        <div class="zui-platenumber__btn-group">
          <div class="left">
            <button class="button" @click="onCancel">取消</button>
            <button class="button" @click="onReset">清空</button>
          </div>
          <div class="right">
            <button class="button" @click="deleteKey">删除</button>
            <button class="button btn-confirm" @click="exportPlate">完成</button>
          </div>
        </div>
      </div>
    </div>
  </zui-popup>
</template>

<script>
export default {
  name: 'Platenumber',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    plate: {
      type: String,
      default: '',
    },
  },
  data: function () {
    return {
      type: '1', // 车牌类型
      currentInputIndex: 0, // 当前编辑的输入框
      currentInputValue: ['', '', '', '', '', '', ''],
      keyboardHeight: 'auto',
      provinceText: [
        '京',
        '冀',
        '沪',
        '津',
        '晋',
        '蒙',
        '辽',
        '吉',
        '黑',
        '苏',
        '浙',
        '皖',
        '闽',
        '赣',
        '鲁',
        '豫',
        '鄂',
        '湘',
        '粤',
        '桂',
        '琼',
        '渝',
        '川',
        '贵',
        '云',
        '青',
        '藏',
        '陕',
        '甘',
        '宁',
        '新',
      ],
      numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      lastWordText: ['挂'],
    };
  },
  computed: {
    //输入框类型
    inputType: function () {
      var options = {
        '0': 1,
        '1': 2,
        '2': 3,
        '3': 3,
        '4': 3,
        '5': 3,
        '6': this.type == '2' ? 3 : 4,
        '7': 4,
      };
      return options[this.currentInputIndex] || 1;
    },
    type2: function () {
      return this.type == '2';
    },
  },
  watch: {
    type: function (value) {
      this.onReset(value);
    },
    value: function (val) {
      if (!val) {
        setTimeout(this.initPlate, 300);
      }
    },
    plate: function (val) {
      if (val) {
        this.initPlate();
      } else {
        this.onReset();
      }
    },
  },
  mounted: function () {
    this.initPlate();
  },
  methods: {
    onShow: function () {
      this.$emit('input', true);
    },
    onHide: function () {
      this.$emit('input', false);
    },
    onCancel: function () {
      this.onHide();
    },
    onReset: function (type) {
      var _type = type || this.type;
      this.currentInputIndex = 0;
      if (_type == '1') {
        this.currentInputValue = ['', '', '', '', '', '', ''];
      } else {
        this.currentInputValue = ['', '', '', '', '', '', '', ''];
      }
    },
    typeClass: function (type) {
      return this.type == '' + type ? 'checked' : '';
    },
    changeType: function (type) {
      this.type = '' + type;
    },
    initPlate: function () {
      var plateKey = this.plate.split('');
      if (plateKey.length == 7) {
        this.type = '1';
      } else if (plateKey.length == 8) {
        this.type = '2';
      }
      if (plateKey.length == 7 || plateKey.length == 8) {
        this.currentInputValue = plateKey;
        this.currentInputIndex = plateKey.length - 1;
      }
    },
    onChange: function (e) {
      this.$emit('input', e.show);
    },
    chooseKey: function (value) {
      this.$set(this.currentInputValue, this.currentInputIndex, value);
      if (this.type == '1' && this.currentInputIndex < 6) {
        this.currentInputIndex++;
      }
      if (this.type == '2' && this.currentInputIndex < 7) {
        this.currentInputIndex++;
      }
    },
    deleteKey: function () {
      this.$set(this.currentInputValue, this.currentInputIndex, '');
      if (this.currentInputIndex != 0) {
        this.currentInputIndex--;
      }
    },
    exportPlate: function () {
      var plate = this.currentInputValue.join('');
      var err = false;
      if (this.type == '1' && plate.length != 7) {
        err = true;
      } else if (this.type == '2' && plate.length != 8) {
        err = true;
      }
      if (plate.length <= 0) {
        err = false;
      }
      if (err) {
        this.$emit('error');
      } else {
        this.$emit('confirm', plate);
      }
    },
  },
};
</script>

<style>
@import './index.css';
</style>