<script setup lang="ts">
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	import { ref } from 'vue'
	const emit = defineEmits(['viewType'])
	import { useRouter } from 'vue-router'
	const router = useRouter()

	const inputText = ref('')
	const isLoved = ref(false)

	const onSend = () => {
		if (inputText.value === '') return
		const text = inputText.value
		inputText.value = ''
		console.log('发送消息:', text)
	}
	const onLove = () => {
		isLoved.value = !isLoved.value
	}
	const onReload = () => {
		console.log('reload')
	}
	const onDownload = () => {
		console.log('download')
	}
	const onRetry = () => {
		router.back()
	}
	const onContinue = () => {
		router.push({ name: 'creation' })
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="customize">
		<div class="title">Customize your Look!</div>
		<p class="tip">Refine your Look</p>
		<div class="input-box">
			<div class="help">?</div>
			<input
				type="text"
				v-model="inputText"
				@keyup.enter="onSend"
				placeholder="Try: “Change background to Tokyo City”"
			/>
			<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
		</div>
		<div class="card">
			<img src="@/assets/images/workshop/posture/posture_1.png" />
			<div class="select-box">
				<div class="icon"><SvgIcon name="history" size="35" /></div>
				<div class="label">History</div>
				<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
			</div>
			<div class="icons">
				<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
				<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
				<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
			</div>
		</div>
		<div class="btns">
			<button @click="onRetry">Re-try?</button>
			<button @click="onContinue">Continue</button>
		</div>
	</div>
	<footer-navigation />
</template>

<style scoped lang="less">
	.customize {
		width: 100%;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .title {
			font-family: satoshiBold;
			font-size: 8.4rem;
			text-align: center;
			line-height: 124%;
			margin-top: 3.6rem;
		}
		> .tip {
			margin-top: 0.56rem;
			font-family: satoshiRegular;
			font-size: 3.74rem;
			line-height: 124%;
		}
		> .input-box {
			margin-top: 7.3rem;
			width: 87.5rem;
			height: 8.3rem;
			border-radius: 0.5rem;
			border: 0.4rem solid #000000;
			box-sizing: content-box;
			display: flex;
			align-items: center;
			> .help {
				margin: 0 2.5rem;
				width: 4.2rem;
				height: 4.2rem;
				border-radius: 50%;
				border: 0.3rem solid #000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 3rem;
			}
			> input {
				width: 0;
				flex: 1;
				height: 100%;
				font-family: satoshiRegular;
				font-size: 3.4rem;
				color: #000;
				border: none;
				&::placeholder {
					color: #777;
				}
			}
			> .send {
				margin: 0 2.5rem;
				--svg-icon-color: #000;
			}
		}
		> .card {
			margin-top: 6.9rem;
			width: 79.8rem;
			height: 107.4rem;
			border-radius: 2rem;
			// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
			border: 0.2rem solid #d9d9d9;
			overflow: hidden;
			> * {
				position: absolute;
			}
			> img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			> .select-box {
				top: 1.8rem;
				left: 1.8rem;
				width: 30.2rem;
				height: 6.52rem;
				border-radius: 0.91rem;
				border: 0.24rem solid #000;
				display: flex;
				align-items: center;
				> .icon {
					margin: 0 1.8rem;
				}
				> .label {
					flex: 1;
					font-family: satoshiRegular;
					font-size: 2.97rem;
					color: #000;
				}
			}
			> .icons {
				bottom: 0.27rem;
				right: 0;
				height: 10rem;
				display: flex;
				align-items: center;
				justify-content: center;
				> div {
					margin-right: 1.5rem;
					width: 6.2rem;
					height: 6.2rem;
					border-radius: 1rem;
					border: 0.2rem solid #000;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		> .btns {
			margin-top: 2.5rem;
			width: 100%;
			display: flex;
			justify-content: center;
			> button {
				box-sizing: content-box;
				font-family: satoshiRegular;
				margin: 0 2rem;
				width: 35rem;
				height: 6rem;
				border-radius: 1.3rem;
				background: #000;
				font-weight: 400;
				font-size: 3.6rem;
				color: #fff;
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>
