<template>
	<div class="upgradePlan" ref="upgradePlan">
	<!-- 如果需要套餐就78 -->
   <a-modal class="generalModel UpgradePlan_modal" 
            v-model:visible="showUpgradePlan" 
            :footer="null" 
			:get-container="() => $refs.upgradePlan"
            width="35%"
			height="auto"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			:keyboard="false"
			:destroyOnClose ='true'
        >
		<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="UpgradePlan_content">
			<div>{{ $t('upgradePlan.BuyCredlts') }}</div>
		</div>
		<div v-show="stepNum == 0" class="UpgradePlan_payList">
			<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>
		<payMethod ref="payMethod" @completePayment="cancelDsign" type="credits"></payMethod>

		<!-- <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>
</div>
</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 { useI18n } from "vue-i18n";
import payMethod from "@/component/Pay/payMethod.vue";
// import { forEach } from "jszip";
export default defineComponent({
	components: {
		payMethod,
	},
    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 payMethod:any = ref(null)
		let modeOfPayment = ref('paypal')
		let modeOfPaymentDetail = ref('ALIPAYHK')
		let clause = ref(false)//同意条款
		let productList:any = ref([])
		let isShowMark = ref(false)
		let newWindow:any = ref()
        return {
			t,
			store,
			showUpgradePlan,
			planNum,
			stepNum,
			payMethod,
			price,
			modeOfPayment,
			modeOfPaymentDetail,
			clause,
			productList,
			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){
			let data = {
				autoRenewal:true,//one_time为不自动续费
				productName:'CreditsPurchase',
				quantity:this.price.num,
			}
			this.payMethod.init(data)
		},
		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 
			let url = window.location.origin+'/paySucceed' 
			// 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);
					let herf
					if(this.modeOfPayment == 'paypal'){
						// 在新窗口中写入内容
						herf = rv.approve;
						// this.newWindow.location.href = rv.approve;
					}else if(this.modeOfPayment == 'stripe'){
						herf = rv
						// this.newWindow.location.href = rv
					}else{
						let data = JSON.parse(rv)
						herf = `${data.url}?${data.alipay_order_string}`
						// this.newWindow.location.href = herf;
					}
					if(this.newWindow){
						this.newWindow.location.href = herf
					}else{
						// window.open(herf, '_blank');
						window.location.href=herf;  
					}
					// 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_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;
				}
			}
			
		}
	}
}
</style>
