<template>
  <view class="my-page">
    <!-- 登录头部区 -->
    <view v-if="userStore.isLogin" class="section-card user-header" hover-class="card-hover" @tap="goMyPersonalData">
      <image :src="userInfo.avatar ||
        'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260526/默认头像_1779779926983.png'
        " mode="aspectFill" class="avatar" />
      <view class="info-content">
        <view class="name-row">
          <text class="nickname">{{ userInfo.nickname || '微信用户' }}</text>
          <text v-if="memberLevelName" class="tag">{{ memberLevelName }}</text>
        </view>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#000" />
      </view>
    </view>

    <!-- 未登录引导区 -->
    <view v-else class="section-card login-guide-box">
      <view class="guide-txt">
        <text class="title">欢迎加入鸿星运动</text>
        <text class="desc">登录后即可享受课程预约及资产管理</text>
      </view>
      <button class="login-btn" hover-class="btn-hover" @click="goLogin">立即登录</button>
    </view>

    <!--  -->
    <view class="vip-banner" hover-class="opacity-hover" @click="goAddVip">
      <view class="vip-info">
        <uni-icons type="vip-filled" size="22" color="#f1c40f" />
        <text class="vip-text">
          {{ userInfo.deposit === 1 ? '鸿星·尊享会员 | 已开通' : '鸿星·会员 | 开通只需押金¥199' }}
        </text>
      </view>
      <view class="vip-btn">{{ userInfo.deposit === 1 ? '查看权益' : '立即开通' }}</view>
    </view>

    <!-- 课程状态快速入口 -->
    <view class="section-card quick-entry">
      <view v-for="entry in quickEntryConfig" :key="entry.type" class="entry-item" hover-class="opacity-hover"
        @click="handleQuickEntry(entry.type)">
        <text class="num">{{ userInfo[entry.key] || 0 }}</text>
        <text class="label">{{ entry.label }}</text>
      </view>
    </view>

    <!-- 广告位 -->
    <view class="banner-box" @click="goJiamen">
      <image src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/4_1773627891703.png"
        mode="aspectFill" class="banner-img" />
    </view>

    <!-- 核心应用区 -->
    <view class="section-card apply-section">
      <view v-for="(item, index) in APPLY_CONFIG_LIST" :key="index" class="apply-item"
        @click="authNavigateTo(item.url)">
        <view class="icon-bg">
          <image :src="item.icon" class="img" mode="aspectFit" />
        </view>
        <text class="text">{{ item.text }}</text>
      </view>
    </view>

    <!-- 资产账户网格区 -->
    <view v-if="userStore.isLogin" class="section-card">
      <view class="account-grid">
        <view v-for="(acc, idx) in accountConfig" :key="idx" class="account-item" @click="authNavigateTo(acc.url)">
          <text class="acc-lab">{{ acc.label }}</text>
          <text class="acc-val">
            {{ formatAccountValue(userInfo[acc.key], acc.isFloat) }}
            <text v-if="acc.unit" class="unit">{{ acc.unit }}</text>
          </text>
        </view>
      </view>
    </view>

    <!-- 功能矩阵九宫格 -->
    <view class="section-card icon-grid-box">
      <view class="icon-grid">
        <view v-for="(item, index) in FUNCTION_CONFIG_LIST" :key="index" class="icon-item"
          @click="handleGridItemClick(item)">
          <view class="icon-img-wrap">
            <image :src="item.icon" mode="aspectFit" class="icon-img" />

            <view v-if="item.text === '订单记录' && userInfo.orderRecordMark" class="badge">
              {{ userInfo.orderRecordMark }}
            </view>
          </view>
          <text class="icon-text">{{ item.text }}</text>

          <button v-if="item.text === '联系客服'" open-type="contact" class="mp-contact-overlay-btn" />
        </view>
      </view>
    </view>

    <!-- 设置区 -->
    <view v-if="userStore.isLogin" class="section-card">
      <view class="setting-item" @click="authNavigateTo('/pages5/pages/user/wode-shezhi')">
        <text class="setting-text">个人设置</text>
        <uni-icons type="right" size="14" color="#E0E0E0" />
      </view>
      <view class="setting-item" @click="authNavigateTo('/pages5/pages/user/wode-yinsishezhi')">
        <text class="setting-text">隐私中心</text>
        <uni-icons type="right" size="14" color="#E0E0E0" />
      </view>
    </view>

    <Tabbar />
    <TrainingFloating />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import UserApi from '@/sheep/api/member/user';
import MemberApi from '@/sheep/api/member/member';
import useUserStore from '@/sheep/store/user';
import { onShow } from '@dcloudio/uni-app';
import TrainingFloating from '@/pages/TrainingFloating.vue'
import { useTrainingStore } from '@/sheep/store/trainingStore';
const trainingStore = useTrainingStore();


// 响应式数据挂载
const userStore = useUserStore();
const userInfo = ref({});
const memberLevelName = ref('');

// 固定的 UI 配置
const APPLY_CONFIG_LIST = [];

const FUNCTION_CONFIG_LIST = [];

// 课程计数状态配置映射
const quickEntryConfig = [
  { type: 1, key: 'courseNum', label: '待上课' },
  { type: 2, key: 'courseWaitNum', label: '等待中' },
  { type: 3, key: 'courseEvaluationWaitNum', label: '历史课程' },
];

// 资产账户字段清洗配置映射 (对应接口数据类型：number 与 integer)
const accountConfig = [];

/**
 * JSDoc 核心资产数值洗涤函数
 * @param {number|undefined} val 原始金钱/数量值
 * @param {boolean} isFloat 是否需要保留两位小数
 * @returns {string|number} 格式化后的安全渲染字符串
 */
const formatAccountValue = (val, isFloat) => {
  if (val === undefined || val === null) return isFloat ? '0.00' : 0;
  return isFloat ? Number(val).toFixed(2) : Math.floor(val);
};

/**
 * 路由守卫拦截转发
 * @param {string} url 目标绝对/相对地址
 */
const authNavigateTo = (url) => {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url,
    fail: (err) => console.error(`[Router] 页面跳转失败 ${url}: `, err),
  });
};

/**
 * 统一处理功能网格的点击分发
 * @param {Object} item 节点配置项
 */
const handleGridItemClick = (item) => {
  if (item.text === '联系客服') {
    // #ifndef MP-WEIXIN
    // 兜底非微信小程序平台（如H5、App），可以正常走原来的普通客服页面路由
    authNavigateTo(item.url);
    // #endif
    return;
  }

  // 其他正常功能，正常走路由拦截守卫
  authNavigateTo(item.url);
};

/**
 * 异步高内聚合并请求
 * 解决因先后触发 setData 导致微信小程序底层 AppService 与 WebView 之间高频拥堵卡顿的问题
 */
const fetchPageData = async () => {
  try {
    const [userRes, levelRes] = await Promise.all([
      UserApi.getUserInfo(),
      MemberApi.getMemberLevel(),
    ]);

    const rawUser = userRes.data || {};
    userInfo.value = rawUser;

    // 架构重构：数据拉取后一次性计算出等级映射结果，拒绝在 computed 内部循环执行实例化
    const levels = levelRes.data?.detailList || [];
    if (rawUser.level !== undefined && levels.length > 0) {
      const target = levels.find((item) => item.id === rawUser.level);
      memberLevelName.value = target ? target.name : '';
    } else {
      memberLevelName.value = '';
    }
  } catch (error) {
    console.error('[API Error] 拉取个人资产信息流失败:', error);
  }
};

onShow(() => {
  if (userStore.isLogin) {
    fetchPageData();
  } else {
    userInfo.value = {};
    memberLevelName.value = '';
  }
});

// 路由跳转原子原子层
const goLogin = () => uni.navigateTo({ url: '/pages7/pages/index/login' });
const goMyPersonalData = () => authNavigateTo('/pages5/pages/user/wode-geren-ziliao');
const goAddVip = () => authNavigateTo('/pages5/pages/user/wode-hongxing-huiyuan');

const goJiamen = () => uni.navigateTo({ url: '/pages7/pages/index/shouye-jiamen-hongxing' });
const handleQuickEntry = (type) => authNavigateTo(`/pages5/pages/user/wode-shangke?type=${type}`);
</script>

<style scoped lang="scss">
$brand-color: #ff6b00;
$page-bg: #f8f8f8;

.my-page {
  min-height: 100vh;
  background-color: $page-bg;
  padding: 20rpx 28rpx calc(40rpx + env(safe-area-inset-bottom));
  /* 解决部分 iOS 底部 Tabbar 高度塌陷 */
  box-sizing: border-box;

  .section-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx 20rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  }

  .user-header {
    display: flex;
    align-items: center;
    padding: 34rpx 30rpx;

    .avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
      background: #f0f0f0;
      border: 4rpx solid #fff;
    }

    .info-content {
      margin-left: 24rpx;
      flex: 1;

      .name-row {
        display: flex;
        flex-direction: column;

        .nickname {
          font-size: 34rpx;
          font-weight: bold;
          color: #333;
        }

        .tag {
          font-size: 20rpx;
          color: $brand-color;

          padding: 4rpx 12rpx;
          border-radius: 8rpx;

          vertical-align: middle;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 60rpx;

      .img {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  .login-guide-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .desc {
      font-size: 22rpx;
      color: #999;
      margin-top: 4rpx;
      display: block;
    }

    .login-btn {
      margin: 0;
      background: $brand-color;
      color: #fff;
      font-size: 24rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      padding: 0 30rpx;

      &::after {
        border: none;
      }

      /* 清理小程序 button 默认黑边线 */
    }
  }

  .vip-banner {
    background: #2b2b2b;
    border-radius: 20rpx;
    padding: 24rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .vip-info {
      display: flex;
      align-items: center;
    }

    .vip-text {
      color: #f1c40f;
      font-size: 24rpx;
      margin-left: 14rpx;
    }

    .vip-btn {
      background: linear-gradient(90deg, #f1c40f, #f39c12);
      color: #333;
      font-size: 20rpx;
      font-weight: bold;
      padding: 8rpx 20rpx;
      border-radius: 30rpx;
    }
  }

  .quick-entry {
    display: flex;
    justify-content: space-around;

    .entry-item {
      text-align: center;

      .num {
        font-size: 38rpx;
        font-weight: bold;
        color: #333;
      }

      .label {
        font-size: 22rpx;
        color: #999;
        margin-top: 4rpx;
        display: block;
      }
    }
  }

  .banner-box {
    height: 160rpx;
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .banner-img {
      width: 100%;
      height: 100%;
    }
  }

  .apply-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    .apply-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon-bg {
        width: 80rpx;
        height: 80rpx;
        background: #f9f9f9;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;

        .img {
          width: 44rpx;
          height: 44rpx;
        }
      }

      .text {
        font-size: 22rpx;
        color: #666;
      }
    }
  }

  .account-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 34rpx;

    .account-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .acc-val {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;

        .unit {
          font-size: 20rpx;
          font-weight: normal;
          color: #666;
          margin-left: 2rpx;
        }
      }

      .acc-lab {
        font-size: 22rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
  }

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 40rpx;

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .icon-img-wrap {
        position: relative;
        margin-bottom: 12rpx;

        .icon-img {
          width: 46rpx;
          height: 46rpx;
        }

        .badge {
          position: absolute;
          top: -12rpx;
          right: -42rpx;
          /* 适当拓宽右移，容纳后端多字文本 */
          background: #ff4d4f;
          color: #fff;
          font-size: 18rpx;
          padding: 2rpx 10rpx;
          border-radius: 16rpx;
          white-space: nowrap;
        }

        /* 未读状态小红点 */
        .dot-badge {
          position: absolute;
          top: -4rpx;
          right: -4rpx;
          width: 14rpx;
          height: 14rpx;
          background: #ff4d4f;
          border-radius: 50%;
        }
      }

      .icon-text {
        font-size: 24rpx;
        color: #555;
      }

      .mp-contact-overlay-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        /* 核心：完全透明 */
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 10;
        /* 确保盖在图表和文字的最上方 */

        &::after {
          border: none !important;
        }
      }
    }
  }

  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 1rpx solid #f9f9f9;

    &:last-child {
      border-bottom: none;
    }

    .setting-text {
      font-size: 28rpx;
      color: #444;
    }
  }

  .opacity-hover {
    opacity: 0.7;
  }

  .card-hover {
    background-color: #fcfcfc;
  }
}
</style>