<!--
 * @Description: 车牌号特殊键盘
-->
<template>
  <van-popup v-model:show="showVehicleKeyboard" teleport="body" position="bottom" :overlay='false' class="vehicle-keyboard"
    :style="{ width: '100%', height: '30%' }" :overlay-style="{ 'z-index': 2001 }" closeable>
    <!-- style="background-color: #d0d5da;padding: 2vw 0;z-index: 2002;" -->
    <!-- 省简称 -->
    <div class="province keyboard" v-if="showProvince">
      <div v-for="(row, index) in province" :key="index" class="flex">
        <div v-for="item in row" :key="item" class="key" :class="{ chuan: item === '川' }" @click="setValue(item)">
          {{ item }}
        </div>
      </div>
    </div>
    <!-- 数字，字母 -->
    <div class="keyboard" v-if="!showProvince">
      <div v-for="(row, index) in keyboard" :key="index" class="flex">
        <template v-if="!(index === 0 && !showNumber)">
          <div v-for="item in row" :key="item" class="key" @click="setValue(item)">
            <span v-if="item !== 'delete'">{{ item }}</span>
            <van-icon v-else name="clear" size="20" class="delete-btn" />
          </div>
        </template>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "VehicleKeyboard",
  emits: ["setValue"],
  setup(prop, ctx) {
    const showVehicleKeyboard = ref(false); // 是否显示弹框

    /**
     * @description: 显示弹框
     * @param {*} showDialog 必填  是否显示弹框  默认是
     * @param {*} provinceBoolean 非必填  显示省简称键盘  默认是
     * @param {*} numberBoolean 非必填  是否显示数字键盘  默认否
     * @return {*}
     */
    const changeDialogShow = (
      showDialog = true,
      provinceBoolean = true,
      numberBoolean = false
    ) => {
      showProvince.value = provinceBoolean;
      showNumber.value = numberBoolean;
      showVehicleKeyboard.value = showDialog;
    };

    const province = reactive([
      ["京", "津", "冀", "鲁", "晋", "蒙", "辽", "吉", "黑", "沪"],
      ["苏", "浙", "皖", "闽", "赣", "豫", "鄂", "湘", "粤", "桂"],
      ["渝", "藏", "贵", "云", "川", "陕", "甘", "青"],
      ["琼", "新", "港", "澳", "台", "宁"],
    ]);
    const keyboard = reactive([
      [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", "delete"],
    ]);

    const showProvince = ref(false); // 是否显示省缩写
    const showNumber = ref(false); // 是否显示数字

    /**
     * @description: 将值传给父级
     * @param {*} val 点击的值
     * @return {*}
     */
    const setValue = (val) => {
      ctx.emit("setValue", val);
    };

    return {
      showVehicleKeyboard,
      province,
      keyboard,
      showProvince,
      showNumber,
      // methods
      changeDialogShow,
      setValue,
    };
  },
};
</script>

<style lang="scss" scoped>
.vehicle-keyboard {
  .keyboard {
    padding-top: 7vw;

    .flex {
      @import "../assets/styles/mixin.scss";
      @include font_size($font_medium_s);
      display: flex;
      padding: 3vw;
      justify-content: center;
      align-items: center;

      .key {
        width: 10%;
        text-align: center;

        // height: 2vh;
        // line-height: 2vh;
        // width: 5vw;
        // text-align: center;
        // margin: 4px;
        // background-color: #fff;
        // font-size: 16px;
        // border-radius: 2px;
        &.chuan {
          color: #fff;
          background-color: #e87600;
        }

        .delete-btn {
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
