<template>
	<div ref="payOrder_modal"></div>
    <a-modal
        class="modal_component payOrder_modal generalModel"
        v-model:visible="showPayOrder"
        :footer="null"
        width="78%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
        wrapClassName="#app"
		:get-container="() => $refs.payOrder_modal"
        :keyboard="false"
    >
		
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
        <div class="payOrder_page">
			<div class="payOrder_page_title">
				<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">{{ $t('payOrder.OrderInformation') }}</div>
				<div class="payOrder_page_title_item" @click="setState('credits')" :class="{active:presentState == 'credits'}">{{ $t('payOrder.CreditsInformation') }}</div>
			</div>

			<div class="payOrder_table_content" ref="historyTable">
				<creditsDetail ref="creditsDetail" v-show="presentState == 'credits'"></creditsDetail>
				<allOrder ref="allOrder" v-show="presentState == 'paypal'"></allOrder>
			</div>
        </div>
	
    </a-modal>
	<div class="mark_loading" v-show="loadingShow">
		<a-spin size="large" />
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
    components: {
		creditsDetail,
		allOrder,
    },
    setup() {
        let presentState: any = ref('paypal');
        let showPayOrder: any = ref(false);
        let loadingShow: any = ref(false);//原因
        let { t } = useI18n();
        return {
            presentState,
            showPayOrder,
			loadingShow,
            t,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
        init(id:any) {
            this.showPayOrder = true;
			this.setState('paypal',id)
			if(id)sessionStorage.removeItem('orderId')
        },
		setState(str:any,id:any){
			nextTick(()=>{
				this.presentState = str
				let setInit:any
				if(str == 'paypal'){
					setInit = this.$refs.allOrder
				}else{
					setInit = this.$refs.creditsDetail
				}
				setInit.init(id)
			})
		},
		cancelDsign(){
			this.showPayOrder = false
		}
    },
});
</script>
<style lang="less" scoped>
:deep(.payOrder_modal) {
	>.ant-modal-content{
		>.ant-modal-body{
			padding: 6rem;
		}
	}
    .payOrder_page {
        width: 100%;
        height: 100%;
        overflow: hidden;
		display: flex;
    	flex-direction: column;
        // min-width: 1440px;
        position: relative;
		.payOrder_page_title{
			display: flex;
			.payOrder_page_title_item{
				padding: 2rem 1rem;
				margin: 0 2rem;
				position: relative;
				cursor: pointer;
				font-size: var(--aida-fsize1-8);
				font-weight: 500;
				transition: all .3s;
				&.active{
					font-weight: 600;
				}
				&.active::before{
					width: 100%;
					left: 0;
					right: auto;
				}
			}
			.payOrder_page_title_item::before{
				position: absolute;
				content: "";
				width: 0%;
				height: 0.5rem;
				background: #000;
				bottom: .8rem;
				left: auto;
				right: 0;
				transition: all .3s;
			}
		}
		.payOrder_table_content{
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}
	}
}
</style>