<!--
 * @Date: 2025-08-27 17:47:46
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-22 15:36:09
 * @FilePath: /lls_program/src/pages/Profile/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="min-h-screen flex flex-col bg-white">
    <!-- Blue header background -->
    <view class="bg-blue-500 h-40 absolute w-full top-0 left-0 z-0"></view>
    <!-- Content -->
    <view class="relative z-10 flex-1 pb-20">
      <!-- User profile section -->
      <view class="px-4 pt-8 pb-6 flex items-center justify-between">
        <view class="flex items-center">
          <image :src="userInfo.avatarUrl || defaultAvatar" alt="User avatar" mode="aspectFill" class="w-16 h-16 rounded-full border-2 border-white" />
          <view class="ml-4">
            <h1 class="text-xl font-bold text-white">{{ userInfo.nickName }}</h1>
          </view>
        </view>
        <view v-if="userInfo?.birth_date" @tap="goToEditProfile" class="text-white text-sm">
          <span>编辑</span>
        </view>
      </view>
      <!-- Menu items -->
      <view class="bg-white rounded-t-3xl px-4 py-5">
        <view class="space-y-px">
          <template v-for="(item, index) in menuItems" :key="item.id">
            <view class="flex items-center py-4 cursor-pointer" @click="item.onClick">
              <view :class="[iconContainerSize, item.color, 'rounded-full flex items-center justify-center mr-4']">
                <component :is="item.icon" :size="iconSize" class="text-white" />
              </view>
              <span :class="['flex-1', textSize]">{{ item.label }}</span>
              <Right :size="arrowIconSize" class="text-gray-400" />
            </view>
            <view v-if="index < menuItems.length - 1" class="h-px bg-gray-100" />
          </template>
        </view>
      </view>
    </view>
    <BottomNav />
  </view>
</template>

<script setup>
import { ref, shallowRef, computed, onMounted } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue';
import { My, Shop3, Cart, Message, Tips, Right, Ask } from '@nutui/icons-vue-taro';
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
// 获取接口信息
import { getUserProfileAPI } from '@/api/user'
import { getMyFamiliesAPI } from '@/api/family'

// 系统信息
const systemInfo = ref({});

/**
 * 获取系统信息
 */
const getSystemInfo = () => {
  try {
    const info = Taro.getWindowInfo();
    systemInfo.value = info;
  } catch (error) {
    console.error('获取系统信息失败:', error);
  }
};

/**
 * 检测是否为 iPad 类型设备
 */
const isTabletDevice = computed(() => {
  if (!systemInfo.value.screenWidth) {
    return false;
  }

  const { screenWidth, screenHeight } = systemInfo.value;
  const screenRatio = screenWidth / screenHeight;

  // iPad 类型设备通常屏幕比例在 0.7-0.8 之间（4:3 约为 0.75）
  // 普通手机设备比例通常在 0.4-0.6 之间
  return screenRatio > 0.65;
});

/**
 * 计算图标容器尺寸类名
 */
const iconContainerSize = computed(() => {
  // iPad 类型设备使用更大的容器尺寸
  return isTabletDevice.value ? 'w-14 h-14' : 'w-10 h-10';
});

/**
 * 计算图标尺寸
 */
const iconSize = computed(() => {
  // iPad 类型设备使用更大的图标尺寸
  return isTabletDevice.value ? '48' : '20';
});

/**
 * 计算文字尺寸类名
 */
const textSize = computed(() => {
  // iPad 类型设备使用更大的文字尺寸
  return isTabletDevice.value ? 'text-xl' : 'text-lg';
});

/**
 * 计算右箭头图标尺寸
 */
const arrowIconSize = computed(() => {
  // iPad 类型设备使用更大的箭头图标尺寸
  return isTabletDevice.value ? '24' : '20';
});

const allMenuItems = [
  {
    id: 'family',
    icon: My,
    label: '我的家庭',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/MyFamily/index' }),
  },
  {
    id: 'points',
    icon: Shop3,
    label: '积分明细',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/PointsDetail/index' })
  },
  {
    id: 'rewards',
    icon: Cart,
    label: '我的兑换',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/MyRewards/index' })
  },
  {
    id: 'feedback',
    icon: Message,
    label: '意见反馈',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/FeedbackList/index' })
  },
  {
    id: 'agreement',
    icon: Tips,
    label: '用户协议',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/UserAgreement/index' })
  },
  {
    id: 'privacy',
    icon: Ask,
    label: '隐私政策',
    color: 'bg-blue-500',
    onClick: () => Taro.navigateTo({ url: '/pages/PrivacyPolicy/index' })
  }
];

// 初始化菜单项，先显示除了'points'和'rewards'之外的菜单
const menuItems = shallowRef(allMenuItems.filter(item => !['points', 'rewards'].includes(item.id)));

const userInfo = ref({
  nickName: '',
  avatarUrl: '',
  is_creator: false,
  has_family: false, // 新增字段：用户是否加入了家庭
});

const goToEditProfile = () => {
  Taro.navigateTo({ url: '/pages/EditProfile/index' });
};

const initPageData = async () => {
  // 获取系统信息
  getSystemInfo();

  // 获取用户信息
  const { code, data } = await getUserProfileAPI()
  if (code) {
    userInfo.value = {
      nickName: data?.user?.nickname || '临时用户',
      avatarUrl: data?.user?.avatar_url || '',
      is_creator: data?.user?.is_creator || false,
      birth_date: data?.user?.birth_date || '',
      has_family: false // 初始化为false
    }

    // 检查用户是否加入了家庭
    try {
      const familyResponse = await getMyFamiliesAPI();
      if (familyResponse.code && familyResponse.data && familyResponse?.data?.families?.length > 0) {
        userInfo.value.has_family = true;
      }
    } catch (error) {
      console.error('获取家庭信息失败:', error);
      userInfo.value.has_family = false;
    }

    // 根据用户身份和家庭状态更新菜单项
    if (userInfo.value.is_creator) {
      // 创建者显示所有菜单项
      menuItems.value = allMenuItems;
    } else {
      // 非创建者过滤掉积分和兑换相关菜单
      let filteredItems = allMenuItems.filter(item => !['points', 'rewards'].includes(item.id));

      // 如果用户没有加入家庭，也过滤掉family菜单项
      if (!userInfo.value.has_family) {
        filteredItems = filteredItems.filter(item => item.id !== 'family');
      }

      menuItems.value = filteredItems;
    }
  }
}

useDidShow(() => {
  initPageData();
});
</script>