<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 v-if="userInfo.avatar" class="w-16 h-16">
          <image
            :src="userInfo.avatar"
            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">
            {{ userInfo.isLogin ? userInfo.nickname : '未登录' }}
          </view>
          <view class="text-sm mt-1 opacity-90">当前游客身份</view>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="px-4 py-2">
      <!-- 我的资料 -->
      <view class="menu-item" @click="handleNavigate('/pages/settings/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/settings/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/help-center/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 } from 'vue'

// 用户信息
const userInfo = ref({
  isLogin: false,
  avatar: '',
  nickname: '',
})

// 页面跳转
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>
