<template>
	<div class="nuic">
		<img class="logo" src="@/assets/images/logo-2.png" />
		<div class="header" :class="{ loading }">
			<div class="close" @click="onClose">
				<svg-icon name="close-border" size="33" />
			</div>

			<div
				class="item"
				v-for="(v, i) in list"
				:key="i"
				:state="active === i ? 1 : active > i ? 0 : 2"
			>
				<img
					v-show="i === active"
					src="@/assets/images/nuic/nav-active.png"
					draggable="false"
				/>
			</div>
		</div>
		<component :class="{ loading }" class="view" :is="list[active]" @next="onNext" />
		<div class="bg" :class="{ loading }">
			<div class="bg-3"></div>
			<div class="bg-2"></div>
			<div class="bg-1"></div>
		</div>
		<img class="loading-img" :class="{ loading }" src="@/assets/images/nuic/xiang.png" />
		<div class="loading-tip" :class="{ loading }">{{ $t('Nuic.loadingTip') }}</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, markRaw } from 'vue'
	import nuic1 from './nuic-1.vue'
	import nuic2 from './nuic-2.vue'
	import nuic3 from './nuic-3.vue'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const active = computed(() => Number(route.query.index || 0))
	const list = markRaw([nuic1, nuic2, nuic3])
	const loading = ref(false)
	const onClose = () => {
		router.push({ name: 'mainInput' })
	}
	const onNext = () => {
		const index = active.value + 1
		if (index < list.length) {
			router.push({ query: { index } })
		} else {
			loading.value = true
			setTimeout(() => {
				router.push({ name: 'mainInput' })
			}, 5000)
		}
	}
</script>

<style lang="less" scoped>
	.nuic {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		// background-color: #f8f7f5;
		// align-items: center;
		// justify-content: center;
		> * {
			transition: opacity 0.5s ease-in-out;
		}
		> *:not(.bg):not(.loading-img):not(.loading-tip) {
			z-index: 10;
			opacity: 1;
			&.loading {
				opacity: 0;
				z-index: -1;
			}
		}
		> .logo {
			position: absolute;
			top: 2.7rem;
			left: 3.6rem;
			width: auto;
			height: 2.4rem;
		}
		> .header {
			margin-top: 5rem;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 11.2rem;
			> * {
				margin-right: 3rem;
				&:last-child {
					margin-right: 0;
				}
			}
			> .close {
				margin-bottom: -0.65rem;
				cursor: pointer;
			}
			> .item {
				width: 30.2rem;
				&[state='1'] {
					height: 100%;
				}
				&[state='2'],
				&[state='0'] {
					height: 2rem;
					border-radius: 2rem;
				}
				&[state='0'] {
					background: linear-gradient(90deg, #ff8ca2 0%, #ffa497 49.04%, #ff8d55 100%);
				}
				&[state='2'] {
					background-color: #dfdfdf;
				}
				> img {
					width: 100%;
					height: auto;
				}
			}
		}
		&:deep(.view) {
			margin-top: 5rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #252727;
			text-align: center;
			> .btns {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				> button {
					width: 29.6rem;
					height: 6rem;
					border-radius: 6rem;
					border: none;
					outline: none;
					font-size: 2.4rem;
					font-weight: 600;
					color: #252727;
					cursor: pointer;
					margin-right: 3.4rem;
					background-color: #fff;
					font-family: SemiBold;
					&:last-child {
						margin-right: 0;
					}
					&.skip {
						color: #8d8d8d;
					}
					&:active {
						opacity: 0.8;
					}
				}
			}
		}
		> .loading-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 14.4rem;
			height: auto;
			opacity: 0;
			&.loading {
				opacity: 1;
			}
		}
		> .loading-tip {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 25.2rem;
			text-align: center;
			font-family: Regular;
			font-size: 3rem;
			color: #585858;

			opacity: 0;
			&.loading {
				opacity: 1;
			}
		}
		> .bg {
			position: absolute;
			// border: 1px solid #000;
			&,
			& > * {
				transition: all 0.5s ease-in-out;
				animation-delay: 0.5s;
				animation-duration: 6s;
				animation-timing-function: linear;
				animation-iteration-count: infinite;
			}
			> div {
				position: absolute;
				border-radius: 50%;
			}
			> div.bg-1 {
				background: linear-gradient(
					130.72deg,
					rgba(242, 171, 180, 0.2) 29.52%,
					rgba(234, 133, 200, 0.2) 39.73%,
					rgba(238, 64, 173, 0.2) 55.81%,
					rgba(234, 133, 158, 0.2) 69.59%,
					rgba(242, 171, 180, 0.2) 82.61%
				);
			}
			> div.bg-2 {
				background: conic-gradient(
					from 94.36deg at 71.77% 41.01%,
					rgba(242, 171, 180, 0.2) 0deg,
					rgba(255, 97, 117, 0.2) 100.75deg,
					rgba(254, 59, 83, 0.2) 179.32deg,
					rgba(255, 97, 117, 0.2) 252deg,
					rgba(242, 171, 180, 0.2) 360deg
				);
			}
			> div.bg-3 {
				background: linear-gradient(
					87.58deg,
					#f1c191 23.02%,
					rgba(255, 178, 91, 0.97) 35.36%,
					#ff8e69 56.32%,
					#f2ad7e 67.34%,
					#ffe8c8 82.74%
				);
			}
		}
		> .bg.loading {
			width: 47.873rem;
			height: 46.704rem;
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
			animation-name: bg;
			> img {
				opacity: 1;
			}
			> div.bg-1 {
				animation-name: bg_1;
				width: 34.164rem;
				height: 34.92rem;
				left: 2rem;
				top: 5rem;
				filter: blur(11.5rem);
				transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
			}
			> div.bg-2 {
				animation-name: bg_2;
				width: 25.8rem;
				height: 25.8rem;
				left: 17rem;
				top: 4rem;
				filter: blur(5.48507rem);
				transform: matrix(0.4, -0.92, 0.91, 0.42, 0, 0);
			}
			> div.bg-3 {
				animation-name: bg_3;
				width: 25.8rem;
				height: 25.8rem;
				left: 10.4rem;
				top: 17.7rem;
				filter: blur(5.48507rem);
				transform: matrix(-0.97, -0.23, 0.25, -0.97, 0, 0);
			}
		}
		> .bg:not(.loading) {
			width: 127rem;
			height: 72.6rem;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%) translateY(80%);
			> div.bg-1 {
				width: 48.4rem;
				height: 57.2rem;
				top: 2.3rem;
				left: 0rem;
				transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
				filter: blur(11.5rem);
			}
			> div.bg-2 {
				width: 44.6rem;
				height: 56.8rem;
				left: 56.6rem;
				top: 0rem;
				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
				filter: blur(12.927rem);
			}
			> div.bg-3 {
				width: 79.958rem;
				height: 28.1rem;
				left: 11.724rem;
				top: 12.353rem;
				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
				filter: blur(13.17rem);
			}
		}

		@keyframes bg {
			15% {
				width: 56.647rem;
				height: 51.794rem;
			}
			50% {
				width: 46.179rem;
				height: 36.712rem;
			}
			75% {
				width: 52.947rem;
				height: 46.894rem;
			}
		}

		@keyframes bg_1 {
			15% {
				width: 34.2rem;
				height: 34.9rem;
				left: 3rem;
				top: 12.7rem;
			}
			50% {
				width: 27.321rem;
				height: 27.926rem;
				left: 16.7rem;
				top: 3.6rem;
			}
			75% {
				width: 34.164rem;
				height: 34.92rem;
				left: 2.5rem;
				top: 8rem;
			}
		}
		@keyframes bg_2 {
			15% {
				width: 25.8rem;
				height: 25.8rem;
				left: 25.5rem;
				top: 5rem;
				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
			}
			50% {
				width: 25.8rem;
				height: 25.8rem;
				left: 4rem;
				top: 4rem;
				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
			}
			75% {
				width: 25.8rem;
				height: 25.8rem;
				left: 21.8rem;
				top: 5rem;
				transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
			}
		}
		@keyframes bg_3 {
			15% {
				width: 25.8rem;
				height: 25.8rem;
				left: 14.603rem;
				top: 11.784rem;
				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
			}
			50% {
				width: 25.8rem;
				height: 25.8rem;
				left: 10.701rem;
				top: 5.283rem;
				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
			}
			75% {
				width: 25.8rem;
				height: 25.8rem;
				left: 12.303rem;
				top: 6.884rem;
				transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
			}
		}
	}
</style>
