<template>
	<div class="nuic-1">
		<img src="@/assets/images/nuic/nuic-1-bg.png" />
		<p class="hi">{{ $t('Nuic.hiName', { name }) }}</p>
		<p class="title" v-html="$t('Nuic.nuic1Title')"></p>
		<p class="tip" v-html="$t('Nuic.nuic1Tip')"></p>
		<div class="btns">
			<button class="next" @click="emit('next')">{{ $t('Nuic.letsGo') }}</button>
			<button class="skip" @click="onSkip">{{ $t('Nuic.skip') }}</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import { useUserInfoStore } from '@/stores'
	import { useRouter } from 'vue-router'
	const userInfoStore = useUserInfoStore()
	const router = useRouter()
	const emit = defineEmits(['next'])
	const name = computed(() => userInfoStore.state.userInfo?.username || '')
	const onSkip = () => {
		router.push({ name: 'mainInput' })
	}
</script>

<style lang="less" scoped>
	.nuic-1 {
		> img {
			width: 44.7rem;
			height: auto;
			margin-bottom: 4.8rem;
		}
		> .hi {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 1rem;
		}
		> .title {
			font-weight: 500;
			font-size: 4rem;
			margin-bottom: 2rem;
			&:deep(b) {
				font-size: 4.8rem;
				font-family: MBold;
			}
		}
		> .tip {
			font-weight: 400;
			font-size: 2rem;
			color: #585858;
			margin-bottom: 8.7rem;
			font-family: Regular;
		}
	}
</style>
