<!--
 * @Date: 2025-08-27 17:47:46
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-09-09 15:09:58
 * @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">
          <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="['w-10 h-10', item.color, 'rounded-full flex items-center justify-center mr-4']">
                <component :is="item.icon" size="20" class="text-white" />
              </view>
              <span class="flex-1 text-lg">{{ item.label }}</span>
              <Right size="20" 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 } 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'

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/Feedback/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,
});

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

const initPageData = async () => {
  // 获取用户信息
  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 || ''
    }
    // 根据用户身份更新菜单项
    if (userInfo.value.is_creator) {
      menuItems.value = allMenuItems;
    } else {
      // 非创建者保持原有的过滤逻辑
      menuItems.value = allMenuItems.filter(item => !['points', 'rewards'].includes(item.id));
    }
  }
}

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