<template>
	<div class="payMethod" ref="payMethod"></div>
	<a-modal
		class="generalModel"
		:get-container="() => $refs.payMethod"
		v-model:visible="payMethodModel"
		:footer="null"
		:width="pageWidth"
		height="auto"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="payMethodModelMask"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<!-- <i class="fi fi-rr-cross-small"></i> -->
				<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="payMethodContent">
			<div class="generalModelTitle">
				{{ $t('upgradePlan.paymentmethod') }}
			</div>
			<div class="payMethod_list">
				<label class="payMethod_item" v-show="$props.type == 'credits'">
					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
					<img src="../../assets/images/homePage/paypal.svg" alt="">
					<span>PayPal</span>
				</label>
				<!-- <label class="payMethod_item">
					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
					<img src="../../assets/images/homePage/stripe.svg" alt="">
					 <span>Stripe (Credit Card)</span>
				</label> -->
				<label class="payMethod_item" v-show="$props.type == 'credits'">
					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
					<img src="../../assets/images/homePage/alipay.svg" alt="">
					<span>{{ $t('upgradePlan.Alipay') }}</span>
					<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
						<label>
							<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
							<span>{{ $t('upgradePlan.HongKong') }}</span>
						</label>
						<label>
							<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
							<span>{{ $t('upgradePlan.MainlandChina') }}</span>
						</label>
					</div>
				</label>
			</div>
			<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
				<label>
					<input type="checkbox" v-model="clause">
					<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
				</label>
			</div>
			<div class="payMethod_payAffirm_btn">
				<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
				<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div>
			</div>
			
		</div>
		<div class="mark_loading" v-show="isShowMark_">
			<a-spin size="large" />
		</div>
		<div class="mark_loading" v-show="isShowMark" state="true">
			<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
			<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
			<div class="mark_loading_title_box">
				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
				<div class="mark_loading_btn" @click="completePayment">OK</div>
			</div>
			
		</div>
	</a-modal>

</template>

<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
const md5 = require("md5");
export default defineComponent({
    components: {
        VerificationCodeInput,
    },
	props:{
		type:{
			type:String,
			default:''
		}
	},
	emits: ['completePayment'],
    setup(prop,{emit}){
		const store = useStore();
		let payMethod = reactive({
			payMethodModel:false,
			payMethodModelMask:true,
			pageWidth:'50%'
		})
		let payMethodData = reactive({
			modeOfPayment:'paypal',
			modeOfPaymentDetail:'ALIPAYHK',
			labelDisclaimer:null,//dom
			payAffirmData:{} as any,
			clause:false,
			newWindow:null as any,
			isShowMark:false,
			isShowMark_:false,
		})
		const init = (data:any)=>{
			payMethod.payMethodModel = true
			payMethodData.payAffirmData = data
		}
		const cancelDsign = () => {
			payMethod.payMethodModel = false
		}
		const payAffirm = () => {
		    if(!payMethodData.clause){
				let labelDisclaimer:any = payMethodData.labelDisclaimer
				if(!labelDisclaimer.classList.contains('animation')){
					labelDisclaimer.classList.add('animation')
					setTimeout(() => {
						labelDisclaimer.classList.remove('animation')
					}, 1000);
				}
				return
			}
			payMethodData.isShowMark_ = true
			let httpsUrl
			let url = window.location.origin+'/paySucceed' 
			let payAffirmData = payMethodData.payAffirmData
			let data = {
				autoRenewal:true,//false为不自动续费
				productName:payAffirmData.productName,
				quantity:payAffirmData.quantity?payAffirmData.quantity:1,
				returnUrl:url,
				subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
				wallet:payMethodData.modeOfPaymentDetail,
			}
			if(payMethodData.modeOfPayment == 'paypal'){
				httpsUrl = Https.httpUrls.payPaypal
			}else if (payMethodData.modeOfPayment == 'stripe') {
				httpsUrl = Https.httpUrls.payStripe
			}else{
				httpsUrl = Https.httpUrls.payAlipayHK
			}
			Https.axiosPost(httpsUrl,data).then(
				(rv: any) => {
					var width = 800;
					var height = 600;
					var left = (screen.width - width) / 2;
					var top = (screen.height - height) / 2;
					payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
					let herf
					if(payMethodData.modeOfPayment == 'paypal'){
						// 在新窗口中写入内容
						herf = rv.approve;
						// payMethodData.newWindow.location.href = rv.approve;
					}else if(payMethodData.modeOfPayment == 'stripe'){
						herf = rv
						// payMethodData.newWindow.location.href = rv
					}else{
						let data = JSON.parse(rv)
						herf = `${data.url}?${data.alipay_order_string}`
						// payMethodData.newWindow.location.href = herf;
					}
					if(payMethodData.newWindow){
						payMethodData.newWindow.location.href = herf
					}else{
						// window.open(herf, '_blank');
						window.location.href=herf;  
					}
					payMethodData.isShowMark = true
					payMethodData.isShowMark_ = false
				}
			).catch(res=>{
				payMethodData.isShowMark_ = false
			});
		}
		const setPaidBack = ()=>{
			payMethod.payMethodModel = false
			payMethodData.isShowMark = false
			payMethodData.clause = false
			payMethodData.modeOfPayment = 'paypal'
			payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
		}
		const completePayment = ()=>{
			setPaidBack()
			emit('completePayment')
		}
        return{
			store,
			...toRefs(payMethod),
			...toRefs(payMethodData),
			init,
			cancelDsign,
			payAffirm,
			setPaidBack,
			completePayment,
        }
    },
    data() {
        return {
        };
    },
    methods: {
		turnToWindow(url:any) {
            window.open(url);
        },
    },
});
</script>
<style lang="less" scoped>
.payMethod {
   .payMethodContent{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60rem;
		margin: 0 auto;
		position: relative;
		.generalModelTitle,.generalModelInfo{
			width: 100%;
		}
		.payMethod_list{
			margin-bottom: 4rem;
			display: flex;
			flex-direction: column;
			width: 100%;
			>label{
					display: flex;
					align-items: center;
					padding: 0 2rem;
					margin-bottom: 3rem;
					cursor: pointer;
					border: 2px solid #EFEFEF;
					border-radius: 2rem;
					height: 8rem;
					width: 100%;
				img{
					margin: 0rem 2rem;
					// max-width: 4rem;
					width: 4rem;
				}
				.payAffirm_detail{
					margin-left: auto;
					display: flex;
					>label{
						cursor: pointer;
						display: flex;
						align-items: center;
						margin-right: 1rem;
						span{
							margin-left: .5rem;
						}
					}
					
				}
			}
			>label:last-child{
				margin: 0;
			}
		}
		.payMethod_payAffirm_clause{
			margin-bottom: 4rem;
			label{
				cursor: pointer;
				input{
					margin-right: 1rem;
					cursor: pointer;
					vertical-align: middle;
				}
				span{
					vertical-align: top;
					a{
						color: #000;
						text-decoration: underline;
					}
				}
			}
			&.animation{
				animation: shake .3s linear;
				@keyframes shake {
					0%{
						transform: translateX(0px);
					}
					25%{
						transform: translateX(-10px);
					}
					50%{
						transform: translateX(10px);
					}
					75%{
						transform: translateX(-10px);
					}
					100%{
						transform: translateX(0px);
					}
				}
			}
		}
		.payMethod_payAffirm_btn{
			display: flex;
			justify-content: space-between;
			width: 100%;
			>div{
				width: 29rem;
			}
		}
		
   }
   .mark_loading{
		position: absolute;
		z-index: 2;
		background: #fff;
		.mark_loading_title{
		font-size: 3rem;
		// text-decoration: underline;
		font-weight: 600;
		margin-bottom: 2rem;
		// color: #fff;
	}
	.mark_loading_intro{
		color: rgba(0, 0, 0, 0.6);
		font-size: 1.4rem;
		margin-bottom: 2rem;
		text-align: center;
		width: 80%;
	}
	.mark_loading_title_box{
		display: flex;
	}

	.mark_loading_btn,.mark_loading_btn2{
		// border: #000;
		// color: #fff;
		display: flex;
		margin-top: 10px;
		text-align: center;
		border: 2px solid;
		padding: 0 20px;
		border-radius: 10px;
		cursor: pointer;
		padding: .3rem 4rem;
		background: #39215b;
		color: #fff;
		border: none;
		margin: 0 2rem;
		align-items: center;
	}
	.mark_loading_btn2{
		border: 2px solid #000;
		color: #000;
		background: rgba(0,0,0,0);
	}
	}
}

</style>