<script setup lang="ts">
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import { ref } from 'vue'
	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('完成上传')
	}
	// 生成照片
	const handleGenerate = () => {
		console.log('生成照片')
	}
</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">Upload Face</button>
			<button @click="handleFinish">Finish</button>
		</div>
	</div>

	<!-- 展示照片 -->
	<div class="session session_2" v-show="faceUrl">
		<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
		<div class="link">
			<span>Home</span>
			<span>Library</span>
		</div>
		<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>
</template>

<style scoped lang="less">
	.header-title {
		--header-title-color: #fff;
		--header-title-background: #000;
	}
	.session {
		width: 100%;
		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;
				background: transparent;
				font-family: satoshiRegular;
				font-weight: 500;
				font-size: 5.5rem;
				margin: 0 1.8rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
	.session.session_1 {
		> .texts {
			top: 0;
			left: 0;
			padding: 9.9rem 0 0 7.2rem;
			font-family: 'robotoBold';
			> .title {
				font-weight: 700;
				font-size: 8.6rem;
			}
			> .desc {
				font-weight: 500;
				font-size: 4rem;
				margin-top: 3rem;
			}
		}
		> .btns {
			bottom: 23.3rem;
		}
	}

	.session.session_2 {
		> .link {
			top: 2rem;
			left: 5.4rem;
			> span {
				font-family: satoshiRegular;
				font-size: 3rem;
				vertical-align: middle;
				text-decoration: underline;
				text-underline-offset: 0.8rem;
				margin-right: 4.4rem;
			}
		}
		> .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>
