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

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

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

<script>
export default {
  name: 'k-keyboard',
  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: 'number',
      validator: (value) => {
        return (
          ['number', 'identityCard', 'numberDisorder'].indexOf(value) !== -1
        );
      },
    },
  },
  data() {
    return {
      deleteKeys: ['-', '='], // 避免2个删除按钮key冲突
      number: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['.', '0', '='],
      ],
      identityCard: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['X', '0', '-'],
      ],
      numberDisorder: [[], [], [], []],
      step: 10,
    };
  },
  watch: {},
  computed: {
    keys() {
      return this[this.type];
    },
  },
  created() {
    this.disorderNumber();
  },
  methods: {
    disorderNumber() {
      let numberList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
      for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 3; j++) {
          if (i == 3 && j == 2) {
            this.numberDisorder[i][2] = '=';
            continue;
          }
          let index = this.getRandomNum(0, this.step);
          this.numberDisorder[i].push(numberList[index]);
          numberList.splice(index, 1);
          this.step -= 1;
        }
      }
    },
    getRandomNum(min, max) {
      const range = max - min + 1;
      const rand = Math.random();
      return min + Math.floor(rand * range);
    },
    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="scss">
/* 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: #d1d5db;
  z-index: 999;
  padding-bottom: 60rpx;
}

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

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

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

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16rpx;
}

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

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

  &.is-delete {
    width: 220rpx;
    background-color: #adb3bc;
  }

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

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