<template>
	<div class="signUp" v-if="signUp">
		<div class="selectSignUp" v-show="!isSelectSignUp">
			<div class="back" @click="close">
				&lt; BACK
			</div>
			<div class="title">Our 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" v-if="item.title != '------------------'">{{ item.info }}</div>
						<div class="info" v-else>-----</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.title != '------------------'" :class="{active:item.title == '------------------'}" @click="createAccount">Create account</div>
						<div class="gallery_btn gallery_btn_radius" v-else :class="{active:item.title == '------------------'}" @click="createAccount">Contact us</div>
					</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>
		<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",
		emits: ['close'],
		setup(props, { emit }) {
			let dom = reactive({
				registerModel:null
			})
			let data = reactive({
				signUp:false,
				isSelectSignUp:false,
				productList:[
					{
						title:"Personal version",
						info:"Try for 5 days",
						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'
						]
					},
					{
						title:"------------------",
						info:"--- / Year",
						detail:"---------------------------------------------",
						// highlight:"---------------",
						detailList:[
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
						]
					},{
						title:"------------------",
						info:"--- / Year",
						detail:"---------------------------------------------",
						// highlight:"---------------",
						detailList:[
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
							'---------------------------------------',
						]
					},
					// {
					// 	title:"Education Edition",
					// 	info:"XXX / Year",
					// 	detail:"Multi user management system for universities",
					// 	highlight:"Free 5-day trial",
					// 	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:"XXX / Year",
					// 	detail:"Enterprise level multi person collaboration system",
					// 	highlight:"Free 5-day trial",
					// 	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',
					},
				]
			})
			const init = ()=>{
				data.signUp = true
			}
			const close = ()=>{
				data.signUp = false
				emit('close')
			}
			const createAccount = ()=>{
				if(window.innerWidth < 768){
					dom.registerModel.pageWidth = '100%'
				}
				dom.registerModel.init()
			}
			onMounted(()=>{
				
			})
			return {
				...toRefs(dom),
				...toRefs(data),
				init,
				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;
		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>
