<script setup>
import { getUserInfo } from '@/api/apis'

const userName = ref('点击登录')
const userAvatar = ref('https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180')
const isLoggedIn = ref(false)
const features = ref([
  { title: '我的订单', icon: 'phone', action: () => handleFeatureClick('Account Settings') },
  { title: '我的报告', icon: 'phone', action: () => handleFeatureClick('My Orders') },
  { title: '联系客服', icon: 'phone', action: () => handleFeatureClick('Help & Support') },
  { title: '用户协议', icon: 'phone', action: () => handleFeatureClick('Privacy Policy') },
  { title: '退出登录', icon: 'phone', action: () => handleLogout() },
])

function handleFeatureClick(feature) {
  if (!isLoggedIn.value) {
    redirectToLogin()
    return
  }
  console.log(`Clicked on: ${feature}`)
}

function redirectToLogin() {
  console.log('jabhdsasdbhj')
  uni.reLaunch({ url: '/pages/login' }) // 使用 uni-app 路由跳转到登录页
}

function handleLogout() {
  console.log('asdasd')
  uni.removeStorageSync('token')
  isLoggedIn.value = false
  userName.value = '点击登录'
  userAvatar.value = 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180'
}

async function fetchUserInfo() {
  try {
    // 假设通过 API 获取用户信息
    getUserInfo().then((res) => {
      if (res.code === 200) {
        console.log('res', res)
        const userinfo = res.data.userInfo
        userName.value = userinfo.userName || '182****1590'
        userAvatar.value = userinfo.userAvatar || 'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180'
        isLoggedIn.value = true
      }
    })
  }
  catch (error) {
    console.error('获取用户信息失败', error)
  }
}

onMounted(() => {
  const token = uni.getStorageSync('token')
  if (token) {
    isLoggedIn.value = true
    fetchUserInfo()
  }
  else {
    isLoggedIn.value = false
  }
})
</script>

<template>
  <view class="my-page min-h-screen flex flex-col p-4">
    <view
      class="profile-section mb-4 flex items-center gap-4 rounded-md bg-white p-4 shadow-md"
      @click="!isLoggedIn ? redirectToLogin() : null"
    >
      <wd-img :src="userAvatar" round width="100" height="100" />
      <view>
        <h2 class="text-lg font-bold">
          {{ isLoggedIn ? userName : '点击登录' }}
        </h2>
      </view>
    </view>

    <Wdviewider />

    <view class="features-section flex flex-col gap-2">
      <WdCell
        v-for="(feature, index) in features" :key="index" :title="feature.title" :icon="feature.icon"
        class="feature-item rounded-md bg-white p-3 shadow-sm" clickable @click="feature.action"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.my-page {}

.profile-section {
  @apply flex items-center gap-4 p-4 bg-white rounded-md shadow-md mb-4;
}

.features-section {
  @apply flex flex-col gap-2;
}

.feature-item {
  @apply bg-white p-3 rounded-md shadow-sm;
}
</style>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
