<script setup>
import {reactive, ref, watch} from "vue";
import {Message} from "@arco-design/web-vue";
import Api from "../../api/index.ts";
import {QrcodeCanvas} from "qrcode.vue";

const emits = defineEmits(['success']);
const {money} = defineProps({
    money: {
        type: Number,
        default: null
    }
});
const successShow = ref(false);
let timer = null;
const visible = ref(false);
const qrInfo = reactive({});
const open = () => {
    successShow.value = false;
    if (!money) {
        Message.warning('充值金额需大于0元');
        return;
    }
    visible.value = true;
    initQR();
}
let orderData = null;
const checkOrder = (flag) => {
    Api.merchant.checkOrder({
        sn: qrInfo.out_trade_no,
    }).then(({code}) => {
        if (code === 1) {
            Message.success('支付成功');
            successShow.value = true;
            clearInterval(timer);
        }
    }).catch(() => {
        if (flag) {
            Message.warning('未检测到支付');
        }
    })
}

const initQR = async () => {
    clearInterval(timer);
    const {data: {data}} = await Api.merchant.rechargeOrderQR({
        money: money,
    });
    Object.assign(qrInfo, data);
    timer = setInterval(() => {
        checkOrder();
    }, 1000);
}

watch(
    () => visible.value,
    (val) => {
        console.log('变了', visible.value);
        if (!val) {
            clearInterval(timer);
            emits('success');
        }
    },
    {deep: true}
)
</script>

<template>
    <a-button v-if="!$slots.default" type="primary" @click="open">立即充值</a-button>
    <div @click="open">
        <slot></slot>
    </div>

    <a-modal
        :footer="false"
        id="Alipay-Modal"
        title-align="start"
        title="支付宝支付"
        v-model:visible="visible">
        <template v-if="!successShow">
            <a-alert>平台提示：支付后未出现成功提示，点击【我已支付】刷新充值状态</a-alert>

            <div class="py-[24px] px-[20px]">
                <div class="flex justify-center gap-[15px]">
                    支付金额: <span class="text-[rgb(var(--arcoblue-6))]">{{ money }}元</span>
                </div>
                <div class="text-center mt-[20px]">打开支付宝扫描下方二维码支付</div>
                <div class="w-[200px] aspect-square mx-auto mt-[5px]">
                    <qrcode-canvas size="200" :value="qrInfo.qr_code"></qrcode-canvas>
                </div>
                <div class="flex justify-center mt-[5px] flex-col items-center">
                    <a-link :hoverable="false" style="color: var(--color-neutral-6)" @click="initQR">
                        <icon-sync class="mr-[5px]"/>
                        点击刷新
                    </a-link>
                    <a-button class="mx-auto mt-[20px]" type="primary" @click="checkOrder(true)">我已支付</a-button>
                </div>

                <div class="mt-[20px] info mb-[40px]">
                    <div>支付遇到问题?</div>
                    <div>1、请先确认第三方支付网站是否交易完成。</div>
                    <div>2、第三方支付网站显示交易成功，但账户中没有充值流水，请私聊客服</div>
                </div>
            </div>
        </template>

        <template v-else>
            <div class="py-[24px] px-[20px]">
                <a-result status="success" title="充值成功">
                    <template #subtitle>
                        支付宝付款￥{{ money }}
                    </template>
                    <template #extra>
                        <a-space>
                            <a-button type='primary' @click="visible=false">确定</a-button>
                        </a-space>
                    </template>
                </a-result>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>
.info {
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
}
</style>

<style lang="scss">
#Alipay-Modal {
    .arco-modal-body {
        padding: 0;
    }
}
</style>
