<template>
	<!-- 如果需要套餐就78 -->
   <a-modal class="modal_component UpgradePlan_modal" 
            v-model:visible="showUpgradePlan" 
            :footer="null" 
            width="35%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			:keyboard="false"
			:destroyOnClose ='true'
        >
        <div class="UpgradePlan_closeIcon">
				
			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
		</div>
		<div class="UpgradePlan_content">
			<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
		</div>
		<!-- <div v-show="stepNum == 0" class="UpgradePlan_nav">
			<div class="UpgradePlan_nav_content">
				<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
				<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
				<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
			</div>
		</div> -->
		<div v-show="stepNum == 0" class="UpgradePlan_payList">
			<!-- <div v-show="planNum == 0" class="UpgradePlan_payList0">
				<div class="UpgradePlan_payList-item" v-for="item in productList">
					<div class="UpgradePlan_payList-item-price">$99/month</div>
					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
					<ul class="UpgradePlan_payList-item-content">
						<li>
							<i class="fi fi-rr-cross-small"></i>
							<span>22500 Images per month</span>
						</li>
					</ul>
					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
				</div>
			</div>
			<div v-show="planNum == 1" class="UpgradePlan_payList1">
				<div class="UpgradePlan_payList-item" v-for="item in productList">
					<div class="UpgradePlan_payList-item-price">$99/month</div>
					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
					<ul class="UpgradePlan_payList-item-content">
						<li>
							<i class="fi fi-rr-cross-small"></i>
							<span>22500 Images per month</span>
						</li>
					</ul>
					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
					
				</div>
			</div> -->
			
			<div v-show="planNum == 2" class="UpgradePlan_payList2">
				<div class="UpgradePlan_payList-item" v-for="item in productList">
					<div class="UpgradePlan_payList2_img">
						<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
					</div>
					<div class="UpgradePlan_payList2_name">{{ item.credits * price.num }} {{ $t('upgradePlan.credits') }}</div>
					<div class="UpgradePlan_payList2_unitPrice">${{ item.price * price.num }} <span @click="setUnit">HKD</span></div>
					<div class="UpgradePlan_payList2_input">
						<div class="UpgradePlan_payList2_input_remo"  @click="removePriceNum">-</div>
						<input type="number" v-model="price.num">
						<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
					</div>
					<!-- <div class="UpgradePlan_payList2_describe">{{ $t('upgradePlan.organization') }}</div> -->
					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(1)">{{ $t('upgradePlan.Continue') }}</div>
				</div>
			</div>
		</div>
		<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
			<div class="UpgradePlan_payAffirm_title">{{ $t('upgradePlan.payment') }}</div>
			<div class="UpgradePlan_payAffirm_content">
				<label>
					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
					<img src="../../assets/images/homePage/paypal.svg" alt="">
					<span>PayPal</span>
				</label>
				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">

				</div>
				<label>
					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
					<img src="../../assets/images/homePage/bankCard.svg" alt="">
					<span>{{ $t('upgradePlan.CreditCard') }}</span>
				</label>
				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'stripe'?'active':'']">

				</div>
				<label>
					<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="UpgradePlan_payAffirm_content_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 class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
					
				</div>
			</div>
			<div class="UpgradePlan_payAffirm_clause" ref="labelDisclaimer">
				<label>
					<input type="checkbox" v-model="clause">
					<span>{{ $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="UpgradePlan_payList_item_upgrade_btn">
				<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">{{ $t('upgradePlan.Cancel') }}</div>
				<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">{{ $t('upgradePlan.Payment') }}</div>
			</div>
		</div>
		<div class="mark_loading bgFFF" v-show="isShowMark">
			<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="getTradeQuery">OK</div>
			</div>
			
			</div>
	</a-modal>
</template>
<script lang="ts">
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
import { useI18n } from "vue-i18n";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
export default defineComponent({
	components: {
		scaleImage,	
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
        // console.log(prop.msg);
        let { t } = useI18n();
        const store = useStore();
        let showUpgradePlan = ref(false)
		let planNum = ref(2)
		let stepNum = ref(0)
		let price = ref({
			num:1,
			price:2,
			credits:45,
		})
		let modeOfPayment = ref('paypal')
		let modeOfPaymentDetail = ref('ALIPAYHK')
		let clause = ref(false)//同意条款
		let productList:any = ref([])
		let payIndex = ref(0)
		let isShowMark = ref(false)
		let newWindow:any = ref()
        return {
			t,
			store,
			showUpgradePlan,
			planNum,
			stepNum,
			price,
			modeOfPayment,
			modeOfPaymentDetail,
			clause,
			productList,
			payIndex,
			isShowMark,
			newWindow,
        };
    },
    data(prop) {
        return {
		}
    },
	
    mounted() {
		this.getProductList()
    },
	watch:{
		// newWindowState:{
		// 	handler(newVal,oldVal){
		// 		console.log(newVal);
		// 		if(newVal){
		// 			this.newWindow?.close();
		// 		}
		// 	}
		// },
		
	},
    methods: {
        init(){
			this.showUpgradePlan = true
		},
		setPlan(num:any){
			this.planNum = num
		},
		upgrade(index:any){
			this.stepNum = 1
			this.payIndex = index
		},
		getProductList(){
			Https.axiosGet(Https.httpUrls.productList).then((rv) => {
				if (rv) {
					this.productList = rv
					// this.disignTypeList = rv
				}
			})
		},
		addPriceNum(){//数量减减
			this.price.num++
		},
		removePriceNum(){//数量加加
			if(this.price.num > 1){
				this.price.num--
			}
		},
		payment(){//付款
			let url = window.location.href 
			// url = url.replace(/\/[^/]+$/, '') + '/home';
			// console.log(url);
			let parsedUrl = new URL(url);
			parsedUrl.pathname = '/';
			url = parsedUrl.href + 'paySucceed';
			if(!this.clause){
				let labelDisclaimer:any = this.$refs.labelDisclaimer
				if(!labelDisclaimer.classList.contains('animation')){
					labelDisclaimer.classList.add('animation')
					setTimeout(() => {
						labelDisclaimer.classList.remove('animation')
					}, 1000);
				}
			
				return
			}
			let httpsUrl
			if(this.modeOfPayment == 'paypal'){
				httpsUrl = Https.httpUrls.payPaypal+`/${this.price.num}?returnUrl=${url}`
			}else if (this.modeOfPayment == 'stripe') {
				httpsUrl = Https.httpUrls.payStripe+`/${this.price.num}?returnUrl=${url}`
			}else{
				httpsUrl = Https.httpUrls.payAlipayHK+`/${this.modeOfPaymentDetail}/${this.price.num}`
			}

			Https.axiosPost(httpsUrl).then(
				(rv: any) => {
					var width = 800;
					var height = 600;
					var left = (screen.width - width) / 2;
					var top = (screen.height - height) / 2;
					this.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
					if(this.modeOfPayment == 'paypal'){
						// 在新窗口中写入内容
						this.newWindow.location.href = rv.approve;
					}else if(this.modeOfPayment == 'stripe'){
						this.newWindow.location.href = rv
					}else{
						let data = JSON.parse(rv)
						let herf = `${data.url}?${data.alipay_order_string}`
						this.newWindow.location.href = herf;
						// this.newWindow.document.write(herf);
					}
					this.isShowMark = true
					// this.isShowMark = true
				}
			).catch(res=>{
			});
			
		},
		//查询是否支付
		getTradeQuery(){
			this.isShowMark = false
			this.newWindow.close();//关闭打开的窗口页面
			this.store.dispatch('getCredits')
			this.cancelDsign()
		},
		setPaidBack(){//点击返回
			this.isShowMark = false
		},
		cancel(){//取消
			this.stepNum = 0
			this.modeOfPayment = 'alipay'
			this.clause = false
		},
		//设置单位
		setUnit(){

		},
		cancelDsign(){
			this.showUpgradePlan = false
			this.cancel()
		},
    },
});
</script>
<style lang="less" scoped>
.UpgradePlan_modal {
	flex: 1;
    height: 30rem;
    // overflow-x: hidden;
	display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e5e5;
	position: relative;
	.mark_loading{
		position: absolute;
		background: #fff;
	}
	.UpgradePlan_content{
		font-size: var(--aida-fsize2);
		font-weight: 900;
		color: rgba(0, 0, 0, 0.65);
	}
	.UpgradePlan_nav{
		font-size: 2rem;
		display: flex;
		justify-content: center;
		font-weight: 600;
		.UpgradePlan_nav_content{
			background: #eaecf0;
			display: flex;
			padding: .5rem 2rem;
			border-radius: 5rem;
			margin: 2rem 0;
			div{
				border-radius: 2rem;
				padding: .5rem 2rem;
				margin: 0 1rem;
				cursor: pointer;
				&.active{
					background: #fff;
				}
			}
			div:hover{
				background: #fff;
			}
		}
	}
	.UpgradePlan_payList{
		flex: 1;
		.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
			overflow-y: hidden;
			height: 100%;
			display: flex;
			.UpgradePlan_payList-item{
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
		.UpgradePlan_payList0,.UpgradePlan_payList1{
			.UpgradePlan_payList-item{
				width: 35rem;
				padding: 3rem;
				border: .5rem solid #edeff2;
				border-radius: 2rem;
				margin-right: 2rem;
				&.UpgradePlan_payList-item:last-child{
					margin-right: 0;
				}
				.UpgradePlan_payList-item-price{
					font-weight: 600;
					font-size: var(--aida-fsize2);
					margin-bottom: 1rem;
					line-height: 1;
				}
				
				.UpgradePlan_payList-item-plan{
					font-size: 1.8rem;
					font-weight: 600;
				}
				.UpgradePlan_payList-item-content{
					margin-top: 1.2rem;
					flex: 1;
					overflow-x: hidden;
				}
				.UpgradePlan_payList-item-upgrade{
					position: relative;
					text-align: center;
					padding: 1rem 2rem;
				}
				
			}
			
		}
		.UpgradePlan_payList2{
			text-align: center;
			flex-direction: column;
			.UpgradePlan_payList-item{
				justify-content: space-between;
				padding: 3rem;
				align-items: center;
				margin-top: 5rem;
				.UpgradePlan_payList2_img{
					img{
						border-radius: 50%;
						width: 10rem;
						height: 10rem;
					}
				}
				.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
					font-size: 1.8rem;
					font-weight: 900;
				}
				.UpgradePlan_payList2_name{
					font-weight: 900;
				}
				.UpgradePlan_payList2_input{
					display: flex;
					align-items: center;
					justify-content: center;
					div{
						font-size: 4rem;
						font-weight: 800;
						cursor: pointer;
					}
					input{
						width: 5rem;
						height: 5rem;
						border: .2rem solid #f4f4f7;
						margin: 0 2rem;
						text-align: center;
						background: #fff;
						border-radius: 1rem;
					}
					input::-webkit-outer-spin-button,
					input::-webkit-inner-spin-button {
						-webkit-appearance: none;
						margin: 0;
					}
					input {
						-moz-appearance: textfield;
					}
				}
				.UpgradePlan_payList2_describe{
					background: #f2f2f4;
					padding: 1rem 3rem;
					border-radius: 1.2rem;
				}
				.UpgradePlan_payList-item-upgrade{
					position: initial;
					transform: translate(0,0);
					// padding: 1rem 2rem;
				}
			}
			
		}
	}
	.UpgradePlan_payAffirm{
		width: 50rem;
		margin: 0 auto;
		margin-top: 5rem;
		.UpgradePlan_payAffirm_title{
			font-size: 2rem;
			font-weight: 600;
		}
	}
	.UpgradePlan_payAffirm_content{
		display: flex;
		flex-direction: column;
		margin: 3rem 0;
		// height: 20rem;
		// overflow-y: auto;
		>label{
			display: flex;
			align-items: center;
			padding: 1rem;
			margin: 1rem 0;
			cursor: pointer;
			border: .5rem solid #efefef;
			border-radius: 2rem;
			img{
				margin: 0rem 2rem;
				// max-width: 4rem;
				width: 4rem;
			}
			.UpgradePlan_payAffirm_content_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;
				}
			}
		}
	}
	.UpgradePlan_payAffirm_clause{
		margin-bottom: 1.5rem;
		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);
				}
			}
		}
	}
	.UpgradePlan_payList_item_upgrade_btn{
		display: flex;
		display: flex;
		justify-content: space-around;
		>div{
			position: relative;
			left: 0;
			transform: none;
			line-height: 1;
			display: flex;
			align-items: center;
		}
		.UpgradePlan_payList_item_upgrade1{
			background: rgba(0, 0, 0, 0);
			border: 2px solid;
			color: #000;
		}
	}
    .UpgradePlan_closeIcon{
		top: calc(2rem*1.2);
		right: calc(2rem*1.2);
        cursor: pointer;
		width: calc(4rem*1.2);
		height: calc(4rem*1.2);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		.fi-rr-cross-small::before{
			padding: calc(.2rem*1.2);
			border-radius: 5px;
			border: solid 2px rgba(0, 0, 0, 0.25);
			transition: 1s all;
			color: rgba(0, 0, 0, 0.55);
		}
		&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
			border: solid 2px rgba(0, 0, 0, 0.55);
			color: rgba(0, 0, 0, 1);
		}
	}
}
	

</style>
<style lang="less">
.UpgradePlan_modal,.layout_modal{
	.ant-modal-content{
		border-radius: calc(1rem*1.2);
		overflow: hidden;
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{ 
			display: flex;
			flex-direction: column;
			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
			height: calc(55rem*1.2);
			// height: calc(65rem*1.2);
		}
		//进度完成字体颜色
		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
			color: #000;
		}
		.ant-progress-circle .ant-progress-text{
			color:rgba(0, 0, 0, 0.55);
			font-size: calc(1.6rem*1.2);
		}
	}
}
.UpgradePlan_modal{
	.ant-modal-content{
		
		.ant-modal-body{
			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
			height: calc(55rem*1.2);
			// height: calc(65rem*1.2);
		}
	}
}
</style>