<!-- 给用户提供训练入口 + 看教练动态 + 选课程的「健身首页」 -->
<template>
  <scroll-view class="container" scroll-y @scrolltolower="onScrollToLower">
    <!-- 训练活动 -->
    <view class="banner-section">
      <!-- 跳转有问题 -->
      <view class="item" @click="goToActionLibrary">
        <image
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/21_1773626442072.png"
          class="img"
        ></image>
        <view class="title">动作库</view>
        <view class="desc">真人视频讲解</view>
      </view>
      <view class="item">
        <image
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/22_1773626449583.png"
          class="img"
        ></image>
        <view class="title">训练计划</view>
        <view class="desc">周期性目标达成</view>
      </view>
      <view class="item">
        <image
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/23_1773627239158.png"
          class="img"
        ></image>
        <view class="title">训练模板</view>
        <view class="desc">精选课程模板</view>
      </view>
    </view>

    <!-- 新手入门第一课 -->
    <view class="plan-section">
      <view class="section-header">
        <text class="section-title">新手入门第一课</text>
      </view>
      <view class="plan-list">
        <!-- 点击可跳转 -->
        <view
          v-for="(item, index) in planList"
          :key="index"
          class="plan-item"
          @tap="goPlanDetail(item)"
        >
          <image :src="item.cover" mode="aspectFill" class="plan-cover" />
          <view class="plan-desc">
            <text class="plan-tag" :class="item.tagClass">{{ item.tag }}</text>
            <text class="plan-title">{{ item.title }}</text>
            <text class="plan-meta">{{ item.meta }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐模块(横栏) -->
    <view class="recommend-section">
      <view class="recommend-header">
        <text class="header-title">为你推荐</text>
        <view class="tabs">
          <button
            class="tab-btn"
            :class="{ active: currentTab === 'recommend' }"
            @tap="switchTab('recommend')"
          >
            推荐
          </button>
          <button
            class="tab-btn"
            :class="{ active: currentTab === 'group' }"
            @tap="switchTab('group')"
          >
            团课
          </button>
          <button
            class="tab-btn"
            :class="{ active: currentTab === 'private' }"
            @tap="switchTab('private')"
          >
            私教
          </button>
          <!-- <button class="tab-btn" :class="{ active: currentTab === 'small' }" @tap="switchTab('small')">
            小班课
          </button> -->
          <button
            class="tab-btn"
            :class="{ active: currentTab === 'follow' }"
            @tap="switchTab('follow')"
          >
            关注
          </button>
        </view>
      </view>

      <!-- 列表 -->

      <view class="coach-section">
        <view class="coach-list">
          <view
            class="coach-item"
            v-for="(item, index) in currentRecommendList"
            :key="item.id"
            @click="navigateToDetail(item)"
          >
            <!-- 1. 如果有视频 -->
            <template v-if="item.video">
              <video
                :src="item.video"
                :controls="false"
                :show-fullscreen-btn="false"
                :show-center-play-btn="false"
                class="video"
              ></video>
              <up-icon name="play-right" size="20" class="icon" color="#fff"></up-icon>
            </template>
            <!-- 2. 如果没有视频 -->
            <template v-else>
              <image :src="item.photo" mode="widthFix" class="coach-cover" />
            </template>
            <view class="coach-desc">
              <text class="coach-content">{{ item.content }}</text>
              <view class="coach-meta">
                <image :src="item.coachAvatar" mode="aspectFill" class="coach-avatar" />
                <text class="coach-name">{{ item.coachName }}</text>
                <up-icon
                  name="thumb-up"
                  :color="item.isLike ? '#D96248' : '#666'"
                  size="20"
                  @click="handleDynamicLike(item, index)"
                ></up-icon>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="recommend-list">
        <view
          v-for="(item, index) in currentRecommendList"
          :key="index"
          class="recommend-item"
          @tap="goRecommendDetail(item)"
        >
          <image :src="item.photo" mode="aspectFill" class="video-img"></image>
          <text class="video-title">{{ item.content || item.title || '无标题' }}</text>
          <view class="video-info">
            <text class="author">{{ item.coachName || '未知教练' }}</text>
            <text class="like-count">👍 {{ item.likeCount || 0 }}</text>
          </view>
        </view>
      </view> -->

      <!-- 加载提示 -->
      <view v-if="loading && currentRecommendList.length > 0" class="load-more">加载中...</view>
      <view v-if="finished" class="load-more">没有更多了</view>
    </view>

    <!-- 黄色圆型 -->
    <!-- <float-yellow-btn @click="goToTrain" /> -->
    <float-yellow-btn />
  </scroll-view>
</template>

<script setup>
  import { ref, computed, onMounted } from 'vue';
  import QueryPlanApi from '@/sheep/api/plan/queryplan';
  import coachUpdatesApi from '@/sheep/api/Coach/CoachUpdates'; // 请确认路径正确
  import useUserStore from '@/sheep/store/user';
  const userStore = useUserStore();
  // ====== Tab 状态 ======
  const currentTab = ref('recommend');
  const tabData = ref({
    // finished: false → 还有没有更多数据可以加载？false代表还有更多数据可以加载
    recommend: { list: [], pageNo: 1, finished: false },
    group: { list: [], pageNo: 1, finished: false },
    private: { list: [], pageNo: 1, finished: false },
    small: { list: [], pageNo: 1, finished: false },
    follow: { list: [], pageNo: 1, finished: false },
  });
  const loading = ref(false);

  // 当前显示的列表（computed）
  const currentRecommendList = computed(() => {
    return tabData.value[currentTab.value]?.list || [];
  });

  const finished = computed(() => {
    return tabData.value[currentTab.value]?.finished || false;
  });

  // 获取 storeId（请根据你项目实际情况调整）
  const storeId = userStore.initUser.storeId;
  // 切换 Tab
  const switchTab = (type) => {
    if (currentTab.value === type) return;
    currentTab.value = type;
    // 如果该 tab 还没加载过，触发加载
    if (tabData.value[type].list.length === 0 && !tabData.value[type].finished) {
      loadRecommendData();
    }
  };

  // 加载推荐数据
  const loadRecommendData = async () => {
    const tab = currentTab.value;
    const tabInfo = tabData.value[tab];
    if (loading.value || tabInfo.finished) return;

    loading.value = true;

    // 映射 tab 到 type 参数（关注 tab 暂不传 type，或你可自定义）
    const typeMap = { group: '1', private: '2', small: '3' };
    const params = {
      storeId,
      pageNo: tabInfo.pageNo,
      pageSize: 10,
      type: typeMap[tab], // 推荐 和 关注 不传 type
      cityId: userStore.initUser.cityId, //暂时定死了，后续可添加
    };

    try {
      const res = await coachUpdatesApi.coachmoments(params);
      if (res.code === 0) {
        const newData = res.data?.list || [];
        tabInfo.list = [...tabInfo.list, ...newData];

        const total = res.data?.total || 0;
        // 1 后端数据没有数据返回了
        if (tabInfo.list.length >= total) {
          tabInfo.finished = true;
          // 2 后端还有数据,当前页+1进入下一页
        } else {
          tabInfo.pageNo += 1;
        }
      } else {
        uni.showToast({ title: res.msg || '加载失败', icon: 'none' });
      }
    } catch (err) {
      console.error('加载推荐失败:', err);
      console.log(params);
      uni.showToast({ title: '网络错误', icon: 'none' });
    } finally {
      loading.value = false;
    }
  };

  // 上拉加载更多
  const onScrollToLower = () => {
    if (!finished.value && !loading.value) {
      loadRecommendData();
    }
  };

  const planList = ref([]);
  // 新手第一课接口，如果有数据就循环显示数据，没有就展示默认暂无新手计划
  const loadPlans = async () => {
    try {
      const res = await QueryPlanApi.getPlanList();
      const allPlans = res.data || [];
      // 从后端拿所有训练计划 → 专门挑出 id=1 的那个计划 → 显示在首页 “新手入门第一课”
      const targetPlan = allPlans.find((plan) => plan.id === 1);
      // 找到了 id=1 → 显示它：标题、封面、难度、多少人练过
      if (targetPlan) {
        const difficultyText = { 1: '初阶', 2: '中阶', 3: '高阶' };
        planList.value = [
          {
            id: targetPlan.id,
            title: targetPlan.name,
            cover:
              targetPlan.urlCover ||
              'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
            tag: '火爆',
            tagClass: 'hot-tag',
            meta: ` ${difficultyText[targetPlan.difficultyLevel] || '初阶'} ·  ${
              targetPlan.enrollmentCount
            }人练过`,
          },
        ];
      } else {
        planList.value = [
          {
            title: '暂无新手计划',
            cover:
              'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
            tag: '',
            tagClass: '',
            meta: '',
          },
        ];
      }
    } catch (err) {
      console.error('加载计划失败:', err);
      planList.value = [
        {
          title: '加载失败',
          cover:
            'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
          tag: '',
          tagClass: '',
          meta: '',
        },
      ];
    }
  };

  // 跳转方法
  const goPlanDetail = (item) => {
    uni.navigateTo({
      url: `/pages4/pages/xunji/xunji-xunlian-jihua?planid= ${item.id}`,
    });
  };
  // 这是一个【跳转函数】，点击推荐里的内容，跳转到动态详情页，并且把当前是 “推荐 / 团课 / 私教 / 小班 / 关注” 这个分类带给下一页。
  const goRecommendDetail = (item) => {
    // 传递当前 tab 类型，方便目标页初始化
    const typeMap = { group: '1', private: '2', small: '3', recommend: '', follow: '' };
    const type = typeMap[currentTab.value] || '';
    uni.navigateTo({
      url: `/pages3/pages/coach/jiaolian-dongtai?type= ${encodeURIComponent(type)}`,
    });
  };
  // 跳转到动态详情
  const navigateToDetail = (item) => {
    if (item.photo) {
      uni.navigateTo({
        url: `/pages3/pages/coach/jiaolian-dongtai?id=${item.id}`,
      });
    } else {
      uni.navigateTo({
        url: `/pages3/pages/coach/jiaolian-shipin-dongtai?id=${item.id}`,
      });
    }
  };
  //  动态点赞
  const handleDynamicLike = async (item, index) => {
    // await CoachApi.likeCoachDynamic({
    //   id: item.id,
    //   status: item.isLike == 1 ? 0 : 1,
    // });
    // coachDynamicList.value[index].isLike = item.isLike == 1 ? 0 : 1;
    try {
      // 新状态：1=点赞，0=取消
      const newStatus = item.isLike == 1 ? 0 : 1;
      // 请求后端
      await coachUpdatesApi.likeCoachDynamic({
        id: item.id,
        status: newStatus,
      });
      // 前端更新状态（修复后）
      item.isLike = newStatus;
    } catch (err) {
      console.log('点赞失败', err);
    }
  };
  // 实现动作库跳转，跳转到F:\hongxing-app\hongxing-new\pages\xunji\components\xunji-dongzuo.vue
  const goToActionLibrary = () => {
    uni.navigateTo({
      url: '/pages/xunji/components/xunji-dongzuo',
    });
  };
  // 实现
  // 初始化
  onMounted(() => {
    loadPlans();
    loadRecommendData(); // 加载默认 tab（推荐）数据
  });
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;

    .banner-section {
      width: 100%;
      height: 200rpx;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      background-color: #fff;
      justify-content: center;
      align-items: center;
      margin-bottom: 20rpx;

      .item {
        padding: 20rpx;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5rpx;

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

        .title {
          font-weight: bold;
        }

        .desc {
          font-size: 20rpx;
          color: #999;
        }
      }
    }

    .plan-section {
      background-color: #fff;

      border-radius: 12rpx;
      overflow: hidden;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;

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

      .plan-list {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        padding: 0 20rpx 20rpx;

        .plan-item {
          width: 100%;
          display: flex;
          border-radius: 8rpx;
          overflow: hidden;
          background-color: #f5f5f5;
          position: relative;
          padding: 8rpx;
          box-sizing: border-box;

          .plan-cover {
            width: 200rpx;
            height: 140rpx;
          }

          .plan-desc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10rpx;

            .plan-tag {
              position: absolute;
              top: 10rpx;
              right: 10rpx;
              padding: 2rpx 10rpx;
              border-radius: 4rpx;
              font-size: 20rpx;
              margin-bottom: 6rpx;
            }

            .hot-tag {
              background-color: #ff4d4f;
              color: #fff;
            }

            .new-tag {
              background-color: #ffbb00;
              color: #fff;
            }

            .plan-title {
              font-size: 26rpx;
              font-weight: 500;
              color: #333;
              margin-bottom: 6rpx;
            }

            .plan-meta {
              font-size: 22rpx;
              color: #999;
            }
          }
        }
      }
    }

    .recommend-section {
      margin-top: 40rpx;
      padding-bottom: 10rpx;
      box-sizing: border-box;

      .recommend-header {
        display: flex;
        flex-direction: column;
        margin-bottom: 20rpx;

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

        .tabs {
          display: flex;
          gap: 10rpx;
          position: sticky;
          top: 0;
          z-index: 100;
          background-color: #fff;
          padding: 10rpx 0;
          margin: 0 -30rpx;
          padding-left: 30rpx;
          padding-right: 30rpx;
          box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

          :deep(uni-button) {
            padding: 8rpx 16rpx;
            line-height: 1;
            border-radius: 5rpx;

            &::after {
              content: none;
            }
          }

          .tab-btn {
            background-color: white;
            color: #333;
            font-size: 24rpx;
            margin: 0;
          }

          .active {
            background-color: #ffcc00;
            color: white;
          }
        }
      }

      .recommend-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20rpx;

        .recommend-item {
          background-color: white;
          border-radius: 16rpx;
          overflow: hidden;
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
          padding: 20rpx;

          .video-img {
            width: 100%;
            height: 200rpx;
            border-radius: 12rpx;
            margin-bottom: 10rpx;
          }

          .video-title {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .video-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20rpx;
            color: #666;
          }
        }
      }

      .load-more {
        text-align: center;
        padding: 20rpx;
        font-size: 24rpx;
        color: #999;
      }
    }

    .coach-section {
      border-radius: 12rpx;
      box-sizing: border-box;
      padding: 20rpx 0;
      // .section-header {
      //   display: flex;
      //   justify-content: space-between;
      //   align-items: center;
      //   padding: 20rpx 30rpx;

      //   .section-title {
      //     font-size: 28rpx;
      //     font-weight: bold;
      //     color: #333;
      //   }

      //   .more-btn {
      //     font-size: 24rpx;
      //     color: #666;
      //     display: flex;
      //     align-items: center;
      //   }
      // }

      .coach-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20rpx;
        box-sizing: border-box;

        .coach-item {
          width: 100%;
          margin-bottom: 20rpx;
          border-radius: 8rpx;
          overflow: hidden;
          background-color: #fff;
          position: relative;

          .video {
            width: 100%;
            min-height: 200rpx;
          }

          .icon {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
          }

          .coach-cover {
            width: 100%;
            height: auto;
          }

          .coach-desc {
            padding: 10rpx;

            .coach-content {
              font-size: 24rpx;
              color: #333;
              margin-bottom: 10rpx;
              display: block;
            }

            .coach-meta {
              display: flex;
              align-items: center;

              .coach-avatar {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                margin-right: 10rpx;
              }

              .coach-name {
                font-size: 22rpx;
                color: #666;
                flex: 1;
              }

              .coach-like {
                color: #ff6b35;
              }
            }
          }
        }
      }
    }
  }
</style>