<template>
  <view class="k-wrapper">
    <view class="k-store-name">
      <view class="k-store-title flex-center">收款门店：</view>
      <view class="flex-center" @tap="emits('selectedStore')"> {{ storeName || '选择门店' }} <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /></view>
    </view>
    <view class="k-main">
      <block v-for="(v, i) in keyList" :key="i">
        <view :class="[v.clsName]" hover-class="touch-number" hover-stay-time="150" v-if="v.type == 'number'" @tap="boardDown(v.value)">{{ v.value }}</view>
        <view :class="[v.clsName]" hover-class="touch-number" hover-stay-time="150" v-if="v.type == 'image'" @tap="boardDown(v.value)">
          <image :src="v.imgUrl" mode="scaleToFill" />
        </view>
        <view :class="[v.clsName]" hover-class="touch-button" hover-stay-time="150" v-if="v.type == 'button'" @tap="boardDown(v.value)">
          <image :src="v.imgUrl" mode="scaleToFill" />
          <text>{{ v.text }}</text>
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
const emits = defineEmits(['boardDown', 'selectedStore',"update:value"])
/***
 * 键盘渲染集合
 * boardDown 回调事件 回调参数 value
 * selectedStore 回调事件 选择门店 回调参数 无
 * storeName 门店名称
 * */
const props = defineProps({
  storeName: { type: String }, //门店名称
 
  point: { type: Number, default: 2 }, //限制小数点后几位 默认两位
  maxLength: { type: Number, default: 10 }, //最大输入长度 包含小数点
  value:{type:[String,Number],default:'0'}
})
const keyList = reactive([
  { type: 'number', clsName: 'k-number', value: '1' },
  { type: 'number', clsName: 'k-number', value: '2' },
  { type: 'number', clsName: 'k-number', value: '3' },
  { type: 'number', clsName: 'k-number', value: '4' },
  { type: 'number', clsName: 'k-number', value: '5' },
  { type: 'number', clsName: 'k-number', value: '6' },
  { type: 'number', clsName: 'k-number', value: '7' },
  { type: 'number', clsName: 'k-number', value: '8' },
  { type: 'number', clsName: 'k-number', value: '9' },
  { type: 'number', clsName: 'k-number', value: '.' },
  { type: 'number', clsName: 'k-number k-zero', value: '0' },
  { type: 'image', clsName: 'k-number', value: 'deleted', imgUrl: '/static/iconImg/icon-delete.svg' },
  { type: 'button', clsName: 'k-button', value: 'scan', imgUrl: '/static/iconImg/icon-scan.svg', text: '扫一扫' },
  { type: 'button', clsName: 'k-button k-button-code', value: 'code', imgUrl: '/static/iconImg/icon-code.svg', text: '聚合码' },
])

const deletedNumber = () => {
  emits('update:value', props.value.toString().slice(0, props.value.length - 1))
}
const boardDown = (val) => {
  // 如果 点击 扫一扫 或聚合码 直接回调事件
  if (val == 'scan' || val == 'code') return emits('boardDown', val)
  // 点击删除 调用函数
  if (val == 'deleted') return deletedNumber()
  // 如果值已经是0并且按下不是小数点 直接替换值
  if (props.value.toString().length == 1 && props.value == 0 && val != '.') return emits('update:value', val)
  // 只能包含一个小数点
  if (props.value.toString().includes('.') && val == '.') return
  // 限制小数点位数
  if (props.value.toString().includes('.') && props.value.split('.')[1].length >= props.point) return
  // 长度只有 一位 并且按下结果是小数点 直接 return
  if (props.value.toString().length == 1 && props.value == 0 && val != '.') return
  // 如果 清空后直接按下小数点 直接 return
  if ((props.value === '' || props.value == undefined) && val == '.') return emits('update:value', '0' + val)
  // 超出最大输入长度 直接 return
  if (props.value.toString().length >= props.maxLength) return
  // 回调结果
  emits('update:value', props.value + val)
}
</script>

<style lang="scss" scoped>
.k-wrapper {
  padding: 0 10rpx;
  border-radius: 72rpx 72rpx 0 0;
  border-top: 1rps solid rgba($color: #000000, $alpha: 0.1);
  box-shadow: 0 -30rpx 80rpx -20rpx rgba(0, 0, 0, 0.05);
  .k-store-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110rpx;
    margin: 10rpx 0;
    padding: 0 60rpx;
    view {
      flex-grow: 0;
      height: 100%;
      font-size: 30rpx;
      font-weight: 500;
      image {
        width: 40rpx;
        height: 40rpx;
        transform: rotate(180deg);
        margin-left: 10rpx;
      }
    }
    .k-store-title {
      white-space: nowrap;
      font-size: 30rpx;
      font-weight: 400;
      color: $J-color-t4d;
    }
  }
  .k-main {
    display: grid;
    grid-template-columns: repeat(3, 200rpx);
    grid-template-rows: repeat(5, 120rpx);
    grid-gap: 10rpx 20rpx;
    padding: 0 50rpx;
    font-size: 60rpx;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
    .k-number {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10rpx;
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .k-button {
      grid-column: 1 / span 2;
      grid-row: 5 / span 2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      width: 315rpx;
      height: 110rpx;
      background: $jeepay-bg-primary;
      font-size: 26rpx;
      border-radius: 10rpx;
      color: #fff;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
    .k-button-code {
      transform: translateX(335rpx);
      background: linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%);
    }
    .touch-number {
      border-radius: 80rpx;
      background-color: #e9eaeb;
    }
    .touch-button {
      opacity: 0.5;
    }
  }
}
</style>
