<template>
  <view class="page-wrapper">
    <view class="pay-number">
      <view class="pay-icon">￥</view>
      {{ vdata.payment }}
    </view>
    <view class="keyboard-list">
      <block v-for="v in keyboardList" :key="v.value">
        <view class="keyboard-item" hover-class="hover-button" hover-stay-time="50" @tap="changeKey(v.value)">
          <image v-if="v.value == 'del'" :src="v.key" mode="scaleToFill" />
          <text v-else>{{ v.key }}</text>
        </view>
      </block>
    </view>
    <view class="pay-submit" hover-class="hover-submit" hover-stay-time="50" @tap="jumpPage">
      <image src="/static/indexImg/pay.png" mode="scaleToFill" />
      普通收款
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const keyboardList = [
  { key: '1', value: '1' },
  { key: '2', value: '2' },
  { key: '3', value: '3' },
  { key: '4', value: '4' },
  { key: '5', value: '5' },
  { key: '6', value: '6' },
  { key: '7', value: '7' },
  { key: '8', value: '8' },
  { key: '9', value: '9' },
  { key: '.', value: '.' },
  { key: '0', value: '0' },
  { key: '/static/iconImg/escB.png', value: 'del' },
]
const vdata = reactive({
  payment: '0.00',
})

const changeKey = (v) => {
  if (v == 'del') {
    vdata.payment = vdata.payment.slice(0, vdata.payment.length - 1)
    if (vdata.payment == '') vdata.payment = '0.00'
    return
  }
  if (vdata.payment == '0.00' && (v == '.' || v == '0')) return (vdata.payment = '0.')
  if (vdata.payment == '0.00') return (vdata.payment = v)
  if (vdata.payment.includes('.') && v == '.') return uni.$J.showToast('只能包含一位小数点')
  if (vdata.payment.includes('.') && vdata.payment.split('.')[1].length == 2) return uni.$J.showToast('只能包含小数点后两位')
  return (vdata.payment += v)
}
const jumpPage = () => {
  wxfaceapp.postMsg({
    targetAppid: 'wx4710a1619fbb3714',
    content: JSON.stringify({ type: 'toPay' }),
    success(res) {
      console.log('通信成功', res)
    },
    fail(res) {
      console.log('通信失败  ', res)
    },
  })
  uni.navigateTo({ url: '/pages/payWait/payWait?payment=' + vdata.payment })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 0.1rpx 30rpx;
  min-height: calc(100vh - 5rpx);
  background: url('/static/indexImg/index-bg.png') no-repeat center center;
  background-size: 100% 100%;
  .pay-number {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180rpx;
    background-color: #35d757;
    border-radius: 22rpx;
    font-size: 60rpx;
    color: #fff;
    font-weight: 600;
    .pay-icon {
      font-size: 28rpx;
      transform: translateY(30%);
    }
  }
}
.keyboard-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 60rpx;
  .keyboard-item {
    flex: 0 0 31.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15rpx;
    height: 110rpx;
    font-weight: 700;
    font-size: 36rpx;
    border-radius: 22rpx;
    background-color: #fff;
    image {
      width: 40rpx;
      height: 30rpx;
    }
  }
}
.pay-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 70rpx;
  background-color: #35d757;
  border-radius: 22rpx;
  height: 120rpx;
  color: #fff;
  font-weight: 700;
  image {
    margin-right: 10rpx;
    width: 35rpx;
    height: 35rpx;
    transform: translateY(5rpx);
  }
}
.hover-button {
  background-color: rgba($color: #ccc, $alpha: 0.3) !important;
}
.hover-submit {
  opacity: 0.5;
}
</style>
