<template>
    <div class="full-dialog column flex-center items-center">
        <div class="q-pa-lg bg-white rounded light-shadow" style="width:600px;">
            <div class="text-weight-bold q-mb-lg" style="font-size: 18px;">微信支付</div>
            <div class="text-center">
                <div class="row flex-center">
                    <QRCode v-loading="loading" :value="orders.qr?orders.qr:'https://www.baidu.com'" :size="200"></QRCode>
                    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713233895000_458.jpg" class="q-ml-md" style="height:200px;">
                </div>
                <div class="text-body2 q-mt-lg text-grey-6">请打开微信（WeChat），使用 [扫一扫]扫描上方二维码进行支付</div>
                <div class="q-mt-xl text-right">
                    <el-button class="q-px-md q-mr-md" @click="close" :loading="CancelLoading">取消支付</el-button>
                    <el-button type="primary" class="q-px-md" @click="CompletePayment">已完成付款</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import QRCode from '../QRCode/QRCode.vue';
import OrderService from "@/services/OrderService";
import { ApiResult } from "@/configs/axios";
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps({
    orderid: {
        type: Number,
        required: true,
    },
})
const emit = defineEmits<{
  (event: 'close'): void
}>()

const orders = ref({} as any)
const loading = ref(false)
const CancelLoading = ref(false)
const close = async ()=>{
    ElMessageBox.confirm(
        `此操作将取消该订单，是否确定?`,
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        })
        .then(async () => {
            try {
              await CanceltOrders()
            } catch (error) { }
        })
        .catch(() => { });
    
}
const CanceltOrders = async ()=>{
  if(CancelLoading.value)return
  CancelLoading.value=true
  const response = await OrderService.CancelPPTOrder(props.orderid)
  if(response.data.resultCode == ApiResult.SUCCESS){
    emit('success')
  }

  CancelLoading.value=false
}

const CompletePayment = async () => {
    const response = await OrderService.GetOrder(props.orderid)
    if (response.data.resultCode == ApiResult.SUCCESS) {
        if(response.data.data.status==1) ElMessage({
            showClose: true,
            message: `当前订单未支付，请继续完成支付`,
            type: "warning",
        });
        else emit('success')
    }

}

const QRpayment = async () =>{
    if(!props.orderid) return
    loading.value = true
    const response = await OrderService.CreatePPTPayOrder(props.orderid)
    if(response.data.resultCode == ApiResult.SUCCESS){
        orders.value = response.data.data
    }else ElMessage({
            showClose: true,
            message: `${response.data.message}`,
            type: "warning",
        });
    loading.value = false
}
QRpayment()
</script>
<style>

</style>