<template>
    <a-modal
        class="modal_component payOrder_modal generalModel_modal"
        v-model:visible="showPayOrder"
        :footer="null"
        width="78%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
        wrapClassName="#app"
        :keyboard="false"
    >
		
        <div class="closeIcon">
            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
        </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() {
            this.showPayOrder = true;
        },
		setState(str:any){
			this.presentState = str
			let setInit:any
			if(str == 'paypal'){
				setInit = this.$refs.allOrder
			}else{
				setInit = this.$refs.creditsDetail
			}
			setInit.init()
		},
		cancelDsign(){
			this.showPayOrder = false
		}
    },
});
</script>
<style lang="less">
.payOrder_modal {
    .closeIcon {
        z-index: 2;
    }
    .payOrder_page {
        width: 100%;
        height: 100%;
        padding: 9rem;
        overflow: hidden;
        // 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{
			height: 100%;
			display: flex;
		flex-direction: column;
		}
	}
}
</style>