<script setup lang="ts">
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import { ref, onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	const emit = defineEmits(['view-type'])
	onMounted(() => {
		emit('view-type', 1)
	})
	const router = useRouter()
	const faceUrl = ref('')
	// 上传照片
	const handleUploadFace = () => {
		const input = document.createElement('input')
		input.type = 'file'
		input.accept = 'image/*'
		input.capture = 'camera'
		input.click()
		input.onchange = (e: any) => {
			const file = e.target.files[0]
			if (!file) return
			const reader = new FileReader()
			reader.readAsDataURL(file)
			reader.onload = () => {
				faceUrl.value = reader.result as string
			}
		}
	}
	// 完成上传
	const handleFinish = () => {
		console.log('完成上传')
		router.push({ name: 'customize' })
	}
	// 生成照片
	const handleGenerate = () => {
		console.log('生成照片')
		router.push({ name: 'customize' })
	}
</script>

<template>
	<header-title />
	<!-- 上传照片 -->
	<div class="session session_1" v-show="!faceUrl">
		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
		<div class="texts">
			<p class="title">Keep Styling with AI?</p>
			<p class="desc">
				Would you like to keep playing with<br />
				our personalized AI tools?
			</p>
		</div>
		<div class="btns">
			<button @click="handleUploadFace"><span>Upload Face</span></button>
			<button @click="handleFinish"><span>Finish</span></button>
		</div>
	</div>

	<!-- 展示照片 -->
	<div class="session session_2" v-show="faceUrl">
		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
		<div class="content">
			<div class="title">
				Upload your Face<br />
				to Try-on
			</div>
			<!-- 照片 -->
			<div class="picture">
				<img :src="faceUrl" />
			</div>
			<div class="btns">
				<button @click="handleUploadFace">Re-try</button>
				<button @click="handleGenerate">Generate</button>
			</div>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.session {
		width: 100%;
		flex: 1;
		overflow: hidden;
		position: relative;
		color: #fff;
		> * {
			position: absolute;
		}
		> .bg {
			position: relative;
			width: 100%;
			height: auto;
		}
		.btns {
			width: 100%;
			display: flex;
			justify-content: center;

			> button {
				box-sizing: content-box;
				width: 40rem;
				height: 8.3rem;
				border-radius: 0.7rem;
				border: 0.4rem solid #fff;
				font-family: satoshiMedium;
				font-weight: 500;
				font-size: 5.5rem;
				margin: 0 1.8rem;
				color: #fff;
				background-color: transparent;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					// opacity: 0.1;
					backdrop-filter: blur(9.5rem);
					background: url('@/assets/images/customer_form_bg.png');
				}
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
	.session.session_1 {
		> .texts {
			top: 0;
			left: 0;
			padding: 9.9rem 0 0 7.2rem;
			> .title {
				font-family: 'satoshiBold';
				font-size: 8.63rem;
			}
			> .desc {
				font-family: 'satoshiMedium';
				font-size: 4rem;
				margin-top: 2rem;
				line-height: 132%;
			}
		}
		> .btns {
			bottom: 19.7rem;
		}
	}

	.session.session_2 {
		> .content {
			top: 18.5rem;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			> .title {
				font-family: satoshiBold;
				font-size: 11rem;
				text-align: center;
				line-height: 124%;
			}
			> .picture {
				margin: 7.8rem 0;
				width: 65.3rem;
				height: 86.5rem;
				border-radius: 1rem;
				backdrop-filter: blur(5.27rem);
				box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
				border: 0.439rem solid #fff;
				// border-image: linear-gradient(90deg,#BF926E94, #ffffff) 1;
				display: flex;
				align-items: center;
				justify-content: center;
				> img {
					width: 58.9rem;
					height: 79.2rem;
					border-radius: 1rem;
					border: 0.2rem solid #d9d9d9;
					object-fit: contain;
				}
			}
			> .btns {
				> button {
					width: 34.5rem;
					height: 8.6rem;
					border-radius: 4.3rem;
					margin: 0 5rem;
				}
			}
		}
	}
</style>
