<template>
	<section class="section-designers">
		<div class="title">Popular Designers</div>
		<div class="tip">
			Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
			distinguished works each month.
		</div>
		<div class="content">
			<img src="@/assets/images/home/designers-left.jpg" />
			<div class="box">
				<div class="intro">
					<span>{{ list[index]?.intro || '' }}</span>
					<img src="@/assets/images/home/designers-right.jpg" />
				</div>
				<div
					class="name-item"
					v-for="(v, i) in list"
					:key="i"
					:class="{ active: i === index }"
					@click="index = i"
				>
					<span class="name">{{ v.name }}</span>
					<span class="icon">
						<svg-icon name="arrow_right" size="20" />
					</span>
				</div>
			</div>
		</div>
	</section>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	const index = ref(0)
	const list = ref([
		{
			name: 'Ji-Yeon Park',
			intro:
				'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
		},
		{
			name: 'Lian Su',
			intro: '阿巴阿巴~'
		},
		{
			name: 'Céline Moreau',
			intro: '这是Céline Moreau的设计~'
		}
	])
</script>

<style lang="less">
	.section-designers {
		padding: 9rem 8rem;
		> .title {
			font-family: KaiseiOpti-Bold;
			font-size: 5.6rem;
			line-height: 6.2rem;
			text-align: center;
			margin-bottom: 1rem;
		}
		> .tip {
			font-family: KaiseiOpti-Regular;
			font-size: 2rem;
			line-height: 2.8rem;
			text-align: center;
			color: #979797;
		}
		> .content {
			margin-top: 5rem;
			border: 0.1rem solid #979797;
			border-left: none;
			border-left: none;
			border-right: none;
			box-sizing: content-box;
			--height: 45rem;
			min-height: var(--height);
			display: flex;
			> img {
				width: var(--height);
				height: var(--height);
				margin: 2.4rem 2.4rem 2.4rem 0;
			}
			> .box {
				flex: 1;
				display: flex;
				flex-direction: column;
				> .intro {
					display: flex;
					margin: 2rem 2rem 2rem 0;
					> span {
						flex: 1;
						font-family: KaiseiOpti-Regular;
						font-size: 2rem;
						line-height: 3rem;
						color: #232323;
						margin-right: 9rem;
					}
					> img {
						width: 25rem;
						height: 25rem;
					}
				}
				> .name-item {
					flex: 1;
					min-height: 5rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 0.1rem solid #7b7b7b;
					padding: 0 2.1rem;
					font-family: KaiseiOpti-Regular;
					font-size: 2.4rem;
					color: #7b7b7b;
					> .icon {
						transform: rotate(-45deg);
					}
					&.active {
						font-family: KaiseiOpti-Bold;
						color: #232323;
						background: #f6f6f6;
						> .icon {
							transform: rotate(0);
						}
					}
				}
			}
		}
	}
</style>
