<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'

	import { useRouter } from 'vue-router'
	const router = useRouter()
	const emit = defineEmits(['view-type'])

	onMounted(() => {
		emit('view-type', 1)
	})
	const onSave = () => {
		console.log('保存')
	}

	const onContinue = () => {
		router.push({ name: 'end' })
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="creation">
		<div class="title">Your Creation</div>
		<div class="list">
			<div class="item" v-for="i in 10" :key="i">
				<img src="@/assets/images/workshop/posture/posture_1.png" />
			</div>
		</div>
		<div class="btns">
			<button @click="onSave">Save</button>
			<button @click="onContinue">Continue</button>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.creation {
		width: 100%;
		flex: 1;
		overflow: hidden;
		background-color: #e3e3e3;
		border-radius: 1rem;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		> .title {
			font-family: satoshiRegular;
			font-size: 9rem;
			text-align: center;
			line-height: 124%;
			font-weight: 500;
			margin: 7.2rem 0;
		}
		> .list {
			flex: 1;
			overflow-y: auto;
			padding: 0 6rem;
			margin: 0 3.8rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// justify-content: space-around;
			> .item {
				width: 47%;
				height: 52.9rem;
				overflow: hidden;
				border-radius: 2rem;
				background-color: #fff;
				margin-bottom: 4rem;
				border: 0.1rem solid #000;
				> img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}
		> .btns {
			margin: 9rem 0;
			display: flex;
			justify-content: center;

			> button {
				box-sizing: content-box;
				font-family: satoshiRegular;
				width: 35rem;
				height: 8rem;
				border-radius: 1.3rem;
				background: #000;
				font-weight: 400;
				font-size: 4.2rem;
				margin: 0 3.25rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>
