<template>
    <div class="flex flex-col bg-[#28BEBB]">
        <header class="flex items-start justify-end text-[#fff] h-[284rpx] pt-[20rpx] pr-[30rpx] bg-[url(/images/home/greet.png)] bg-bottom-left bg-no-repeat custom-bg-size ml-[24rpx]">
            <div class="flex items-center px-[28rpx] py-[12rpx] rounded-full bg-[#00000066]" @click="toMap">
                <MapPin />
                <div class="text-[32rpx] font-500 max-w-[200rpx] truncate">{{ address }}</div>
                <ChevronDown />
            </div>
        </header>
        <main class="rounded-[40rpx_40rpx_0_0] bg-[#F7F7F7] flex-1 px-[26rpx]">
            <div class="grid grid-cols-2 gap-[24rpx_26rpx] pt-[22rpx]">
                <img :src="item.picture" alt="服务" v-for="(item,index) in services" :key="index" class="w-full object-cover" @click="toService(item.url)">
            </div>

            <div class="rounded-[20rpx] bg-white flex items-center pt-[16rpx] pb-[18rpx] px-[20rpx] mt-[30rpx]">
                <img src="/images/home/notice.png" alt="notice" class="w-[96rpx] h-[110rpx]">
                <nut-divider direction="vertical" class="h-[88rpx]!"/>
                <ul>
                    <li v-for="(item,index) in notices" :key="index" class="flex items-center justify-left gap-[10rpx] mb-[10rpx]">
                        <div class="w-[68rpx] h-[36rpx] rounded-[8rpx] text-[#fff] text-[26rpx] flex items-center justify-center leading-[1]" :style="{backgroundColor:item.color}">{{ item.type }}</div>
                        <p>{{ item.summary }}</p>
                        <ChevronRight />
                    </li>
                </ul>
            </div>

            <div class="flex justify-center mt-[30rpx]">
                <img src="/images/home/housing-renovation.png" alt="housing" class="h-[382rpx]" @click="navigateToDecoration()">
                <div class="flex flex-col justify-between">
                    <img src="/images/home/tourism.png" alt="tourism" class="w-[328rpx]" @click="toTravel">
                    <img src="/images/home/medical.png" alt="medical" class="w-[336rpx]" @click="toJinze">
                </div>
            </div>
        </main>
        
    </div>
</template>

<script lang="ts" setup>
import { useLocationName } from '@/composables/useCity';
import { MapPin,ChevronDown,ChevronRight } from 'lucide-vue-next';
import { useRouter,useRoute } from 'vue-router';
import { useUserStore } from '@/store/user';
import { useGetUserAddressList } from "@/composables/useUserAddress";

const router = useRouter()
const route = useRoute();
const userStore = useUserStore()
const address = ref(userStore.location.address)
useGetUserAddressList();

userStore.$subscribe((_mutation,state)=>{
    address.value = state.location.address
})

const toMap = () => {
    router.push({path:'/home/address'})
}

const services = [
    {url:'/restaurant',picture:'/images/home/ordering-community.png'},
    {url:'/housekeeping',picture:'/images/home/service-housekeeping.png'},
    {url:'/health-care',picture:'/images/home/care-nurse.png'},
    {url:'/courses',picture:'/images/home/learn-course.png'},
]

const toService = (url:string) => {
    router.push({path:url})
}

const notices = [
    {color:'#F68E1D',type:'置顶',summary:'康养护理补贴进行时'},
    {color:'#41B9B7', type:"最新",summary:'老年大学书法课程已发布'}
]



const longitude = route.query.longitude as string || '121.5097620985243'
const latitude = route.query.latitude as string || '31.30658013237847'
if(route.query.longitude && route.query.latitude){
    useLocationName(longitude,latitude)
}

const toTravel = () => {
    router.push({path:'/travel'})
}

const toJinze = () => {
    router.push({path:'/jinze'})
}

const navigateToDecoration = () => {
    router.push({path:'/decoration'})
}
</script>

<style lang="scss" scoped>
.custom-bg-size{
    background-size: 230px auto;
}
</style>