<script setup lang="ts">
	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 clickNext = () => {
		generateStore.updatePhotoInfo({})
		router.push({ name: 'uploadFace', query: { demo: 1 } })
	}
</script>

<template>
	<!-- 上传照片 -->
	<div class="upload-face-1">
		<img src="@/assets/images/workshop/bg/upload_bg.png" class="bg" />
		<div class="content">
			<div class="texts">
				<p class="title">Recommended<br />Try-on</p>
				<p class="desc">Come and try face swapping!</p>
			</div>
			<div class="image">
				<img src="../../assets/images/workshop/template.png" />
			</div>
			<button class="sandblasted-blurred" @click="clickNext"><span>Next</span></button>
		</div>
	</div>
</template>

<style scoped lang="less">
	.upload-face-1 {
		width: 100%;
		flex: 1;
		overflow: hidden;
		position: relative;
		color: #fff;
		> .bg {
			position: absolute;
			width: 100%;
			height: auto;
			min-height: 100%;
			object-fit: cover;
		}
		> .content {
			margin-top: 12rem;
			text-align: center;
			> .texts {
				// left: 0;
				width: 100%;
				// padding: 9.9rem 0 0 7.2rem;
				> .title {
					font-family: 'satoshiBold';
					font-size: 11rem;
					line-height: 124%;
				}
				> .desc {
					font-family: 'satoshiMedium';
					font-size: 4rem;
					margin-top: 4rem;
					line-height: 132%;
				}
			}
			> .image {
				margin: 4.9rem auto 9.5rem;
				width: 65.3rem;
				height: 86.5rem;
				border-radius: 1rem;
				backdrop-filter: blur(5.27rem);
				-webkit-backdrop-filter: blur(5.27rem);
				-moz-backdrop-filter: blur(5.27rem);
				-ms-backdrop-filter: blur(5.27rem);
				-o-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: cover;
				}
			}
			> button {
				width: 40rem;
				height: 8.3rem;
				border-radius: 0.7rem;
			}
		}
	}
</style>
