<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户信息',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50 pb-20">
    <!-- 用户信息卡片 -->
    <view class="mx-4 mt-4">
      <view class="bg-white rounded-2xl shadow-sm p-4">
        <view class="flex items-center mb-4">
          <image
            class="w-20 h-20 rounded-full border-2 border-gray-100"
            :src="userInfo.avatar || defaultAvatar"
            mode="aspectFill"
          />
          <view class="ml-4 flex-1">
            <view class="flex items-center mb-2">
              <text class="text-lg font-bold text-gray-800">
                {{ userInfo.nickname || '未设置昵称' }}
              </text>
              <text class="ml-2 text-sm text-gray-500">ID: {{ userInfo.id }}</text>
            </view>
            <view class="text-sm text-gray-600">
              <text>{{ userInfo.workArea || '未设置工作地区' }}</text>
            </view>
          </view>
        </view>

        <!-- 基本信息列表 -->
        <view class="mt-4 space-y-4">
          <view class="flex justify-between items-center">
            <text class="text-gray-600">手机号</text>
            <text class="text-gray-800">{{ userInfo.phone || '未设置' }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">生日</text>
            <text class="text-gray-800">{{ userInfo.birthday || '未设置' }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">身高</text>
            <text class="text-gray-800">
              {{ userInfo.height ? `${userInfo.height}cm` : '未设置' }}
            </text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">体重</text>
            <text class="text-gray-800">
              {{ userInfo.weight ? `${userInfo.weight}kg` : '未设置' }}
            </text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">学历</text>
            <text class="text-gray-800">{{ getEducationText(userInfo.education) }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">月收入</text>
            <text class="text-gray-800">{{ getIncomeText(userInfo.monthlyIncome) }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">职业</text>
            <text class="text-gray-800">{{ userInfo.profession || '未设置' }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">住房情况</text>
            <text class="text-gray-800">{{ getHousingStatusText(userInfo.housingStatus) }}</text>
          </view>
          <view class="flex justify-between items-center">
            <text class="text-gray-600">购车情况</text>
            <text class="text-gray-800">{{ getCarOwnershipText(userInfo.carOwnership) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { UserInfo } from '@/service/login/type'
import { useUserStore } from '@/store'
const userStore = useUserStore()

const defaultAvatar = '/static/images/default-avatar.png'
const userInfo = ref<UserInfo>({} as UserInfo)

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await userStore.setUserInfo()
    // 从本地存储获取用户ID
    const userInfoStr = userStore.userInfo
    if (!userInfoStr) {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
      })
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      }, 1500)
      return
    }

    if (res.code === 200) {
      userInfo.value = res.data
    }
  } catch (error) {
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none',
    })
  }
}

// 获取学历文本
const getEducationText = (education: number) => {
  const educationMap = {
    1: '初中',
    2: '高中',
    3: '大专',
    4: '本科',
    5: '硕士',
    6: '博士',
  }
  return educationMap[education] || '未设置'
}

// 获取收入文本
const getIncomeText = (income: number) => {
  const incomeMap = {
    1: '3000以下',
    2: '3000~5000',
    3: '5000~8000',
    4: '8000~10000',
    5: '10000~20000',
    6: '20000以上',
  }
  return incomeMap[income] || '未设置'
}

// 获取住房情况文本
const getHousingStatusText = (status: number) => {
  const statusMap = {
    1: '租房',
    2: '有房',
    3: '与父母同住',
  }
  return statusMap[status] || '未设置'
}

// 获取购车情况文本
const getCarOwnershipText = (status: number) => {
  const statusMap = {
    1: '无车',
    2: '有车',
  }
  return statusMap[status] || '未设置'
}

onMounted(() => {
  getUserInfo()
})
</script>
