<template>
  <div class="bg-gradient-to-b from-[#c9eae9] to-[#F5F5F5] to-40%">
    <div class="flex justify-between px-[40rpx] pt-[60rpx]">
      <div class="flex items-center">
        <img src="/images/mine/avatar.png" alt="avatar" class="w-[140rpx] h-[140rpx] rounded-full border-solid border-[2rpx] border-[#fff] mr-[20rpx]" />
        <div class="flex flex-col">
          <div class="text-[48rpx] font-600">热爱运动的张</div>
          <span class="text-[#666] text-[32rpx] font-400 mt-[20rpx]">{{ userStore.getAddress }}</span>
        </div>
      </div>
      <div class="flex flex-col justify-center items-center" @click="navigateToUserInfo">
        <SquarePen class="w-[48rpx] h-[48rpx] mb-[10rpx]" />
        <span class="text-[30rpx] font-400">编辑</span>
      </div>
    </div>

    <div class="rounded-[20rpx] bg-white p-[30rpx] mt-[60rpx] mx-[30rpx]">
      <div class="flex items-center justify-between">
        <span class="text-[36rpx] font-500">订单管理</span>
        <div class="flex items-center text-[28rpx] text-[#666]" @click="navigateToOrder">
          全部订单
          <ChevronRight />
        </div>
      </div>
      <ul class="grid grid-cols-4 mt-[30rpx]">
        <li v-for="(item,index) in subMenus" :key="index" class="flex flex-col items-center" @click="navigateToPage(item.url)">
          <img :src="item.icon" alt="icon" class="w-[88rpx] h-[88rpx] mb-[10rpx]" />
          <span class="text-[30rpx] font-400">{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <div class="rounded-[20rpx] bg-white p-[30rpx] mt-[60rpx] mx-[30rpx]">
        <span class="text-[36rpx] font-500">全部功能</span>
        <ul>
            <li class="flex items-center justify-between py-[32rpx] border-b-[#EDEDED] border-b-solid border-b-[1rpx]" @click="toManageAddress">
                <div class="flex items-center">
                    <img src="/images/map/address-choose.png" alt="icon" class="w-[56rpx] h-[56rpx] mr-[20rpx]">
                    <span class="text-[32rpx] font-500">收货地址</span>
                </div>
                <ChevronRight />
            </li>

            <li class="flex items-center justify-between py-[32rpx] border-b-[#EDEDED] border-b-solid border-b-[1rpx]" @click="toNotify">
                <div class="flex items-center">
                    <img src="/images/mine/sound.png" alt="icon" class="w-[56rpx] h-[56rpx] mr-[20rpx]">
                    <span class="text-[32rpx] font-500">消息中心</span>
                </div>
                <div class="flex items-center">
                    <div class="w-[44rpx] h-[44rpx] rounded-full bg-[#F03B25] text-white flex items-center justify-center ">{{ noticeList.length }}</div>
                    <ChevronRight />
                </div>
            </li>

            <li class="flex items-center justify-between py-[32rpx]">
                <div class="flex items-center">
                    <img src="/images/mine/message.png" alt="icon" class="w-[56rpx] h-[56rpx] mr-[20rpx]">
                    <span class="text-[32rpx] font-500">联系客服</span>
                </div>
                <div class="flex items-center">
                    <a class="text-[32rpx] text-[#999] font-400" :href="`tel:${phoneNumber}`">{{phoneNumber}}</a>
                    <ChevronRight />
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { SquarePen, ChevronRight } from "lucide-vue-next";
  import { useRouter } from "vue-router";
  import { useGetNoticeList } from "@/composables/useNotice";
  import { useUserStore } from "@/store/user";

  const userStore = useUserStore();

  const subMenus = [
    { name: "社区点餐", icon: "/images/mine/restaurant.png",url:'/restaurant' },
    { name: "家政服务", icon: "/images/mine/house.png" ,url:'/housekeeping'},
    { name: "康养护理", icon: "/images/mine/nurse.png" ,url:'/health-care'},
    { name: "课程学习", icon: "/images/mine/education.png" ,url:'/courses'},
  ];

  const phoneNumber = `400-810-9999`
  const router = useRouter();

  const toManageAddress = () => {
    router.push({path:'/mine/address'})
  }

  const toNotify = () => {
    router.push({path:'/mine/notice'})
  }

  const { noticeList } = useGetNoticeList()

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

  const navigateToOrder = () => {
    router.push({path:'/mine/orders'})
  }

  const navigateToUserInfo = () => {
    router.push({path:'/mine/user-info'})
  }
</script>
