<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'
	import { useGenerateStore } from '@/stores'
	const generateStore = useGenerateStore()
	const emit = defineEmits(['view-type'])
	onMounted(() => {
		emit('view-type', 1)
	})
	const router = useRouter()
	const faceUrl = ref('')
	// 上传照片
	const handleUploadFace = () => {
		// generateStore.updatePhotoInfo({})
		router.push({ name: 'uploadFace2' })
	}
	// 跳过上传
	const handleFinish = () => {
		generateStore.updatePhotoInfo({})
		generateStore.clearCustomizeInfo()
		generateStore.uploadCustomizeInfo({
			tryOnId: generateStore.originalTryOn.id,
			tryOnUrl: generateStore.originalTryOn.tryOnUrl,
			isFavorite: generateStore.originalTryOn.isLike
		})
		router.push({ name: 'customize' })
	}
</script>

<template>
	<header-title />
	<!-- 上传照片 -->
	<div class="upload-face-1">
		<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 class="sandblasted-blurred" @click="handleUploadFace">
				<span>Upload Face</span>
			</button>
			<button class="sandblasted-blurred" @click="handleFinish"><span>Finish</span></button>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.upload-face-1 {
		width: 100%;
		flex: 1;
		overflow: hidden;
		position: relative;
		color: #fff;
		> * {
			position: absolute;
		}
		> .bg {
			position: relative;
			width: 100%;
			height: auto;
			min-height: 100%;
			object-fit: cover;
		}
		> .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 {
			width: 100%;
			display: flex;
			justify-content: center;
			bottom: 19.7rem;
			> button {
				width: 40rem;
				height: 8.3rem;
				border-radius: 0.7rem;
				margin: 0 1.8rem;
			}
		}
	}
</style>
