<template>
  <view>
    <view class="recharge_header">
      <view class="title"> 充值金额 </view>
      <view class="input" @click="show = true">
        <view class="label"> ¥ </view>
        <view class="placeholder" v-if="!inputVal"> 请输入充值金额 </view>
        <view class="input_value" v-else> {{ inputVal }} </view>
      </view>
    </view>

    <view class="recharge_way">
      <view class="title"> 充值方式 </view>
      <view class="value">
        <image src="/static/svg/wx_pay.svg" mode="heightFix" /> <text>微信支付</text>
      </view>
    </view>

    <view class="footer_pay_btn">
      <hs-button size="md" label="立即支付" type="primary" @click="headleSubmit" />
    </view>

    <up-keyboard
      :show="show"
      @close="show = false"
      @change="handleInputChange"
      @backspace="handleBackspaceChange"
      @cancel="show = false"
      @confirm="show = false"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const inputVal = ref('')
const show = ref(true)

const handleInputChange = (e: string) => {
  if (inputVal.value?.length < 12) {
    if (e === '.') {
      if (!inputVal.value?.includes('.')) {
        inputVal.value += e
      }
    } else {
      let inputNum = inputVal?.value?.split('.')[1]
      console.log(inputNum, 'inputNum')
      if (!inputNum || inputNum?.length < 2) {
        inputVal.value += e
      }
    }
  }
  console.log(e)
}

const headleSubmit = () => {
  uni.showModal({
    title: '提示',
    content: '该功能在当前项目暂未开放，敬请期待',
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

const handleBackspaceChange = () => {
  inputVal.value = inputVal.value?.slice(0, -1)
  console.log(inputVal.value)
}
</script>

<style lang="scss">
@import './style.scss';
</style>
