<template>
    <u-popup :show="show" :round="10" @close="handleClose" :closeable="true" bgColor="#fff" zIndex="10081"
        :closeOnClickOverlay="false">
        <view class="flex flex-col h-[65vh] popup-common" v-if="payInfo" @touchmove.prevent.stop>
            <view class="head">
                <view class="title">确认支付</view>
                <view class="flex items-end justify-center w-full text-xl font-bold py-[20rpx] price-font">
                    <view class="text-base mr-[4rpx]">￥</view>
                    {{ moneyFormat(payInfo.totalAmount) }}
                </view>
            </view>
            <scroll-view scroll-y="true" class="flex-1 pt-[20rpx]">
                <view class="flex text-[28rpx] px-[36rpx] py-[20rpx] mb-[10rpx]">
                    <view class="text-[var(--text-color-light6)]">订单编号</view>
                    <view class="text-right flex-1 pl-[30rpx] truncate">{{ payInfo.orderNo }}</view>
                </view>
                <view class="mx-[var(--popup-sidebar-m)] px-[30rpx] bg-white rounded-[20rpx] bg-[var(--temp-bg)]">
                    <template v-if="pay_type_list.length">
                        <view class="pay-item py-[30rpx] flex items-center border-0 border-b border-solid border-[#eee]"
                            v-for="(item, index) in pay_type_list" :key="index" @click="type = item.key">
                            <u-image :src="img(item.icon)" width="50rpx" height="50rpx"></u-image>
                            <view class="flex-1 px-[20rpx] text-[28rpx] font-500">{{ item.name }}</view>
                            <u-icon name="checkbox-mark" color="var(--primary-color)" v-if="item.key == type"></u-icon>
                        </view>
                    </template>
                    <view class="py-[30rpx] text-center text-[24rpx] text-gray-subtitle" v-else>没有可用的支付方式"</view>
                </view>
            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" hover-class="none" :loading="loading"
                    @click="confirmPay">确认支付</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { t } from '@/locale'
import { getPayInfo, pay } from '@/app/api/pay'
import { getShopOrderDetail } from '@/app/api/order';
import { img, redirect, isWeixinBrowser, moneyFormat } from '@/utils/common'
import wechat from '@/utils/wechat'

const prop = defineProps({
    ignorePay: {
        type: Array,
        default() {
            return []
        }
    },
    reformat: {
        type: String,
        default: ''
    }
})

// #ifdef H5
if (isWeixinBrowser()) wechat.init();
// #endif

const show = ref(false)
const loading = ref(false)

const payInfo = ref<AnyObject | null>(null)
const type = ref(1)

const pay_type_list = ref<any>([
    {
        icon: 'https://v6.site.niucloud.com/static/resource/icon/pay_icon/balancepay.png',
        name: '信用支付',
        key: 1
    }
])

/**
 * 确认支付
 */
const confirmPay = () => {
    if (loading.value) return
    loading.value = true

    pay({
        orderId: payInfo.value?.id,
        payType: 0
    }).then((res: any) => {
        toPayResult()
    }).catch(() => {
        loading.value = false
    })
}

/**
 * 检测是否是支付后返回
 */
uni.$on('checkIsReturnAfterPayment', () => {
    const data = uni.getStorageSync('paymenting')
    if (uni.getStorageSync('paymenting')) {

        redirect({
            url: '/app/pages/pay/result',
            param: {
                trade_type: data.trade_type,
                trade_id: data.trade_id
            },
            mode: 'redirectTo',
            success() {
                uni.removeStorageSync('paymenting')
            }
        })
    }
})
const repeat = ref(false)
const open = (tradeId: number, payReturn: string = '', scene: string = '') => {

    if (repeat.value) return
    repeat.value = true

    // 设置支付后跳转页面
    uni.setStorageSync('payReturn', encodeURIComponent(payReturn))

    getShopOrderDetail(tradeId).then((res: any) => {
        let { data } = res
        payInfo.value = data
        show.value = true
        repeat.value = false

    }).catch(() => {
        repeat.value = false
    })
}

const emits = defineEmits(['close', 'confirm'])

const toPayResult = () => {
    emits('confirm')
    // console.log(prop.reformat)
    if (prop.reformat) {
        redirect({
            url: prop.reformat,
            mode: 'redirectTo'
        })
        return
    }

    redirect({
        url: '/app/pages/pay/result',
        param: { trade_id: payInfo.value?.id },
        mode: 'redirectTo'
    })
}


const handleClose = () => {
    uni.removeStorageSync('paymenting')
    show.value = false
    emits('close')
}

defineExpose({
    open,
    payInfo
})
</script>

<style lang="scss" scoped>
.pay-item:last-child {
    border: none;
}
</style>
