<template>
    <section class="bg-[#F7F8FA] h-screen">
        <van-navBar :title="t('payOrderDetail.title')" :border="false" color="#F7F8FA">
            <template #left>
                <SvgIcon name="allow-left" class="w-7 h-7" @click="router.back" />
            </template>
        </van-navBar>
        <div class="mx-4 bg-white rounded-xl mt-4">
            <div class="flex items-center justify-between px-4 py-2  text-[15px]" v-for="(item, index) in columns">
                <span class="text-[#8E8E93]">{{ item.name }}</span>
                <span class="text-1E1E1E" :class="[index === columns.length - 1 ? 'text-[#FF9500]' : '']">{{ item.value }}</span>
            </div>
        </div>
        <div class="mt-5  bg-white mx-4 rounded-xl">
            <div class="flex flex-col items-center justify-center">
                <QRCodeVue3 :width="200" :height="200" :value="order.accountCode" :key="order.id"
                        :qrOptions="{ typeNumber: 3, mode: 'Byte', errorCorrectionLevel: 'H' }"
                        :dotsOptions= "{ color: '#F96825BF' }"
                        :cornersSquareOptions="{ type: 'dot', color: '#F96825BF' }"
                        :cornersDotOptions="{ type: undefined, color: '#F96825BF' }"
                       fileExt="png" />
            </div>
            <div class="flex flex-row items-center justify-between m-4">
                <div class="flex flex-col items-start justify-center">
                    <span class="text-[#AEAEB2] text-st">{{ t('payOrderDetail.referral') }}</span>
                    <span class="text-[#1E1E1E] font-medium">{{ order.accountCode }}</span>
                </div>
                <div>
                    <SvgIcon name="copy-alt" class="w-6 h-6" @click="copyAddress"/>
                </div>
            </div>
        </div>
        <div class="mt-8 mx-4">
                <van-button block color="linear-gradient(90deg, #F70 0%, #FF4900 100%)" class="font-semibold btn"
                    @click="toNext">{{ t('payOrderDetail.t_s_o') }}</van-button>
            </div>
    </section>
    <van-notify v-model:show="show" type="success">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>copy success</span>
    </van-notify>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getPayOrder } from '@/api/payOrder'
import SvgIcon from '@/components/SvgIcon.vue';
import { useI18n } from 'vue-i18n'
import QRCodeVue3 from "qrcode-vue3";
const { t } = useI18n()

const router = useRouter()
const route = useRoute()
const show = ref(false);

const order = ref({
    id: '',
    amount: '',
    date: '',
    status: '',
    channelType: '',
    channelName: '',
    accountCode: '',
    accountName: '',
})

const columns = computed(() => [
    {name: t('payOrderDetail.order_no'), value: order.value.id},
    {name: t('payOrderDetail.amount'), value: order.value.amount},
    {name: t('payOrderDetail.orderTime'), value: order.value.date},
    {name: t('payOrderDetail.network'), value: order.value.channelName},
    {name: t('payOrderDetail.pay_m'), value: order.value.accountName},
    {name: t('payOrderDetail.address'), value: order.value.accountCode},
    {name: t('payOrderDetail.status'), value: order.value.status},

]);

const toNext = () => {
    router.push('/start');
}

const copyAddress = () => {
    navigator.clipboard.writeText(order.value.accountCode).then(() => {
        show.value = true
        setTimeout(() => {
            show.value = false;
        }, 2000);
    })

}

const initOrder = async () => {
    const orderId = route.params.orderId as string
    const res = await getPayOrder(orderId)
    order.value = res
}

// 挂载时调用
onMounted(async () => {
    initOrder()
})
</script>

<style scoped >
::v-deep(.van-nav-bar) {
    background-color: #F7F8FA;
}
</style>