<template>
   <a-modal class="modal_component UpgradePlan_modal" 
            v-model:visible="showUpgradePlan" 
            :footer="null" 
            width="78%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			:keyboard="false"
        >
        <div class="UpgradePlan_closeIcon">
				
			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
		</div>
		<div class="UpgradePlan_content">
			<div>Upgrade your Account Subscription Plan</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">
					<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">{{ price.credits * price.num }} credits</div>
					<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">USD</span></div>
					<div class="UpgradePlan_payList2_input">
						<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
						<input type="number" v-model="price.num">
						<div class="UpgradePlan_payList2_input_remo"  @click="removePriceNum">-</div>
					</div>
					<div class="UpgradePlan_payList2_describe">All credits are shared within the {{  }} name organization</div>
					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade">UPGRADE NOW</div>
				</div>
			</div>
		</div>
		<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
			<div class="UpgradePlan_payAffirm_title">Select payment method</div>
			<div class="UpgradePlan_payAffirm_content">
				<label>
					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
					<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
					PayPal
				</label>
				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">

				</div>
				<label>
					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
					支付宝
				</label>
				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">

				</div>
			</div>
			<div class="UpgradePlan_payAffirm_clause">
				<label>
					<input type="checkbox" v-model="clause">
					<span>I acknowledge that I have read, understand, and agree with the <a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">Terms and Conditions</a> (including the Scope of service) and the <a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">Subscription Agreement</a>. *</span>
				</label>
			</div>
			<div class="UpgradePlan_payList_item_upgrade_btn">
				<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
				<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<div>Has it been paid?</div>
			<div>
				<div @click="getTradeQuery">Yes</div>
				<div @click="getTradeQuery">No</div>
			</div>
		</div>
	</a-modal>
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
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 { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
	components: {
		scaleImage,	
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
        // console.log(prop.msg);
        let showUpgradePlan = ref(false)
		let planNum = ref(0)
		let stepNum = ref(0)
		let price = ref({
			num:1,
			price:15,
			credits:115,
		})
		let modeOfPayment = ref('alipay')
		let clause = ref(false)//同意条款
		let productList = ref([])
		let payIndex = ref(0)
		let isShowMark = ref(false)
        return {
			showUpgradePlan,
			planNum,
			stepNum,
			price,
			modeOfPayment,
			clause,
			productList,
			payIndex,
			isShowMark,
        };
    },
    data(prop) {
        return {
		}
    },
	
    mounted() {
		this.getProductList()
    },
	watch:{
		// driver__:{
		// 	handler(newVal,oldVal){
		// 		if(this.type_.type2 == 'Printboard'){
		// 			if(newVal.index >= 14 && newVal.index < 15){
		// 				this.setKeyword(newVal.index-14)
		// 			}else{
		// 			}
		// 		}else if(this.type_.type2 == 'Sketchboard'){
					
		// 		}
				
		// 	}
		// },
		
	},
    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(){//付款
			console.log(this.modeOfPayment,'alipay','paypal');
			if(!this.clause){
				return
			}
			let url = window.location.href 
			url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
			Https.axiosPost(Https.httpUrls.pagePay+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
                (rv: any) => {
					// var newWindow:any = window.open();
					// newWindow.document.write(rv);
					document.write(rv);
					// this.isShowMark = true
                }
            ).catch(res=>{
            });
		},
		//查询是否支付
		// getTradeQuery(){
		// 	let params = 1
		// 	Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
		// 		if (rv) {
		// 			console.log(rv);
					
		// 		}
		// 	})
		// },
		cancel(){//取消
			this.stepNum = 0
			this.modeOfPayment = 'alipay'
			this.clause = false
		},
		//设置单位
		setUnit(){

		},
		cancelDsign(){
			this.showUpgradePlan = false
		},
    },
});
</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;
	.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: 600;
				}
				.UpgradePlan_payList2_name{
					font-weight: 900;
				}
				.UpgradePlan_payList2_input{
					display: flex;
					align-items: center;
					justify-content: center;
					div{
						font-size: 4rem;
						font-weight: 600;
						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: 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;
		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;
			}
		}
	}
	.UpgradePlan_payAffirm_clause{
		margin-bottom: 1.5rem;
		label{
			cursor: pointer;
			input{
				margin-right: 1rem;
				cursor: pointer;
			}
			span{
				vertical-align: top;
				a{
					color: #000;
					text-decoration: underline;
				}
			}
		}
	}
	.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(65vh - 6.4rem);
			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);
		}
	}
}
</style>