<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: 'service', action: () => toService() },
  { title: '用户协议', icon: 'file', action: () => toUserAgreement() },
  { title: '退出登录', icon: 'logout', action: () => handleLogout() },
])

function toUserAgreement() {
  uni.navigateTo({
    url: '/pages/userAgreement',
  })
}

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

function handleLogout() {
  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'
}
function toService() {
  uni.navigateTo({
    url: '/pages/service',
  })
}
async function fetchUserInfo() {
  try {
    // 假设通过 API 获取用户信息
    getUserInfo().then((res) => {
      if (res.code === 200) {
        console.log('res', res)
        const userinfo = res.data.userInfo
        userName.value = userinfo.nickName || ''
        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)
  }
}
const safeAreaTop = ref(0)
onMounted(() => {
  const token = uni.getStorageSync('token')
  if (token) {
    isLoggedIn.value = true
    fetchUserInfo()
  }
  else {
    isLoggedIn.value = false
  }
  uni.getSystemInfo({
    success: (res) => {
      if (res.safeArea) {
        safeAreaTop.value = res.safeArea.top
      }
    },
  })
})
</script>

<template>
  <view
    class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b" style="paddingTop:44px"
  >
    <view class="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>
  </view>
</template>

<style lang="scss" scoped>
.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"
  }
  </route>
