<template>
    <view class="user-recharge">
        <view class="wrapper">
            <view class="balance">充值金额</view>
            <view class="flex items-center balance-recharge-input">
                <text style="font-size: 46rpx">¥</text>
                <input
                    class="input"
                    placeholder="0.00"
                    type="digit"
                    v-model="rechargeData.orderAmount"
                />
            </view>
            <view class="balance-recharge-tips mt-[20rpx]">
                <view>当前可用余额为 ¥ {{ walletData.userMoney }}</view>
            </view>
        </view>

        <view class="px-[30rpx]">
            <button class="btn text-lg text-white rounded-full" @click="handleRecharge()">
                立即充值
            </button>

            <navigator
                class="record"
                hover-class="none"
                url="/bundle/pages/recharge_record/recharge_record"
            >
                充值记录
            </navigator>
        </view>
    </view>

    <!-- 充值成功组件 -->
    <u-popup v-model="rechargeSuccess" :closeable="true" mode="center" border-radius="14">
        <view class="bg-white recharge-success-card" style="width: 70vw">
            <view class="recharge-success">
                <image src="@/static/images/recharge_uccess.png" />
                <view class="recharge-success-text"> 充值成功 </view>
            </view>

            <view class="p-[40rpx]">
                <u-button
                    @click="changeRechargeComplete"
                    type="primary"
                    :ripple="true"
                    :hair-line="false"
                    shape="circle"
                >
                    完成
                </u-button>
            </view>
        </view>
    </u-popup>

    <payment
        v-if="payState.showPay || payState.showCheck"
        ref="paymentRef"
        v-model:show="payState.showPay"
        v-model:show-check="payState.showCheck"
        :order-id="payState.orderId"
        :order_amount="rechargeData?.orderAmount"
        :from="payState.from"
        :redirect="payState.redirect"
        @success="handlePayResult"
        @close="handlePayResult"
        @fail="handlePayResult"
    />
</template>

<script lang="ts" setup>
import { ref, reactive, shallowRef } from 'vue'
import { onShow, onUnload, onLoad } from '@dcloudio/uni-app'
import { apiRecharge, apiUserWallet } from '@/api/wallet'
import { PaymentStatusEnum } from '@/utils/enum'
import { getClient } from '@/utils/client'

const walletData = ref({
    userMoney: '' // 可用余额
})

const paymentRef = shallowRef()
const rechargeData = ref({
    orderAmount: '', // 充值金额
    terminal: 1,
    payChannel: ''
})
const payState = reactive({
    orderId: '',
    from: '',
    showPay: false,
    showCheck: false,
    redirect: '/pages/order_buy/index'
})

// 充值弹窗
const rechargeSuccess = ref<boolean | null>(false)

// 获取钱包数据
const getWalletData = () => {
    apiUserWallet('').then((res: any) => {
        walletData.value.userMoney = res.userMoney
    })
}

// 充值
const handleRecharge = () => {
    if (rechargeData.value.orderAmount === '') return uni.$u.toast('请输入充值金额')
    const scene = getClient()
    let payChannel = ''
    switch (scene) {
        case 1:
            payChannel = 'mp_channel'
            break
        case 2:
            payChannel = 'oa_channel'
            break
        case 3:
            payChannel = 'h5_channel'
            break
    }
    rechargeData.value.payChannel = payChannel
    apiRecharge({ ...rechargeData.value })
        .then((res: any) => {
            payState.orderId = res.orderId
            payState.from = 'recharge'
            payState.showPay = true
        })
        .catch((err) => {
            console.log('下单', err)
        })
}

const handlePayResult = async () => {
    payState.showPay = false
    payState.showCheck = false
    uni.redirectTo({
        url: `/bundle/pages/user_wallet/user_wallet`
    })
}

const changeRechargeComplete = () => {
    rechargeSuccess.value = false
}

onLoad(async (options) => {
    // 监听全局duringPayment事件
    uni.$on('duringPayment', (params) => {
        if (params.result === PaymentStatusEnum['SUCCESS']) {
            // uni.navigateBack()
            // setTimeout(() => toast('支付成功'), 0.5 * 1000)
        }
    })
    uni.$emit('send')

    if (options.rechargeSuccess == 1) {
        rechargeSuccess.value = true
    }
})

onUnload(() => {
    uni.$off(['duringPayment', 'send'])
})

onShow(() => {
    getWalletData()
})
</script>

<style lang="scss" scoped>
.user-recharge {
    .wrapper {
        margin: 20rpx 30rpx;
        padding: 40rpx;
        width: 690rpx;
        height: 330rpx;
        border-radius: 20rpx;
        background: #fff;
        .balance {
            font-weight: 500;
            font-size: 30rpx;
            line-height: 36rpx;
            color: #666;
            margin-bottom: 38rpx;
        }
        .balance-recharge-input {
            margin-top: 35rpx;
            margin-right: 66rpx;

            .input {
                height: 94rpx;
                text-align: left;
                font-size: 66rpx;
                margin-left: 30rpx;
                position: relative;
                z-index: 2;
            }

            border-bottom: 1rpx solid #ebebeb;
        }
        .balance-recharge-tips {
            font-size: 24rpx;
            color: #999;
        }
    }
    .btn {
        background: $u-type-primary;
    }
    .record {
        margin-top: 24rpx;
        font-size: 28rpx;
        text-align: center;
        color: #666;
    }
}
</style>
