<template>
  <view class="training-data-page">
    <timeSelect />
    <!-- 修改: 添加 style 或 class 以确保 scroll-view 有明确高度 -->
    <scroll-view scroll-y class="content-scroll" enable-flex>
      <!-- 肌肉部位及对应的数据 -->
      <view class="section">
        <view class="muscle-part">
          <view class="title">肌肉部位</view>
          <view class="tip">该时间段内的不同肌肉部位训练充分程度</view>
          <image
            src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/39_1773628038616.png"
            mode="aspectFill"
            class="img"
          ></image>
        </view>
        <view class="muscle-data">
          <view class="title">主训练肌肉数据</view>
          <view class="tabs">
            <view class="tab active">容量</view>
            <view class="tab">组数</view>
          </view>
          <view class="tip">{{ tabTip[partTabIndex] }}</view>

          <view class="detail-part">
            <view
              class="part-item"
              v-for="item in detailPartOptions"
              :key="item.id"
              @click="muscleShow = true"
            >
              <text class="txt">{{ item.name }}</text>
              <text class="num">1000</text>
            </view>
            <view class="part-item last">
              <text class="txt">总计</text>
              <text class="num">10</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 趋势 -->
      <view class="section">
        <view class="header">
          <view class="title">趋势</view>
          <view class="mean">
            <up-select :current="partId" label="全部" :options="partOptions"></up-select>
          </view>
        </view>
        <view class="tabs">
          <view class="tab active">容量</view>
          <view class="tab">组数</view>
          <view class="tab">时长</view>
          <view class="tab">距离</view>
          <view class="tab">次数</view>
        </view>
        <view class="tip">{{ tabTip[trendTabIndex] }}</view>
        <view class="statistical">
          <LineChart
            :categories="['周一', '周二', '周三', '周四', '周五']"
            :series="[{ name: '数量', data: [100, 200, 150, 200, 300] }]"
          />
        </view>
        <view class="compare">
          <view class="header-row">
            <text class="title">对比</text>
            <view class="legend-group">
              <view class="legend-item">
                <view class="dot blue"></view>
                <text>上周</text>
              </view>
              <view class="legend-item">
                <view class="dot yellow"></view>
                <text>本周</text>
              </view>
              <view class="legend-item">
                <text>对比</text>
              </view>
            </view>
          </view>
          <view class="compare-card">
            <view class="data-list">
              <view v-for="(item, index) in listData" :key="index" class="data-row">
                <view class="label">{{ item.label }}</view>
                <view class="value">{{ item.lastWeek }}</view>
                <view class="value">{{ item.thisWeek }}</view>
                <view class="value diff" :class="{ negative: item.diff < 0 }">
                  {{ item.diff > 0 ? '+' + item.diff : item.diff }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 肌肉部位的数据弹窗 -->
    <up-popup :show="muscleShow" mode="top" @close="muscleShow = false" safeAreaInsetTop>
      <view class="muscleShow-popup" :style="{ paddingTop: statusBarHeight + 'px' }">
        <timeSelect />
        <view class="statistical">
          <LineChart
            v-if="muscleShow"
            :categories="['周一', '周二', '周三']"
            :series="[{ name: '容量', data: [100, 200, 150] }]"
          />
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
  import LineChart from './LineChart.vue';
  import { ref } from 'vue';
  import timeSelect from './time-select.vue';
  import { getMenuButtonHeight } from '@/utils/safeArea';

  const statusBarHeight = getMenuButtonHeight();
  //  顶部安全距离

  //提示
  const tabTip = ref([
    '重量X组数X次数，用来评估训练的整体强度（kg）',
    '该时间段内训练组数趋势（组）',
    '累计计时类动作的时长（min）',
    '累计距离类动作的距离（km）',
    '累计次数类动作的次数（次）',
  ]);
  //   肌肉部位
  const partTabIndex = ref(0);
  const detailPartOptions = ref([
    { id: 1, name: '斜方肌' },
    { id: 2, name: '上胸' },
    { id: 3, name: '中下胸' },
    { id: 4, name: '上背' },
    { id: 5, name: '下背' },
    { id: 6, name: '前束' },
    { id: 7, name: '中束' },
    { id: 8, name: '后束' },
    { id: 9, name: '二头' },
    { id: 10, name: '三头' },
    { id: 11, name: '小臂' },
    { id: 12, name: '腹部' },
    { id: 13, name: '侧腹' },
    { id: 14, name: '臀部' },
    { id: 15, name: '股四' },
    { id: 16, name: '股二' },
    { id: 17, name: '小腿' },
  ]);
  // 分类部分
  const partId = ref(''); // 选择的肌肉部位ID
  const partOptions = ref([
    {
      id: 1,
      name: '全部',
    },
    {
      id: 2,
      name: '有氧',
    },
    {
      id: 3,
      name: '热身',
    },
    {
      id: 4,
      name: '胸',
    },
    {
      id: 5,
      name: '肩',
    },
    {
      id: 6,
      name: '被',
    },
    {
      id: 7,
      name: '腿',
    },
    {
      id: 8,
      name: '臀',
    },
    {
      id: 9,
      name: '腹',
    },
    {
      id: 10,
      name: '二头',
    },
    {
      id: 11,
      name: '三头',
    },
    {
      id: 12,
      name: '斜方肌',
    },
    {
      id: 13,
      name: '小臂',
    },
    {
      id: 14,
      name: '小腿',
    },
    {
      id: 15,
      name: '团课动作',
    },
    {
      id: 16,
      name: '瑜伽普拉提',
    },
    {
      id: 17,
      name: '拉伸放松',
    },
    {
      id: 18,
      name: '预防及康复',
    },
    {
      id: 19,
      name: '其他',
    },
  ]);
  const trendTabIndex = ref(0); // 趋势部分的tab索引
  const listData = ref([
    { label: '容量', lastWeek: 0, thisWeek: 0, diff: 0 },
    { label: '组数', lastWeek: 8, thisWeek: 0, diff: -8 },
    { label: '时长', lastWeek: 0, thisWeek: 0, diff: 0 },
    { label: '距离', lastWeek: 23, thisWeek: 0, diff: -23 },
    { label: '次数', lastWeek: 0, thisWeek: 0, diff: 0 },
  ]);

  //   肌肉具体部位弹窗数据
  const muscleShow = ref(false);
</script>

<style lang="scss" scoped>
  .training-data-page {
    width: 100%;
    height: 100vh;

    padding: 30rpx 24rpx;
    box-sizing: border-box;

    .content-scroll {
      width: 100%;
      height: 72vh;
    }

    .section {
      padding: 32rpx 24rpx;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 16rpx;

      margin-top: 24rpx;
      .title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .tip {
        font-size: 22rpx;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        height: 400rpx;
      }
      .tabs {
        display: flex;
        gap: 20rpx;
        .tab {
          border: 1rpx solid #eee;
          border-radius: 50rpx;
          background-color: #fff;
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          margin-bottom: 20rpx;
          &.active {
            background-color: #000;
            color: #fff;
            border: none;
          }
        }
      }
      .detail-part {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8rpx;
        .part-item {
          width: 100%;
          height: 120rpx;
          background-color: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          font-size: 24rpx;
          gap: 8rpx;
          border-radius: 8rpx;
          .num {
            font-weight: bold;
            color: #000;
          }
          &.last {
            grid-column: span 3;
          }
        }
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .statistical {
        width: 100%;
        height: 400rpx;
      }
      .compare {
        margin-top: 30rpx;
        // 表头布局
        .header-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

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

          .legend-group {
            display: flex;
            gap: 60rpx;

            .legend-item {
              display: flex;
              align-items: center;
              font-size: 24rpx;
              color: #666;

              .dot {
                width: 20rpx;
                height: 20rpx;
                border-radius: 4rpx;
                margin-right: 8rpx;

                &.blue {
                  background-color: #5b8ff9;
                }
                &.yellow {
                  background-color: #ffc53d;
                }
              }
            }
          }
        }
        .compare-card {
          background-color: #ffffff;
          border-radius: 20rpx;
          border: 5rpx solid #efefef;

          // 数据行布局
          .data-list {
            .data-row {
              display: flex;
              align-items: center;
              padding: 30rpx 0;
              border-bottom: 1rpx solid #f0f0f0;
              font-size: 26rpx;
              &:last-child {
                border-bottom: none;
              }
              &:nth-child(odd) {
                background-color: #f9fafc;
              }
              .label {
                flex: 1.5; // 第一列标签宽度稍微多一点
                color: #333;
                text-align: center;
              }

              .value {
                flex: 1;
                text-align: center;

                color: #333;
                text-align: center;

                &.diff {
                  color: #666;
                }

                &.negative {
                  color: #ff7875; // 负值显示红色/橙色
                }
              }
            }
          }
        }
      }
    }
    .muscleShow-popup {
      min-height: 40vh;
      .statistical {
        width: 100%;
        height: 400rpx;
        margin-top: 20rpx;
      }
    }
  }
</style>