<template>

    <view v-if="isLogin">
        <view class="pay">
            <view class="img">
                <div>
                    <image class="img-item" src="https://image.jxc4.com/image/e1a731b7a1bff6e0afd0cd987f421daf.png" alt="" />
                </div>
                <div class="title">
                    <div>惊喜视界</div>
                    <!-- <div v-if="payInfor.name" class="title-storeName">({{ payInfor.name }})</div> -->
                </div>
            </view>

            <view class="input-box">充值金额:<input class="input" type="text" :disabled="true" v-model="consumeFeeValue" />￥</view>

            <view v-if="moneyArr && moneyArr.length > 0" class="refillCard" style="margin-top: 100rpx;">
                <view v-for="(item,index) in moneyArr" :key="index" class="card" @click="surePay(item)">
                    <view class="discountPrice">折扣:<text class="text">¥{{ (item.discountPrice / 100).toFixed(2) }}</text></view>
                    <view class="originalPrice">原价:<text class="text">¥{{ (item.price /100).toFixed(2) }}</text></view>
                </view>
            </view>
        </view>
    </view>
   
   <JxEmpty v-else title="您还未登录"></JxEmpty>

   <!-- <view @click="sureRefill">确认充值</view> -->

    <!-- 键盘 -->
    <!-- <view class="key-board" >
      <view class="key">
        <view class="key-num">
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(1)">1</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(2)">2</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(3)">3</view>
        </view>
        <view class="key-num">
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(4)">4</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(5)">5</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(6)">6</view>
        </view>
        <view class="key-num">
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(7)">7</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(8)">8</view>
          <view class="key-num-text" hover-class="bg_red" @click="clickNum(9)">9</view>
        </view>
        <view class="key-num">
          <view class="zero" hover-class="bg_red" @click="clickNum(0)">0</view>
          <view class="point" hover-class="bg_red" @click="clickNum('.')">.</view>
        </view>
      </view>
      <view class="key-text">
        <view class="del" @click="clickNum('del')" hover-class="bg_red">
        </view>
        <view class="sure-pay" @click="surePay">
          <view class="sure-pay-text" >充值</view>
        </view>
      </view>
    </view> -->

</template>

<script lang="ts" setup>
import toast from '@/utils/toast';
import { computed, ref } from 'vue';
import orderPage from "@/api/https/order";
import { utilsMd5 } from '@/utils/md5.js'
import { onLoad } from '@dcloudio/uni-app';
import JSEncrypt from 'jsencrypt'
// import CryptoJS from 'crypto-js';
import CryptoJS from 'crypto-js';
import { store } from '@/store';
import JxEmpty from '@/components/jx-empty/jx-empty.vue';
const consumeFeeValue =ref('')

function clickNum(str:string | number){
    // if (!isLogin) {
    //     toast('请登录')
    //     // jumpPage('navigateTo','/pagesAuth/auth-index/index?type=jxPay')
    //     // return
    //   }else{
         if(str!=='del'){
            if((consumeFeeValue.value.indexOf('.') !== -1 && str === '.') || (consumeFeeValue.value.length === 0 && str === '.')) return 
            if(consumeFeeValue.value.length === 1 && consumeFeeValue.value === '0') {
                if(str!=='.') {
                    toast('输入错误')
                    return
                }
            }
            if(consumeFeeValue.value.includes('.')){
                if(consumeFeeValue.value.split('.')[1].length>=2) return
                consumeFeeValue.value = consumeFeeValue.value + str
            }else{
                consumeFeeValue.value = consumeFeeValue.value + str
            }
        }else{
            // 退格
            if(consumeFeeValue.value.length === 0) return
            consumeFeeValue.value = consumeFeeValue.value.substring(0,consumeFeeValue.value.length-1)
        }
    // }
   
}

const moneyArr = ref<AnyObject[]>([])
/**
 * 登录状态
 */
const isLogin = computed(() => {
  return store.getters['serveInfo/isLogin']
})

onLoad(async () => {
    if(!isLogin.value) return 
      let res = await orderPage.refillMoneyConfig('income')
    //   console.log('配置充值金额',res)
      if(res.code == 0){
        moneyArr.value = res.data.config
        console.log('配置充值金额',moneyArr.value)
      }
     
})

// sureRefill(){

// }

/**
 * 确认支付
 */
async function surePay(row:AnyObject){
    console.log('确认支付,999999999',row)
    //  let user = uni.getStorageSync('userInfo')
    //     let payInfo = await orderPage.wechatPay(
    //         {
    //             "userId": '',
    //            // "desc": '',
    //             "openId": user.authId,
    //             "amount": Number(row.discountPrice)*100,

    //         }
    //     )
    // // console.log('打印支付信息',payInfo)
    // await handleCreatePay(payInfo.vendorOrderID, payInfo.prepayID, JSON.parse(payInfo.codeURL))
    // toast('支付成功')
    if(row && row.discountPrice ) consumeFeeValue.value ='' + row.discountPrice / 100
    if(consumeFeeValue.value.length === 0){
        toast('请输入充值金额')
    }else{
        if(consumeFeeValue.value.indexOf('.') !== -1) {
            if (consumeFeeValue.value.split('.')[1].replace(/(0+)$/g, "")) {
            consumeFeeValue.value = consumeFeeValue.value.split('.')[0] + '.' + consumeFeeValue.value.split('.')[1].replace(/(0+)$/g,"")
            } else {
            consumeFeeValue.value = consumeFeeValue.value.split('.')[0]
            }
        }
        let user = uni.getStorageSync('userInfo')
        let payInfo = await orderPage.wechatPay(
            {
                "userId": '',
                "desc": '充值',
                "openId": user.authId,
                "amount": Number(consumeFeeValue.value)*100,

            }
        )
        if(payInfo.code == 0){
            // ayInfo.data.weChatPay prepayID
             await handleCreatePay(payInfo.data)
        }
        // console.log('打印支付信息',payInfo)
       
        toast('支付成功')
    }
}
// 支付相关
// const businessName = '1390686702' // 商户号


async function handleCreatePay( payInfo:AnyObject){
    let timeStamp = payInfo.timeStamp  // 时间戳
    let nonceStr = payInfo.nonce    // 随机字符串
    let packageA = `prepay_id=${payInfo.prepay_id}`
    const paySign = payInfo.sign
    wx.requestPayment({
        timeStamp:timeStamp,
        nonceStr,
        package:packageA,
        signType:'RSA', //  MD5 RSA
        paySign:paySign,
        complete(res:any){
            console.log('掉起支付的数据',res)
        }
    })
}

// async function getProvider(service = 'payment') {
//   try {
//     let res = await uni.getProvider({ service:'payment' })
//     if (res.errMsg === 'getProvider:ok') return res
//     else throw res
//   } catch (e) {
//     console.error(e)
//     throw e
//   }
// }
</script>

<style lang="scss" scoped >

.pay{
    background-color: #f3f3f3;
    height: 100vh;
    overflow: hidden;
    .img{
        margin-top:16rpx;
        margin-left:20rpx;
        display:flex;
        margin-top: 80rpx;
    }
    .img-item{
        width: 150rpx;
        height:150rpx;
    }
    .title{
        // width: 150px;
        // border: 1px solid red;
        width: 100%;
        font-size: 50rpx;
        height: 150rpx;
        line-height: 75rpx;
        font-weight: bold;
        margin-left:20rpx;
        // margin-top: ;
        // text-align: center;
    }
    .title-storeName{
        font-size: 30rpx;
        color:#696969;
    }
    .jxPaybut{
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
        width: 650rpx;
        border-radius: 20rpx;
        margin: 200rpx auto;
        background-color: #4EB331;
        color:#fff;
    }
    .backApp{
        // border:1rpx solid red;

        width: 100px;
        // height: 50px;
        // display: flex;
        background-color: #bdbebe;
        margin-right:50rpx;
        color:#fff;
        box-shadow: 1px 2px 1px 1px #838282;
    }

    // 金额输入框
    .input-box{
        display:flex;
        justify-content: space-between;
        padding:30rpx;
        background-color: #fff;
        margin:80rpx 40rpx;
        border-radius: 20rpx;
    }
    .input{
        // border: 1px solid rgb(70, 64, 64);
        width: 200px;
        text-align: right;
    }
    // 键盘
    .key-board{
        position: fixed;
        bottom:0;
        width:750rpx;
        box-sizing: border-box;
        height: calc(100%/3);
        background-color: #fff;
    }
    .key-board,.key-num{
        display: flex;
        justify-content: space-between;
    }
    .key-num{
        // border:1px solid rgb(113, 225, 61);
        width: 100%;
        height: calc(100%/4);
        box-sizing: border-box;
        &-text{
            border: 1rpx solid rgb(178, 178, 178);
            width: 100%;
            text-align: center;
            padding-top: 12px;
        }
    }
    .bg_red{
        background-color: #f0f1f0 !important;
    }
    .key{
        width:calc(100%/4*3);
    }
    .key-text{
        border:1rpx solid rgb(178, 178, 178);
        width: calc(100%/4*1);
        height: 100%;
        box-sizing: border-box;
    }
    .zero{
        width: calc(100%/3*2);
        box-sizing: border-box;
        border: 1rpx solid rgb(178, 178, 178);
        padding-top: 12px;
        padding-left:calc(100%/3*0.45);
    }
    .point{
        border: 1rpx solid rgb(178, 178, 178);
        width: calc(100%/3*1);
        box-sizing: border-box;
        text-align: center;
        padding-top: 12px;
    }
    .del{
        height: 25%;
        border-bottom: 1rpx solid rgb(178, 178, 178);
        text-align: center;
        padding-top: 12px;
        box-sizing: border-box;
        // background: url('@/assets/images/backspace.png') center no-repeat;
        background: url('../../static/backspace.png') center no-repeat;
    }
    .sure-pay{
        border-top: 1rpx solid rgb(178, 178, 178);
        width: 100px;
        height: 75%;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        &-text{
            width:40px;
            margin: 50% auto;
            color:#fff;
            font-size: 40rpx;
        }

        background-color: #4EB331;
    }
}

.refillCard{
    display: flex;
    justify-content: space-around;

    .card{
        border: 1rpx solid rgb(168, 172, 168);
        width: 200rpx;
        // box-shadow: 0 0 2rpx #7c7c7c;
        // box-sizing: 10px 10px 5px #ff0000;
        text-align: center;
        height: 100rpx;
        line-height: 50rpx;
        border-radius: 20rpx;
        background-color: #eee;


        .discountPrice{
            .text{
                color: #ff1d15;
            }
        }

        .originalPrice{
           

            .text{
                text-decoration: line-through;
            }
        }
    }
}
</style>