<template>
  <div class="pt-70 pb-30 flex flex-col h-screen relative">
    <div @click="visible = false" class="absolute right-20 top-50">
      <span class="iconfont icon-close"></span>
    </div>
    <div class="px-20">
      <NuxtLink v-if="!token" to="/login" class="flex items-center space-x-15">
        <div class="flex items-center justify-center bg-[#d9d9d9] rounded-full h-60 w-60">
          <span class="iconfont icon-profile text-black-6" style="font-size: 30px"></span>
        </div>
        <span class="text-black-6 text-base">登录</span>
      </NuxtLink>

      <div @click="handleToProfile" v-else-if="token" class="flex items-center space-x-15">
        <van-image
          :src="userInfo.headImageUrl || defaultAvatar"
          height="60"
          width="60"
          radius="30px"
          class="shrink-0"
        ></van-image>
        <div class="flex-1 flex flex-col">
          <div class="text-black-3 text-base break-all">
            {{ userInfo.showName }}
          </div>
          <div v-if="userInfo.personalSign" class="text-black-6 text-sm">
            <span class="text-black-6">个性签名：</span>
            <span class="text-black-3 break-all">{{ userInfo.personalSign }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col mt-20 px-20 flex-1 overflow-scroll">
      <LeftMenuItem
        v-for="item in menuData"
        :title="item.title"
        :icon="item.icon"
        @click="handleClickMenu(item)"
      />
      <div v-if="token">
        <LeftMenuItem
          title="我的"
          :icon="menu_profile"
          @click="isProfileMenuExpanded = !isProfileMenuExpanded"
        >
          <template #right>
            <span
              class="iconfont icon-caret-down"
              :class="{ 'rotate-180': isProfileMenuExpanded }"
            ></span>
          </template>
        </LeftMenuItem>
        <div v-show="isProfileMenuExpanded">
          <LeftMenuItem
            v-for="item in profileMenu"
            :title="item.title"
            @click="handleClickMenu(item)"
          />
        </div>
      </div>
    </div>

    <van-button v-if="token" round="" @click="handleLogout" plain style="margin: 20px 20px">
      退出登录
    </van-button>
  </div>
</template>

<script setup>
import menu_travel_home from '~/assets/img/navbar/menu_home.png'
import menu_car from '@/assets/img/navbar/menu_car.png'
import menu_create_note from '@/assets/img/navbar/menu_create_note.png'
import menu_house from '@/assets/img/navbar/menu_house.png'
import menu_labour from '@/assets/img/navbar/menu_loubar.png'
import menu_tickets from '@/assets/img/navbar/menu_tickets.png'
import menu_travel_note from '@/assets/img/navbar/menu_travel_note.png'
import menu_travel_project from '@/assets/img/navbar/menu_travel_project.png'
import menu_visa from '@/assets/img/navbar/menu_visa.png'
import menu_profile from '@/assets/img/navbar/menu_profile.png'
import defaultAvatar from '~/assets/img/default_avatar.png'
import LeftMenuItem from './LeftMenuItem.vue'

const visible = defineModel('visible')

const route = useRoute()

const authStore = useAuthStore()
const { token } = storeToRefs(authStore)

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

const menuData = ref([])

const writeNoteMenu = {
  title: '写游记',
  icon: menu_travel_note,
  to: '/note-create'
}

const fixedMenuData = [
  {
    title: '首页',
    icon: menu_travel_home,
    to: '/'
  },
  {
    title: '旅行游记',
    icon: menu_create_note,
    to: '/travel-notes'
  },
  {
    title: '旅行项目',
    icon: menu_travel_project,
    to: '/travel-projects'
  },
  {
    title: '签证居留',
    icon: menu_visa,
    to: '/visa'
  },
  {
    title: '全球包车',
    icon: menu_car,
    to: '/car'
  },
  {
    title: '房屋租售',
    icon: menu_house,
    to: '/house'
  }
]

const profileMenu = [
  {
    title: '旅游订单',
    to: '/profile/travel-orders'
  },
  {
    title: '签证订单',
    to: '/profile/visa-orders'
  },
  {
    title: '包车订单',
    to: '/profile/car-orders'
  },
  {
    title: '我的游记',
    to: '/profile/notes'
  },
  {
    title: '我的收藏',
    to: '/profile/collection'
  },

  {
    title: '我的消息',
    to: '/profile/my-news'
  }
]

const isProfileMenuExpanded = ref(true)

watch(
  token,
  (val) => {
    if (!val) {
      menuData.value = fixedMenuData
    } else {
      userInfoStore.getUserInfo()

      menuData.value = [...fixedMenuData.slice(0, 1), writeNoteMenu, ...fixedMenuData.slice(1)]
    }
  },
  {
    immediate: true
  }
)

function handleClickMenu(item) {
  visible.value = false
  navigateTo({
    path: item.to
  })
}

function handleToProfile() {
  visible.value = false
  navigateTo({
    path: '/profile'
  })
}

function handleLogout() {
  try {
    request('/website/web/doLogout', { method: 'post' })
  } finally {
    authStore.cleanToken()
    navigateTo('/')
    visible.value = false
  }
}
</script>

<style lang="scss" scoped></style>
