<template>
  <div class="profile-page bg-[#f8f8f8]">
    <div
        class="pt-66 pb-14 px-26 relative w-full bg-[url('~/assets/img/profile/profile_banner.png')] bg-no-repeat bg-cover">
      <NuxtLink to="/scan" class="absolute top-17 right-14">
        <img src="~/assets/img/profile/pofile_qr.png" height="33" width="33" alt="扫一扫"/>
      </NuxtLink>
      <div class="w-335 left-20 top-66 right-20 ">
        <NuxtLink to="/profile/userInfo">
          <div class="flex flex-col w-full text-black-3">
            <div class="flex flex-row items-center">
              <van-image
                  :src="userInfo.headImageUrl || defaultAvatar"
                  class="mr-9 shrink-0"
                  width="75px"
                  height="75px"
                  radius="37.5px"
              />
              <div class="text-2xl text-[#fff] font-bold text-ellipsis text-nowrap overflow-hidden ...">
                {{ userInfo.showName }}
              </div>
            </div>
            <div class="mt-24 text-base text-[#fff] ">{{ userInfo.personalSign }}</div>
          </div>
        </NuxtLink>
        <!--        <NuxtLink to="/profile/userInfo" class="flex items-center space-x-10">
                  <van-image
                    :src="userInfo.headImageUrl || defaultAvatar"
                    class="shrink-0"
                    width="75px"
                    height="75px"
                    fit="cover"
                    radius="37.5px"
                  />
                  <span class="text-2xl flex-1 break-all font-semibold">
                    {{ userInfo.showName }}
                  </span>
                </NuxtLink>
                <div class="text-xl break-all font-semibold mt-15">
                  个性签名：{{ userInfo.personalSign || "暂未填写" }}
                </div>-->
      </div>
      <div class="mt-17 w-full grid grid-cols-4 gap-10">
        <template v-for="(tab, i) in tabList" :key="i">
          <NuxtLink :to=" tab.listType ? `/follow?listType=${tab.listType}` : null">
            <div class="text-[#fff] text-base text-center ">
              <div class="font-semibold">{{ tab.numText }}</div>
              <div class="text-sm">{{ tab.label }}</div>
            </div>
          </NuxtLink>
        </template>
      </div>
    </div>
    <div class="bg-white rounded-xl mx-20 mt-20 py-20">
      <div class="text-xl font-semibold ml-20">常用功能</div>
      <div class="grid grid-cols-4 gap-y-20 mt-20">
        <NuxtLink
            class="flex flex-col items-center"
            v-for="item in menuData"
            :to="item.to"
            :key="item.to"
        >
          <img :src="item.icon" class="w-40 h-40" alt="" srcset=""/>
          <div class="text-black-3 text-sm mt-5">{{ item.label }}</div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
import defaultAvatar from "~/assets/img/default_avatar.png";
import profile_travel_order from "~/assets/img/profile/profile_travel_order.png";
import profile_labour_order from "~/assets/img/profile/profile_labour_order.png";
import profile_travel_note from "~/assets/img/profile/profile_travel_note.png";
import profile_colection from "~/assets/img/profile/profile_colection.png";
import profile_car_order from "~/assets/img/profile/profile_car_order.png";
import profile_visa_order from "~/assets/img/profile/profile_visa_order.png";
import profile_my_comment from "~/assets/img/profile/profile_my_comment.png";

const userInfoStore = useUserInfoStore();
const {userInfo} = storeToRefs(userInfoStore);

const tabList = ref([
  {label: '互关', listType: 'friend', numText: '0'},
  {label: '关注', listType: 'follow', numText: '0'},
  {label: '粉丝', listType: 'fans', numText: '0'},
  {label: '获赞', listType: null, numText: '0'},
])
const getData = async () => {
  try {
    const [
      {data: friendsData},
      {data: concernData},
      {data: fansData},
      {data: likeData},
    ] = await Promise.all([
      request('/website/tourism/fans/getFriendsCount'),
      request('/website/tourism/fans/getMyConcern'),
      request('/website/tourism/fans/getMyFansCount'),
      request('/website/tourism/fans/getMylikeCount'),
    ])
    tabList.value[0].numText = formatNumber(friendsData);
    tabList.value[1].numText = formatNumber(concernData);
    tabList.value[2].numText = formatNumber(fansData);
    tabList.value[3].numText = formatNumber(likeData);
  } catch (e) {
  } finally {
  }
}

const menuData = [
  {
    icon: profile_travel_order,
    label: "旅游订单",
    to: "/profile/travel-orders",
  },
  {
    icon: profile_visa_order,
    label: "签证订单",
    to: "/profile/visa-orders",
  },
  {
    icon: profile_car_order,
    label: "包车订单",
    to: "/profile/car-orders",
  },
  {
    icon: profile_travel_note,
    label: "我的游记",
    to: "/profile/notes",
  },
  {
    icon: profile_colection,
    label: "我的收藏",
    to: "/profile/collection",
  },
  /*  {
      icon: profile_my_comment,
      label: "我的评论",
      to: "/profile/my-comment",
    },*/
  {
    icon: profile_my_comment,
    label: '我的消息',
    to: '/profile/my-news'
  }
];

onMounted(() => {
  getData()
  userInfoStore.getUserInfo();
});
</script>

<style lang="scss" scoped>
.profile-page {
  height: calc(100vh - 50px);
}
</style>
