<template>
	<div class="signUp">
		<div class="selectSignUp" v-show="!isSelectSignUp">
			<div class="title">{{ productList[0].Advantages }}</div>
			<!-- <div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div> -->
			<div class="gallery_list product_list">
				<div class="gallery_item" v-for="item in productList" :key="item">
					<div class="product_signUp_box">
						<div class="title">{{ item?.title }}</div>
						<div class="info">{{ item?.info }}</div>
						<div class="detail">{{ item?.detail }}</div>
						<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
						<div class="gallery_btn gallery_btn_radius" v-if="item?.info != '/'" @click="createAccount">{{ item?.btn }}</div>
						<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
					</div>
					<ul class="product_detail">
						<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="introductDetail" v-show="isSelectSignUp">
			<div class="title">Product Features</div>
			<div class="gallery_list introductList">
				<div class="gallery_item" v-for="item in introductList" :key="item">
					<div class="itemIcon">
						<img :src="item.img" alt="">
					</div>
					<div class="title">{{ item.title }}</div>
					<div class="info">{{ item.info }}</div>
				</div>
			</div>
			<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
			<!-- <div class="gallery_btn" v-else style="width: 20rem;" @click="()=>isSelectSignUp=false">Contact us</div> -->
		</div>
		<registerModel ref="registerModel"></registerModel>
	</div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
	import registerModel from './registerModel.vue'

    export default defineComponent({
		components: {
		    registerModel,
		},
        name: "login",
		props: ['isSelectSuccessively'],
		// emits: ['close'],
		setup(props, { emit }) {
			let dom = reactive({
				registerModel:null
			})
			let data = reactive({
				isSelectSignUp:false,
				productList:[],
				productListCn:[
					{
						Advantages:'我们的优势',
						title:"个人版",
						info:"试用五天(注册后开始免费试用)",
						detail:"时尚设计助理",
						highlight:"免费试用五天",
						detailList:[
							'时尚设计助理',
							// 'Basic 3D service functions',
							'个人信用额度供独立使用',
							'作品可以在作品广场中共享',
							'支持按 月/年 支付方式',
							'适合个人创作者和自由设计师试用'
						],
						btn:'创建账号',
					},
				],
				productListEn:[
					{
						Advantages:'Our Advantages',
						title:"Personal version",
						info:"Try for 5 days(Free trail starts upon registration)",
						detail:"AI Fashion Design Assistant",
						highlight:"Free 5-day trial",
						detailList:[
							'AI Fashion Design Assistant',
							// 'Basic 3D service functions',
							'Individual Credit Limit for Independent Use',
							'Works can be shared in public galleries',
							'Support monthly/annual payment options',
							'Suitable for individual creators and freelance designers to use'
						],
						btn:'Create account',
					},
					// {
					// 	title:"Education Edition",
					// 	info:"/",
					// 	detail:"Multi user management system for universities",
					// 	highlight:"",
					// 	detailList:[
					// 		'Multi user management system for universities',
					// 		'Credit limits are shared across the entire school',
					// 		'AI assisted design teaching function',
					// 		'Support sketch creativity and design inspiration teaching',
					// 		'Basic 3D design functions',
					// 	]
					// },{
					// 	title:"Enterprise Edition",
					// 	info:"/",
					// 	detail:"Enterprise level multi person collaboration system",
					// 	highlight:"",
					// 	detailList:[
					// 		'Enterprise level multi person collaboration system',
					// 		'Internal Credit Sharing within Enterprises',
					// 		'Brand DNA management system, customizable brand Exclusive design preferences',
					// 		'Cloud based design generation and management',
					// 		'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
					// 		'Enterprise level data security assurance',
					// 		'Suitable for fashion design teams and brands to use',
					// 	]
					// },
				],
				introductList:[
					{
						img:'/image/homeIntroduct/introduct1.png',
						title:'Quickly generate images',
						info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
					},{
						img:'/image/homeIntroduct/introduct2.png',
						title:'Generate plan',
						info:'Upload inspiration moodboards, colors, printboards, and sketches to generate unlimited design suggestions',
					},{
						img:'/image/homeIntroduct/introduct3.png',
						title:'Simple operation',
						info:'Just a few clicks to save and retrieve your design',
					},{
						img:'/image/homeIntroduct/introduct4.png',
						title:'Cloud',
						info:'After subscribing, you can access it anytime and anywhere through the cloud system',
					},{
						img:'/image/homeIntroduct/introduct5.png',
						title:'Usage',
						info:'Simplified operation, it only takes about ten minutes to learn how to use it',
					},{
						img:'/image/homeIntroduct/introduct6.png',
						title:'Email',
						info:'By info@code-create.com.hk Contact us to learn more',
					},
				]
			})
			watch(()=>props.isSelectSuccessively,(newVal)=>{
				if(newVal){
				    data.productList = data.productListCn
				}else{
				    data.productList = data.productListEn
				}
			},{immediate: true})
			const close = ()=>{
			}
			const createAccount = ()=>{
				if(window.innerWidth < 768){
					dom.registerModel.pageWidth = '100%'
				}
				dom.registerModel.init()
			}
			onMounted(()=>{
				
			})
			return {
				...toRefs(dom),
				...toRefs(data),
				close,
				createAccount,
            }
		},
    })
</script>
<style scoped lang="less">
.signUp{
	flex: 1;
	padding: 0rem 4rem;
	.back{
		font-size: 1.6rem;
		margin-bottom: 3rem;
	}
	.back,.introduce>span{
		cursor: pointer;
	}
	.title,.introduce{
		font-weight: 600;
		margin-bottom: 4rem;
	}
	.title{
		font-size: 3rem;
	}
	.introduce{
		font-size: 2.4rem;
		text-decoration: underline;
	}
	.gallery_list{
		display: flex;
		// justify-content: space-between;
		justify-content: center;
		flex-wrap: wrap;
		.gallery_item{
			width: calc(33.333% - 3rem);
			.title,.info,.highlight{
				font-weight: 600;
			}
			.title{
				font-size: 2rem;
				margin-bottom: 10px;
			}
			.info,.detail,.gallery_btn{
				font-size: 1.6rem;
			}
			.detail{
				margin-top: 6rem;
				margin-bottom: 7.6rem;
			}
			.highlight{
				font-size: 2.4rem;
				position: absolute;
				top: 0;
				right: 0;
				background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
				border-radius: 0px 2.8rem 0px 1rem;
				padding: 1rem 2rem;
			}
			.gallery_btn{
				line-height: 6rem;
				width: 100%;
				padding: 0;
			}
		}
	}
	.product_list{
		.gallery_item{
			.product_signUp_box{
				border-radius: 3rem;
				border: 2px solid #000;
				padding: 3rem;
				position: relative;
				.active{
					pointer-events: none;
				}
			}
			.product_detail{
				margin-top: 4rem;
				padding-left: 20px;
				li{
					list-style: disc;
					margin-bottom: 10px;
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.introductDetail{
		>.title{
			margin-top: 6rem;
			text-align: center;
		}
		.introductList{
			width: 130rem;
			margin: 8rem auto 0rem auto;
		}
		.gallery_item{
			margin-bottom: 6rem;
			.itemIcon{
				width: 8rem;
				height: 8rem;
				border-radius: 2rem;
				background: #000;
				margin-right: auto;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.title{
				text-align: center;
			}
			.info{
				font-weight: 500;
				height: 9rem;
			}
			>div{
				margin-bottom: 2rem;
			}
			>div:last-child{
				margin-bottom: 0;
			}
		}
		.gallery_btn{
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
