<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>
      <uni-icons type="right" size="16" color="#999" />
    </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="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 settings-section">
      <view class="settings-title">个人设置</view>

      <view class="settings-item" @click="goToForgetPassword">
        <text class="settings-label">修改密码</text>
        <uni-icons type="right" size="14" color="#E0E0E0" />
      </view>

      <view class="logout-wrap">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </view>

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

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

const trainingStore = useTrainingStore();


// 状态
const userStore = useUserStore();
const userInfo = ref({});
const memberLevelName = ref('');

// 配置
const APPLY_CONFIG_LIST = [];

const FUNCTION_CONFIG_LIST = [
  {
    text: '健康资料',
    url: '/pages5/pages/user/wode-jiankang-ziliao',
    icon: '/static/icons/md-folder_open 1@1x.png',
  },
  {
    text: '常见问题',
    url: '/pages5/pages/user/wode-changjian-wenti',
    icon: '/static/icons/iconPark-helpcenter 1@1x.png',
  },
  {
    text: '联系客服',
    url: '/pages5/pages/user/wode-lianxi-kefu',
    icon: '/static/icons/riLine-customer-service-2-line 1@1x.png',
  },

  {
    text: '关于我们',
    url: '/pages5/pages/user/wode-guanyu-hongxing',
    icon: '/static/icons/antOutline-exclamation-circle 1@1x.png',
  },
];


const quickEntryConfig = [
  { type: 1, key: 'courseNum', label: '待上课' },
  { type: 2, key: 'courseWaitNum', label: '等待中' },
  { type: 3, key: 'courseEvaluationWaitNum', label: '历史课程' },
];

// 资产账户

const accountConfig = [];

const formatAccountValue = (val, isFloat) => {
  if (val === undefined || val === null) return isFloat ? '0.00' : 0;
  return isFloat ? Number(val).toFixed(2) : Math.floor(val);
};

/** 路由守卫 */

const authNavigateTo = (url) => {
  if (!userStore.isLogin) {
    goLogin();
    return;
  }
  uni.navigateTo({
    url,
    fail: (err) => console.error(`[Router] 页面跳转失败 ${url}: `, err),
  });
};

/** 功能网格点击分发 */

const handleGridItemClick = (item) => {
  if (item.text === '联系客服') {
    // #ifndef MP-WEIXIN
    authNavigateTo(item.url);
    // #endif
    return;
  }
  authNavigateTo(item.url);
};

/** 拉取用户信息 */

const fetchPageData = async () => {
  try {
    const userRes = await UserApi.getUserInfo();
    userInfo.value = userRes.data || {};
  } catch (error) {
    console.error('[API Error] 拉取个人信息失败:', error);
  }
};

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

// 设置

const goToForgetPassword = () => {
  uni.navigateTo({
    url: '/pages7/pages/index/reset-password?isModify=true',
  });
};

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (!res.confirm) return;
      try {
        await AuthUtil.logout();
        userStore.logout();
        uni.reLaunch({ url: '/pages7/pages/index/login' });
      } catch (err) {
        console.error('[API Error] 退出登录失败:', err);
        uni.showToast({ title: '退出失败', icon: 'none' });
      }
    },
  });
};

// 导航
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">
// 变量
// 主色
$color-primary: #ff6b00;
$color-danger: #ff4757;
$color-danger-active: #e63946;
$color-badge: #ff4d4f;

// 文字
$color-text-primary: #333333;
$color-text-secondary: #555555;
$color-text-tertiary: #999999;
$color-text-white: #ffffff;

// 背景
$color-bg-page: #f7f7f8;
$color-bg-card: #ffffff;
$color-bg-avatar: #f0f0f0;
$color-bg-hover: #fcfcfc;

// 边框
$color-border: #f0f0f0;

// 圆角
$radius-card: 24rpx;
$radius-button: 16rpx;
$radius-round: 50%;
$radius-tag: 8rpx;
$radius-badge: 16rpx;

// 间距
$gap-section: 24rpx;
$gap-page-h: 28rpx;
$padding-card: 30rpx 28rpx;

// 字号
$font-title: 32rpx;
$font-body: 28rpx;
$font-caption: 24rpx;
$font-small: 22rpx;
$font-mini: 18rpx;

// 效果
$shadow-card: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
$transition-tap: background-color 0.2s ease, opacity 0.2s ease;

// 页面
.my-page {
  min-height: 100vh;
  background-color: $color-bg-page;
  padding: 20rpx $gap-page-h calc(40rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;

  // 卡片
  .section-card {
    background: $color-bg-card;
    border-radius: $radius-card;
    padding: $padding-card;
    margin-bottom: $gap-section;
    box-shadow: $shadow-card;
  }

  // 登录头部
  .user-header {
    display: flex;
    align-items: center;
    padding: 36rpx $gap-page-h;

    .avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: $radius-round;
      background: $color-bg-avatar;
      border: 4rpx solid $color-bg-card;
      flex-shrink: 0;
    }

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

      .name-row {
        display: flex;
        flex-direction: column;
        gap: 8rpx;

        .nickname {
          font-size: 36rpx;
          font-weight: 600;
          color: $color-text-primary;
        }

        .tag {
          display: inline-block;
          font-size: $font-mini;
          color: $color-primary;
          padding: 4rpx 12rpx;
          border-radius: $radius-tag;
          background: rgba($color-primary, 0.08);
        }
      }
    }

  }

  // 未登录引导
  .login-guide-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx $gap-page-h;

    .guide-txt {
      .title {
        font-size: $font-title;
        font-weight: 600;
        color: $color-text-primary;
        display: block;
      }

      .desc {
        font-size: $font-small;
        color: $color-text-tertiary;
        margin-top: 6rpx;
        display: block;
      }
    }

    .login-btn {
      margin: 0;
      flex-shrink: 0;
      background: $color-primary;
      color: $color-text-white;
      font-size: $font-caption;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 32rpx;
      padding: 0 32rpx;
      transition: $transition-tap;

      &::after {
        border: none;
      }

      &:active {
        opacity: 0.85;
      }
    }
  }

  // 功能区
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 36rpx;

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

      &:active {
        opacity: 0.7;
      }

      .icon-img-wrap {
        position: relative;
        width: 90rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;
        background: #f5f6f8;
        border-radius: 22rpx;

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

        .badge {
          position: absolute;
          top: -10rpx;
          right: -36rpx;
          background: $color-badge;
          color: $color-text-white;
          font-size: $font-mini;
          padding: 2rpx 10rpx;
          border-radius: $radius-badge;
          white-space: nowrap;
        }

        .dot-badge {
          position: absolute;
          top: -2rpx;
          right: -2rpx;
          width: 14rpx;
          height: 14rpx;
          background: $color-badge;
          border-radius: $radius-round;
        }
      }

      .icon-text {
        font-size: $font-caption;
        color: $color-text-secondary;
      }

      .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;
        }
      }
    }
  }

  // 设置区
  .settings-section {
    padding: 30rpx $gap-page-h;

    .settings-title {
      font-size: 30rpx;
      font-weight: 600;
      color: $color-text-primary;
      margin-bottom: 8rpx;
    }
  }

  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx 0;
    border-bottom: 1rpx solid $color-border;

    .settings-label {
      font-size: $font-body;
      color: $color-text-primary;
    }
  }

  .logout-wrap {
    margin-top: 40rpx;

    .logout-btn {
      width: 100%;
      background-color: $color-danger;
      color: $color-text-white;
      border: none;
      border-radius: $radius-button;
      padding: 26rpx 0;
      font-size: 30rpx;
      font-weight: 500;
      transition: $transition-tap;

      &::after {
        border: none;
      }

      &:active {
        background-color: $color-danger-active;
      }
    }
  }

  // 触摸反馈
  .card-hover {
    background-color: $color-bg-hover;
  }
}
</style>