<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { showConfirmDialog } from 'vant'
import MyEvent from '@/utils/myEvent'

//const props = defineProps({
//})
const emit = defineEmits([
	'view-type'
])

// const data = reactive({
// })

const clickSwitchVIPID = ()=>{
	showConfirmDialog({
		title: 'Switch VIP ID?',
		message: 'You have unsaved changes. Your progress will be lost.',
		confirmButtonText: 'Yes',
		cancelButtonText: 'Cancel',
	})
		.then(() => {
			MyEvent.emit('clear-generate-state')
			MyEvent.emit('clearAllCache')
			router.push({ name: 'customer', query: { demo: 1 } })
		})
		.catch(() => {})
}
const openFlow = (path:string,flowType:string)=>{
	if(flowType == 'clientId')return clickSwitchVIPID()
	if(flowType == 'main'){
		router.push({ name: path })
	}else{
		router.push({ name: path, query: { demo: 1 } })
	}
}

onMounted(()=>{
	emit('view-type', 1)
})
onUnmounted(()=>{
})
defineExpose({})
// const {  } = toRefs(data);
</script>
<template>
	<header-title style-type="2" />
	<div class="homeNavPage">
		<div class="title">
			Welcome Back,
			What can I help you today?
		</div>
		<div class="navBox">
			<div class="navTitle">
				Explore
			</div>
			<div class="navList">
				<div class="item" @click="openFlow('index','main')">
					<img src="@/assets/images/nav1.png" alt="">
				</div>
				<div class="item" @click="openFlow('recommended','reinventing')">
					<img src="@/assets/images/nav2.png" alt="">
				</div>
				<div class="item" @click="openFlow('index','stylist')">
					<img src="@/assets/images/nav3.png" alt="">
				</div>
				<div class="item" @click="openFlow('','clientId')">
					<img src="@/assets/images/nav4.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<footer-navigation />
</template>
<style lang="less" scoped>
	.header-title {
		--header-title-background: #fff;
		--header-title-height: 12rem !important;
	}
	.homeNavPage{
		> .title{
			padding: 0 8.4rem;
			font-family: satoshiBold;
			font-weight: 700;
			margin-top: 6.8rem;
			font-size: 9.6rem;
			line-height: 124%;
			background: #B3B3B3;
			background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), linear-gradient(
				344deg, #B3B3B2 16%, #000000 66%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}
		> .navBox{
			> .navTitle{
				padding: 0 8.4rem;
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 5.2rem;
				margin: 6.3rem 0;
			}
			> .navList{
				display: flex;
				flex-wrap: wrap;
				padding: 0 7.4rem;
				gap: 4.8rem;
				> .item{
					// width: 44.2rem;
					// height: 41.6rem;
					height: auto;
					width: calc(50% - 4.8rem / 2);
					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
		}
	}
</style>