<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 顶部用户信息区域 -->
    <view class="bg-blue-400 pt-12 pb-8 px-4 relative">
      <view class="flex items-center">
        <view class="w-10 h-10 flex items-center justify-center bg-white rounded-full">
          <wd-icon name="user-avatar" size="25" class="text-gray-5" />
        </view>
        <!-- <view v-if="userDetail.avatarUrl" class="w-16 h-16">
          <image
            :src="userDetail.avatarUrl"
            class="w-full h-full rounded-full bg-white"
            mode="aspectFill"
          />
        </view>
        <view v-else class="w-10 h-10 flex items-center justify-center bg-white rounded-full">
          <wd-icon name="user-avatar" size="30" class="text-gray-100" />
        </view> -->
        <view class="ml-4 text-white">
          <view class="text-xl font-bold">
            {{ isLogin ? userDetail.usersname || '微信用户' : '未登录' }}
          </view>
          <view class="text-sm mt-1 opacity-90" v-if="!isLogin">当前游客身份</view>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="px-4 py-2">
      <!-- 我的资料 -->
      <view class="menu-item" @click="handleNavigate('/pages-sub/user/index')">
        <view class="flex items-center">
          <wd-icon name="user" class="text-gray-500" />
          <text class="ml-3">我的资料</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>

      <!-- 优惠劵 -->
      <view class="menu-item" @click="handleNavigate('/pages/settings/index')">
        <view class="flex items-center">
          <wd-icon name="creditcard" class="text-gray-500" />
          <text class="ml-3">优惠劵</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>

      <!-- 我的商家 -->
      <view class="menu-item" @click="handleNavigate('/pages/settings/index')">
        <view class="flex items-center">
          <wd-icon name="usergroup" class="text-gray-500" />
          <text class="ml-3">我的商家</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>

      <!-- 我的订单 -->
      <view class="menu-item" @click="handleNavigate('/pages/order/index')">
        <view class="flex items-center">
          <wd-icon name="a-rootlist" class="text-gray-500" />
          <text class="ml-3">我的订单</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>

      <!-- 设置 -->
      <view class="menu-item" @click="handleNavigate('/pages/settings/index')">
        <view class="flex items-center">
          <wd-icon name="setting1" class="text-gray-500" />
          <text class="ml-3">设置</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>

      <!-- 关于 -->
      <view class="menu-item" @click="handleNavigate('/pages/about/index')">
        <view class="flex items-center">
          <wd-icon name="tips" class="text-cyan-500" />
          <text class="ml-3">关于</text>
        </view>
        <wd-icon name="arrow-right" size="18" class="text-gray-400" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { useAppStore } from '@/store/app'
import type { UserType } from '@/types/user'

const userStore = useUserStore()
const appStore = useAppStore()

// 用户信息
const userDetail = ref<Partial<UserType>>({})

const isLogin = computed(() => appStore.isLogined)

onMounted(() => {
  userDetail.value = userStore.userDetail
  console.log(userDetail.value, 'userDetail')
})

// 页面跳转
function handleNavigate(url: string) {
  uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.menu-item {
  @apply flex items-center justify-between bg-white px-4 py-4 rounded-lg mb-2;
}
</style>
