<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'
import { useOverallStore } from '@/stores'
const router = useRouter()
import { showConfirmDialog } from 'vant'
import MyEvent from '@/utils/myEvent'

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

const overallStore = useOverallStore()
// 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('/stylist/customer')
		})
		.catch(() => {})
}
const openFlow = (path:string,flowType:string)=>{
	if(flowType == 'clientId')return clickSwitchVIPID
	overallStore.setFlowType(flowType)
	router.push(path)
}

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('/stylist/index','main')">
					<img src="@/assets/images/nav1.png" alt="">
				</div>
				<div class="item" @click="openFlow('/workshop/recommended','reinventing')">
					<img src="@/assets/images/nav2.png" alt="">
				</div>
				<div class="item" @click="openFlow('/stylist/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;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
</style>