<template>
	<div class="nuic-2">
		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
		<div class="list">
			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
				<img :src="v.imageUrl" draggable="false" />
				<div class="active" v-show="v.active">
					<span>{{ v.styleName }}</span>
				</div>
			</div>
		</div>
		<div class="btns">
			<button class="next" @click="onNext">{{ $t('Nuic.next') }}</button>
			<button class="more" @click="onLoadMore">
				<span>{{ $t('Nuic.loadMore') }}</span>
				<div><svg-icon name="refresh-single" size="24" /></div>
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { GetUserStyleImages } from '@/api/user'
	const router = useRouter()
	const emit = defineEmits(['next'])
	const list = ref([])
	const pageSize = ref(8)
	const pageNum = ref(1)
	const totalPages = ref(1)
	const onNext = () => {
		const data = {
			vibe: JSON.stringify(list.value.filter((v) => v.active).map((v) => v.id))
		}
		emit('next', data)
	}
	const onLoadMore = () => {
		GetUserStyleImages({
			pageNum: pageNum.value,
			pageSize: pageSize.value
		}).then((res) => {
			if (!res) return
			list.value = res.images.map((v) => ({
				...v,
				active: false
			}))
			totalPages.value = res.totalPages
			pageNum.value++
			if (pageNum.value > totalPages.value) pageNum.value = 1
		})
	}
	onLoadMore()
</script>

<style lang="less" scoped>
	.nuic-2 {
		> .title {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 6rem;
			&:deep(b) {
				font-size: 4.8rem;
				font-family: MBold;
			}
		}
		> .list {
			margin-bottom: 13rem;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			user-select: none;
			grid-gap: 3rem;
			> div {
				width: 21.9rem;
				height: 21.9rem;
				position: relative;
				> img {
					width: 100%;
					height: 100%;
					border-radius: 1.6rem;
					box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
				}
				> .active {
					position: absolute;
					z-index: 1;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					border-radius: 1.6rem;
					border: 0.4rem solid #ff945e;
					background: linear-gradient(
						180deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 138, 140, 0.09) 68.75%,
						#f98848 100%
					);
					display: flex;
					flex-direction: column-reverse;
					> span {
						font-weight: 600;
						font-size: 2rem;
						color: #fff;
						margin-bottom: 1rem;
						text-shadow: 1px 1px 4.7px #d9692b;
						font-family: SemiBold;
					}
				}
			}
		}
		> .btns {
			> .more {
				display: flex;
				align-items: center;
				justify-content: center;
				> span {
					margin-right: 1.2rem;
				}
			}
		}
	}
</style>
