<template>
    <view class="h-full payment-result">
        <view class="m-[24rpx] rounded-[14rpx] bg-white px-[24rpx] py-[20rpx]">
            <!-- Header -->
            <view class="text-center py-[60rpx]">
                <image class="w-[100rpx] h-[100rpx]" :src="resultStatus[payResult.success].image" />
                <view class="text-[#101010] font-medium text-2xl">
                    {{ resultStatus[payResult.success].text }}
                </view>
            </view>
            <!-- Main -->
            <view class="text-main text-base leading-[70rpx]">
                <view class="flex justify-between">
                    <text>订单编号</text>
                    <text>{{ payResult.message.sn }}</text>
                </view>
                <view class="flex justify-between">
                    <text>付款时间</text>
                    <text>{{ payResult.message.pay_time || '-' }}</text>
                </view>
                <view class="flex justify-between">
                    <text>支付方式</text>
                    <text>{{ payResult.message.pay_way || '-' }}</text>
                </view>
                <view class="flex justify-between">
                    <text>支付金额</text>
                    <text>{{ payResult.message.money }}</text>
                </view>
            </view>
        </view>

        <!-- Footer -->
        <view class="mx-[24rpx] pt-[40rpx]">
            <template v-if="payForm.from === PayFromType.ORDER">
                <button class="text-white btn bg-primary" @click="goToOrderList">查看订单</button>
            </template>

            <!-- <template v-if="payForm.from === PayFromType.USERRECHARGE">
                <button class="text-white btn bg-primary" @click="goToRecharge">继续充值</button>
            </template> -->

            <navigator url="/pages/index/index" hover-class="none" open-type="reLaunch">
                <button class="btn bg-white text-main mt-[30rpx]">返回首页</button>
            </navigator>
        </view>

        <!-- Component -->
        <page-status ref="pageRef"></page-status>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { apiQueryOrder } from '@/api/app'
import { PayFromType } from '@/enums/appEnums'
import { reactive, shallowRef, unref, nextTick, computed } from 'vue'
import IconWait from '@/static/images/icon/icon_wait.png'
import IconSuccess from '@/static/images/icon/icon_pay_success.png'

const pageRef = shallowRef()
const payForm = reactive({
    from: '',
    order_id: ''
})
const payResult = reactive<any>({
    success: 1,
    message: {
        money: 0,
        pay_time: '-',
        pay_way: '-',
        sn: '-'
    }
})

const resultStatus = [
    {
        text: '等待支付',
        image: IconWait
    },
    {
        text: '支付成功',
        image: IconSuccess
    }
]

const getPayResult = async () => {
    try {
        const data = await apiQueryOrder({ id: payForm.order_id })
        // #ifdef MP
        wx.disableAlertBeforeUnload()
        // #endif
        Reflect.ownKeys(payResult).map((item: any) => {
            payResult[item] = data[item]
        })
        unref(pageRef).close()
    } catch (error) {
        console.log('请求支付结果')
        uni.$u.toast(error)
    }
}

const goToOrderList = () => {
    uni.redirectTo({
        url: '/pages/order/index'
    })
}

// const goToRecharge = () => {
//     uni.redirectTo({
//         url: '/packageA/pages/user_charge/user_charge'
//     })
// }

onLoad(async ({ param }: any) => {
    await nextTick()
    try {
        param = JSON.parse(param)
        if (!param.from && !param.order_id) {
            throw new Error('参数有误')
        }
        payForm['from'] = param['from']
        payForm['order_id'] = param['order_id']
        getPayResult()
    } catch (error) {
        uni.$u.toast(error)
        console.log('初始化支付页面', error)
    }
})
</script>

<style lang="scss" scoped>
page {
    height: 100%;
}

.btn {
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 60px;
}
</style>
