<!-- 用户详情页面 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '用户详情',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 用户基本信息卡片 -->
    <view class="bg-white rounded-b-3xl shadow-sm">
      <view class="p-6">
        <view class="flex items-center">
          <image
            :src="userInfo.avatar"
            mode="aspectFill"
            class="w-24 h-24 rounded-xl object-cover"
          />
          <view class="ml-4 flex-1">
            <view class="flex items-center justify-between">
              <view class="flex items-center">
                <text class="text-xl font-semibold text-gray-900">{{ userInfo.nickName }}</text>
                <text class="ml-2 text-sm text-gray-500">
                  {{ calculateAge(userInfo.birthday) }}岁
                </text>
              </view>
              <view
                v-if="!isUnlocked"
                class="px-4 py-1.5 bg-primary text-sm rounded-full flex items-center"
                :class="{ 'opacity-50': isUnlocking }"
                @tap="handleUnlock"
              >
                <text v-if="isUnlocking">解锁中...</text>
                <text v-else>解锁</text>
              </view>
              <view
                v-else
                class="px-4 py-1.5 bg-red-500 text-sm text-white rounded-full flex items-center"
                @tap="handleComplaint"
              >
                <text>投诉</text>
              </view>
            </view>
            <view class="mt-2 flex items-center space-x-2">
              <text class="text-sm text-gray-500">{{ userInfo.height }}cm</text>
              <view class="w-px h-3 bg-gray-200"></view>
              <text class="text-sm text-gray-500">{{ getEducationText(userInfo.education) }}</text>
              <view class="w-px h-3 bg-gray-200"></view>
              <text class="text-sm text-gray-500">{{ userInfo.workArea }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 详细信息列表 -->
    <view class="mt-4 bg-white rounded-3xl p-6">
      <view class="space-y-6">
        <!-- 基本信息 -->
        <view class="space-y-4">
          <text class="text-lg font-semibold text-gray-900">基本信息</text>
          <view class="grid grid-cols-2 gap-4">
            <view class="space-y-1">
              <text class="text-sm text-gray-500">职业</text>
              <view class="relative">
                <text class="text-sm text-gray-900">{{ userInfo.profession }}</text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
            <view class="space-y-1">
              <text class="text-sm text-gray-500">月收入</text>
              <view class="relative">
                <text class="text-sm text-gray-900">
                  {{ getMonthlyIncomeText(userInfo.monthlyIncome) }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
            <view class="space-y-1">
              <text class="text-sm text-gray-500">婚姻状况</text>
              <view class="relative">
                <text class="text-sm text-gray-900">
                  {{ getMaritalStatusText(userInfo.maritalStatus) }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
            <view class="space-y-1">
              <text class="text-sm text-gray-500">住房情况</text>
              <view class="relative">
                <text class="text-sm text-gray-900">
                  {{ getHousingStatusText(userInfo.housingStatus) }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 联系方式 -->
        <view class="space-y-4">
          <text class="text-lg font-semibold text-gray-900">联系方式</text>
          <view class="grid grid-cols-2 gap-4">
            <view class="space-y-1">
              <text class="text-sm text-gray-500">微信号</text>
              <view class="relative">
                <text class="text-sm text-gray-900" @tap="copyText(userInfo.wechat)">
                  {{ userInfo.wechat }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
            <view class="space-y-1">
              <text class="text-sm text-gray-500">QQ</text>
              <view class="relative">
                <text class="text-sm text-gray-900" @tap="copyText(userInfo.qq)">
                  {{ userInfo.qq }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
            <view class="space-y-1">
              <text class="text-sm text-gray-500">邮箱</text>
              <view class="relative">
                <text class="text-sm text-gray-900" @tap="copyText(userInfo.email)">
                  {{ userInfo.email }}
                </text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 其他信息 -->
        <view class="space-y-4">
          <text class="text-lg font-semibold text-gray-900">其他信息</text>
          <view class="space-y-4">
            <view class="space-y-1">
              <text class="text-sm text-gray-500">个人介绍</text>
              <view class="relative">
                <text class="text-sm text-gray-900">{{ userInfo.selfIntroduction }}</text>
                <view
                  v-if="!isUnlocked"
                  class="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center"
                >
                  <text class="text-sm text-gray-500">点击解锁查看</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { LoginResponse } from '@/service/login/type'
import { checkIsLoveAPI, unlockUserAPI } from '@/service/love'
import { onLoad } from '@dcloudio/uni-app'

// 用户信息
const userInfo = ref<LoginResponse>({} as LoginResponse)
const isUnlocked = ref(false)
const userId = ref('')
const isLoading = ref(false)
const isUnlocking = ref(false)

// 计算年龄
const calculateAge = (birthday: string | undefined) => {
  if (!birthday) return '未知'
  const birthDate = new Date(birthday)
  const today = new Date()
  let age = today.getFullYear() - birthDate.getFullYear()
  const monthDiff = today.getMonth() - birthDate.getMonth()
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--
  }
  return age
}

// 获取婚姻状况文本
const getMaritalStatusText = (status: string | undefined) => {
  const statusMap = {
    '1': '未婚',
    '2': '离异',
    '3': '丧偶',
  }
  return status ? statusMap[status as keyof typeof statusMap] || '未知' : '未知'
}

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

// 获取月收入文本
const getMonthlyIncomeText = (income: string | undefined) => {
  const incomeMap = {
    '1': '3000以下',
    '2': '3000~5000',
    '3': '5000~8000',
    '4': '8000~10000',
    '5': '10000~20000',
    '6': '20000以上',
  }
  return income ? incomeMap[income as keyof typeof incomeMap] || '未知' : '未知'
}

// 获取住房情况文本
const getHousingStatusText = (status: string | undefined) => {
  const statusMap = {
    '1': '已购房(有贷款)',
    '2': '已购房(无贷款)',
    '3': '有能力购房',
    '4': '无房',
    '5': '无房希望对方解决',
    '6': '无房希望双方解决',
    '7': '与父母同住',
    '8': '独自租房',
    '9': '与人合租',
    '10': '住单位房',
  }
  return status ? statusMap[status as keyof typeof statusMap] || '未知' : '未知'
}

// 获取用户详细信息
const getUserDetail = async () => {
  if (isLoading.value) return

  try {
    isLoading.value = true
  } catch (error) {
    console.error('获取用户信息失败:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none',
    })
  } finally {
    isLoading.value = false
  }
}

// 检查是否已解锁
const checkIsUnlocked = async () => {
  try {
    const res = await checkIsLoveAPI(userId.value)
    if (res.code === 200) {
      isUnlocked.value = res.data
    }
  } catch (error) {
    console.error('检查解锁状态失败:', error)
    uni.showToast({
      title: '检查解锁状态失败',
      icon: 'none',
    })
  }
}

// 处理解锁
const handleUnlock = async () => {
  if (isUnlocking.value) return

  try {
    isUnlocking.value = true
    const res = await unlockUserAPI(userId.value)
    if (res.code === 200) {
      isUnlocked.value = true
      uni.showToast({
        title: '解锁成功',
        icon: 'success',
      })
      // 重新获取用户信息以显示联系方式
      await getUserDetail()
    } else {
      uni.showToast({
        title: (res.data as any) || '解锁失败',
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('解锁失败:', error)
    uni.showToast({
      title: '解锁失败',
      icon: 'none',
    })
  } finally {
    isUnlocking.value = false
  }
}

// 复制文本到剪贴板
const copyText = (text: string | undefined) => {
  if (!text) return
  if (!isUnlocked.value) {
    uni.showToast({
      title: '请先解锁查看',
      icon: 'none',
    })
    return
  }

  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
      })
    },
  })
}

// 处理投诉
const handleComplaint = () => {
  uni.navigateTo({
    url: `/pages/my/complaint?id=${userId.value}`,
  })
}

onLoad((options) => {
  if (options.id) {
    userId.value = options.id
    getUserDetail()
    checkIsUnlocked()
  }
})
</script>

<style lang="scss">
@import '@/style/iconfont.css';
</style>
