<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'

// definePage({
//   style: {
//     navigationBarTitleText: '我的',
//     tabBarHidden: true, // 隐藏底部的tabBar
//   },
// })

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)
console.log(userInfo.value)
// 功能列表数据
const featureList = [
  // { name: '365会员', icon: 'vip', badge: '双11特价1元' },
  // { name: '钉瓜瓜', icon: 'message', dot: true },
  // { name: '钱包（支付宝）', icon: 'wallet' },
  // { name: '权益', icon: 'gift', badge: '26积分待领取' },
  // { name: '动态', icon: 'data-board' },
  // { name: '收藏', icon: 'star' },
  // { name: '客服与帮助', icon: 'customer-service' },
  { name: '隐私', icon: 'setting' },
]

// 将图标名称转换为文本
function getIconText(iconName: string): string {
  const iconMap: Record<string, string> = {
    'vip': '会员',
    'message': '瓜',
    'wallet': '钱',
    'gift': '权',
    'data-board': '动',
    'star': '收',
    'customer-service': '客',
    'setting': '设',
  }
  return iconMap[iconName] || iconName.charAt(0)
}
// 处理功能项点击
function handleFeature(featureName: string) {
  uni.showToast({
    title: `点击了${featureName}`,
    icon: 'none',
  })
}

// 微信小程序下登录
async function handleLogin() {
  /* #ifdef MP-WEIXIN */
  // 微信登录
  await tokenStore.wxLogin()

  /* #endif */
  /* #ifndef MP-WEIXIN */
  uni.navigateTo({
    url: `${LOGIN_PAGE}`,
  })
  /* #endif */
}

async function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        // 清空用户信息，等待logout执行完毕
        await useTokenStore().logout()
        // 执行退出登录逻辑
        uni.showToast({
          title: '退出登录成功',
          icon: 'success',
        })
        // 使用reLaunch清除所有页面栈并跳转到登录页
        uni.reLaunch({
          url: LOGIN_PAGE,
        })
      }
    },
  })
}
</script>

<template>
  <view class="profile-container">
    <!-- 头部信息区域 -->
    <view class="header-section bg-white p-4">
      <view class="user-info-flex">
        <!-- 左侧名字四方框 -->
        <view class="avatar-container">
          <text class="avatar-text">{{ userInfo.nickname ? userInfo.nickname.charAt(0) : '游' }}</text>
        </view>
        <!-- 右侧人员信息 -->
        <view class="user-details">
          <view class="username">
            {{ userInfo.nickname || '游客' }}
          </view>
          <view class="user-meta">
            <text class="user-role">{{ userInfo.username || '普通用户' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="feature-list mt-4 bg-white">
      <view v-for="(item, index) in featureList" :key="index" class="feature-item" @click="handleFeature(item.name)">
        <view class="feature-left">
          <text class="feature-icon">{{ getIconText(item.icon) }}</text>
          <text class="feature-name">{{ item.name }}</text>
        </view>
        <view class="feature-right">
          <text v-if="item.badge" class="feature-badge">{{ item.badge }}</text>
          <text v-if="item.dot" class="notification-dot" />
          <text class="arrow">></text>
        </view>
      </view>
    </view>
    <!-- 退出登录按钮 -->
    <view class="logout-section mb-8 px-4">
      <button v-if="tokenStore.hasLogin" type="primary" class="w-full" @click="handleLogout">
        退出登录
      </button>
      <button v-else type="primary" class="w-full" @click="handleLogin">
        登录
      </button>
    </view>
  </view>
</template>

<style scoped>
.profile-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header-section {
  background-color: white;
  padding: 16px;
}

.user-info-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-container {
  width: 60px;
  height: 60px;
  background-color: #1677ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.avatar-text {
  font-size: 24px;
  font-weight: 500;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.username {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.user-meta {
  display: flex;
  gap: 8px;
}

.user-role {
  font-size: 14px;
  color: #666;
}

.feature-list {
  margin-top: 16px;
  background-color: white;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.feature-item:last-child {
  border-bottom: none;
}

.feature-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f9ff;
  color: #1677ff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.feature-name {
  font-size: 16px;
  color: #333;
}

.feature-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-badge {
  font-size: 12px;
  color: #ff4d4f;
  background-color: #fff1f0;
  padding: 2px 6px;
  border-radius: 10px;
}

.notification-dot {
  width: 8px;
  height: 8px;
  background-color: #ff4d4f;
  border-radius: 50%;
}

.arrow {
  font-size: 14px;
  color: #c0c4cc;
}

.version-info {
  margin-top: 32px;
  margin-bottom: 24px;
  text-align: center;
  font-size: 14px;
  color: #909399;
}

.logout-section {
  padding: 16px;
  margin-bottom: 32px;
}

button {
  width: 100%;
}
</style>
