<template>
  <view class="s-keyboard" @touchmove.stop.prevent="noop">
    <view
      v-for="(group, i) in abc ?  areaList : lower ? engKeyBoardList : engUpKeyBoardList"
      :key="i"
      class="s-keyboard__button"
      :index="i"
      :class="[i + 1 === 4 && 's-keyboard__button--center']"
    >
      <view v-if="i === 3" class="s-keyboard__button__inner-wrapper">
        <view
          class="s-keyboard__button__inner-wrapper__info"
          hover-class="s-hover-class"
          :hover-stay-time="200"
          @tap="changeCarInputMode"
        >
          <text class="s-keyboard__button__inner-wrapper__left__lang">{{abc? 'ABC': '符'}}</text>
        </view>
      </view>

      <view v-if="i === 3 && !abc" class="s-keyboard__button__inner-wrapper">
        <view
          class="s-keyboard__button__inner-wrapper__info"
          hover-class="s-hover-class"
          :hover-stay-time="200"
          @tap="changeCarInputUp"
        >
          <text class="s-keyboard__button__inner-wrapper__left__lang">{{lower? '大': '小'}}</text>
        </view>
      </view>
      <view class="s-keyboard__button__inner-wrapper" v-for="(item, j) in group" :key="j">
        <view
          class="s-keyboard__button__inner-wrapper__inner"
          :hover-stay-time="200"
          @tap="carInputClick(i, j)"
          hover-class="s-hover-class"
        >
          <text class="s-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
        </view>
      </view>
      <view
        v-if="i === 3"
        @touchstart="backspaceClick"
        @touchend="clearTimer"
        class="s-keyboard__button__inner-wrapper"
      >
        <view
          class="s-keyboard__button__inner-wrapper__right"
          hover-class="s-hover-class"
          :hover-stay-time="200"
        >
          <s-icon size="28" name="backspace" color="#000002"></s-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import props from './props.js'
import { ABCdata, abcdata, symbolData } from './data'
/**
 * keyboard 键盘组件
 * @description 此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
 * @tutorial https://uviewui.com/components/keyboard.html
 * @property {Boolean} random 是否打乱键盘的顺序
 * @event {Function} change 点击键盘触发
 * @event {Function} backspace 点击退格键触发
 * @example <s-keyboard ref="uKeyboard" mode="car" v-model="show"></s-keyboard>
 */
export default {
  name: 's-keyboard',
  mixins: [uni.$s.mpMixin, uni.$s.mixin, props],
  data() {
    return {
      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
      abc: false,
      lower: true,
    }
  },
  computed: {
    areaList() {
      let data = symbolData
      let tmp = []
      // 打乱顺序
      if (this.random) data = uni.$s.randomArray(data)
      // 切割成二维数组
      tmp[0] = data.slice(0, 10)
      tmp[1] = data.slice(10, 20)
      tmp[2] = data.slice(20, 30)
      tmp[3] = data.slice(30, 37)
      return tmp
    },
    engKeyBoardList() {
      let data = abcdata
      let tmp = []
      if (this.random) data = uni.$s.randomArray(data)
      tmp[0] = data.slice(0, 10)
      tmp[1] = data.slice(10, 20)
      tmp[2] = data.slice(20, 30)
      tmp[3] = data.slice(30, 36)
      return tmp
    },
    engUpKeyBoardList() {
      let data = ABCdata
      let tmp = []
      if (this.random) data = uni.$s.randomArray(data)
      tmp[0] = data.slice(0, 10)
      tmp[1] = data.slice(10, 20)
      tmp[2] = data.slice(20, 30)
      tmp[3] = data.slice(30, 36)
      return tmp
    },
  },
  methods: {
    // 点击键盘按钮
    carInputClick(i, j) {
      let value = ''
      // 不同模式，获取不同数组的值
      if (this.abc) value = this.areaList[i][j]
      else if (this.lower) value = this.engKeyBoardList[i][j]
      else value = this.engUpKeyBoardList[i][j]
      // 如果允许自动切换，则将中文状态切换为英文
      // if (!this.abc ) uni.$s.sleep(200).then(() => this.abc = true)
      this.$emit('change', value)
    },
    // 修改键盘的输入模式，中文|英文
    changeCarInputMode() {
      this.abc = !this.abc
    },
    // 修改键盘的大小写
    changeCarInputUp() {
      this.lower = !this.lower
    },
    // 点击退格键
    backspaceClick() {
      this.$emit('backspace')
      clearInterval(this.timer) //再次清空定时器，防止重复注册定时器
      this.timer = null
      this.timer = setInterval(() => {
        this.$emit('backspace')
      }, 250)
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';
$s-car-keyboard-background-color: #d1d1d9 !default;
$s-car-keyboard-padding: 6px 0 6px !default;
$s-car-keyboard-button-inner-width: 64rpx !default;
$s-car-keyboard-button-inner-background-color: #ffffff !default;
$s-car-keyboard-button-height: 80rpx !default;
$s-car-keyboard-button-inner-box-shadow: 0 1px 0px #888a8e !default;
$s-car-keyboard-button-border-radius: 4px !default;
$s-car-keyboard-button-inner-margin: 8rpx 5rpx !default;
$s-car-keyboard-button-text-font-size: 16px !default;
$s-car-keyboard-button-text-color: #000002 !default;
$s-car-keyboard-center-inner-margin: 0 4rpx !default;
$s-car-keyboard-special-button-width: 134rpx !default;
$s-car-keyboard-lang-font-size: 16px !default;
$s-car-keyboard-lang-color: #000002 !default;
$s-car-keyboard-active-color: $s-primary !default;
$s-car-keyboard-line-font-size: 15px !default;
$s-car-keyboard-line-color: #000002 !default;
$s-car-keyboard-line-margin: 0 1px !default;
$s-car-keyboard-s-hover-class-background-color: #bbbcc6 !default;

.s-keyboard {
  @include flex(column);
  justify-content: space-around;
  background-color: $s-car-keyboard-background-color;
  align-items: stretch;
  padding: $s-car-keyboard-padding;

  &__button {
    @include flex;
    justify-content: center;
    flex: 1;
    /* #ifndef APP-NVUE */
    /* #endif */

    &__inner-wrapper {
      box-shadow: $s-car-keyboard-button-inner-box-shadow;
      margin: $s-car-keyboard-button-inner-margin;
      border-radius: $s-car-keyboard-button-border-radius;

      &__inner {
        @include flex;
        justify-content: center;
        align-items: center;
        width: $s-car-keyboard-button-inner-width;
        background-color: $s-car-keyboard-button-inner-background-color;
        height: $s-car-keyboard-button-height;
        border-radius: $s-car-keyboard-button-border-radius;

        &__text {
          font-size: $s-car-keyboard-button-text-font-size;
          color: $s-car-keyboard-button-text-color;
        }
      }

      &__left,
      &__right {
        border-radius: $s-car-keyboard-button-border-radius;
        width: $s-car-keyboard-special-button-width;
        height: $s-car-keyboard-button-height;
        background-color: $s-car-keyboard-s-hover-class-background-color;
        @include flex;
        justify-content: center;
        align-items: center;
        box-shadow: $s-car-keyboard-button-inner-box-shadow;
      }
      &__info {
        @include flex;
        justify-content: center;
        align-items: center;
        width: $s-car-keyboard-button-inner-width;
        background-color: $s-car-keyboard-s-hover-class-background-color;
        height: $s-car-keyboard-button-height;
        border-radius: $s-car-keyboard-button-border-radius;
      }

      &__left {
        &__line {
          font-size: $s-car-keyboard-line-font-size;
          color: $s-car-keyboard-line-color;
          margin: $s-car-keyboard-line-margin;
        }

        &__lang {
          font-size: $s-car-keyboard-lang-font-size;
          color: $s-car-keyboard-lang-color;

          &--active {
            color: $s-car-keyboard-active-color;
          }
        }
      }
    }
  }
}

.s-hover-class {
  background-color: $s-car-keyboard-s-hover-class-background-color;
}
</style>
