<template>
  <div class="car-keyboard">
    <div class="status-bar" v-if="confirmText">
      <div class="close" @click="hideHandler" :style="{ color: '#333' }">
        {{ cancelText }}
      </div>
      <div class="close" :style="{ color: '#333' }">
        {{ titleText }}
      </div>
      <div class="close" @click="hideHandler" :style="{ color: '#333' }">
        {{ confirmText }}
      </div>
    </div>

    <div class="keys-container">
      <div class="row" v-for="(row, index) in keys" :key="index">
        <div
          :class="[
            'key',
            { last: j === row.length - 1 },
            { 'is-delete': deleteKeys.includes(key) },
            { 'is-delete-small': key === '=' },
          ]"
          v-for="(key, j) in row"
          :key="key"
          @click="keyTapHandler(key)"
        >
          <div class="txt" v-if="!deleteKeys.includes(key)">
            {{ key }}
          </div>

          <div class="delete" v-else></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlateNumberKeyBoard',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '#333333',
    },
    cancelText: {
      type: String,
      default: '',
    },
    titleText: {
      type: String,
      default: '',
    },
    confirmText: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'provinces',
      validator: (value) => {
        return ['provinces', 'areas'].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return {
      deleteKeys: ['-', '='], // 避免2个删除按钮key冲突
      provinces: [
        ['京', '津', '沪', '渝', '川', '新', '藏', '宁', '桂', '贵'],
        ['云', '黑', '吉', '辽', '晋', '冀', '青', '鲁', '豫', '苏'],
        ['皖', '浙', '闽', '赣', '湘', '鄂', '粤', '琼', '甘', '陕'],
        ['蒙', '港', '澳', '台', '使', '领', '警', '学', '临', '='],
      ],
      areas: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
        ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '-'],
      ],
    };
  },
  watch: {},
  computed: {
    keys() {
      return this[this.type];
    },
  },
  methods: {
    keyTapHandler(key) {
      if (this.deleteKeys.includes(key)) {
        this.$emit('on-delete');
        return;
      }

      this.$emit('on-input', key);
    },
    hideHandler() {
      this.$emit('on-hide');
    },
  },
};
</script>

<style scoped lang="less">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
.car-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #d6d7db;
  z-index: 999;
  padding-bottom: 60px;
}

.status-bar {
  height: 80px;
  background: #fff;
  color: #323330;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.close {
  font-size: 30px;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  color: #333;
}

.keys-container {
  padding: 23px 13px 30px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}

.key {
  width: 60px;
  height: 80px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 8px;
  color: #323330;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;

  .delete {
    width: 66px;
    height: 40px;
    background-image: url("images/delete-plate.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  &.is-delete {
    width: 134px;
    background-color: #adb3bc;
  }

  &.is-delete-small {
    width: 66px;
    background-color: #adb3bc;
    
    .delete {
      background-size: 80% 80%;
      background-position: center;
    }
  }

  &.last {
    margin-right: 0;
  }
}

.key:active {
  opacity: 0.7;
}
</style>
