<template>
  <view class="container">
    <!-- 顶部日期栏 -->
    <view class="header-bar">
      <view class="back-btn" @click="goBack">
        <uni-icons class="back-arrow" type="left" size="24" color="#333"></uni-icons>
      </view>
      <view class="date-wrapper">
        <text class="down-arrow">▼</text>
        <text class="date-text">{{ displayDate }}</text>
      </view>
      <button class="date-note-btn" @click="handleDateNote">日期备注</button>
      <button class="go-train-btn" @click="handleGoTrain">
        <text class="go-train-text">去训练</text>
        <text class="go-train-tag">GO</text>
      </button>
    </view>

    <!-- 训练内容区域（resdaily.data非空时显示） -->
    <view v-if="resdailyData && resdailyData.actionList && resdailyData.actionList.length > 0"
      class="training-container">
      <!-- 训练计划头部卡片 -->
      <view class="plan-header-card">
        <image class="plan-header-img"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"></image>
        <view class="plan-header-info">
          <text class="plan-title">{{ resdailyData.name || '全能玩家DoubleDelight 05' }}</text>
          <text class="plan-meta">{{ resdailyData.exerciseCount }}个动作 · {{ resdailyData.totalSets }}组 ·
            {{ resdailyData.totalWeight }}kg</text>
        </view>
        <view class="plan-header-btns">
          <button class="plan-btn more-btn" @click="handlePlanMore">更多</button>
          <button class="plan-btn copy-btn" @click="handlePlanCopy">复制到</button>
          <button class="plan-btn go-train-btn-small" @click="handleGoTrain">
            <text class="go-train-text-sm">去训练</text>
            <text class="go-train-tag-sm">GO</text>
          </button>
        </view>
      </view>

      <!-- 训练动作列表 -->
      <view class="action-list">
        <view class="action-item" v-for="(item, index) in resdailyData.actionList" :key="index">
          <!-- 动作序号 -->
          <text class="action-index">{{ index + 1 }}</text>
          <!-- 动作图片 -->
          <image class="action-img" :src="item.img ||
            'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png'
            " mode="aspectFill"></image>
          <!-- 动作信息 -->
          <view class="action-info">
            <text class="action-name">{{ item.name }}</text>
            <view class="action-sets">
              <view class="set-item" v-for="(set, setIdx) in item.sets" :key="setIdx">
                <text class="set-index">{{ setIdx + 1 }}</text>
                <text class="set-content">{{ set.content }}</text>
                <!-- 休息时间（右侧） -->
                <text class="rest-time" v-if="set.restTime">{{ set.restTime }}</text>
              </view>
            </view>
          </view>
          <!-- 修改按钮 -->
          <button class="modify-btn" @click="handleModifyAction(item, index)">修改</button>
        </view>
      </view>
    </view>

    <!-- 空状态区域（resdaily.data为空时显示） -->
    <view v-else class="empty-section">
      <image class="empty-img"
        src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
        mode="aspectFit"></image>
      <text class="empty-tip">今天没有安排</text>
      <button class="add-train-btn" @click="handleAddTrain">+ 添加自助训练</button>
    </view>

    <!-- 训练选项弹出层 -->
    <view v-if="showTrainOptions" class="train-options-overlay">
      <view class="overlay-mask" @click="closeTrainOptions"></view>
      <view class="train-options-content">
        <view class="close-btn" @click="closeTrainOptions">×</view>
        <button class="option-btn" @click="handleOptionClick('plan')">训练计划中添加</button>
        <button class="option-btn" @click="trainingtemplate">训练模板</button>
        <button class="option-btn" @click="freeTraining">自由训练</button>
      </view>
    </view>

    <!-- 底部课程类型区域（resdaily.data为空时显示） -->
    <view v-else class="course-section">
      <view class="course-item" v-for="(item, index) in courseList" :key="index" @click="handleCourseClick(item.type)">
        <image class="course-icon"
          src="https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png"
          mode="aspectFill"></image>
        <text class="course-title">{{ item.title }}</text>
        <text class="course-desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';

// 模拟接口数据（实际项目替换为真实接口返回）
const mockApi = {
  getPageData: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          date: '2026/01/23 周五',
          hasSchedule: false,
          courseList: [
            { type: 'group', title: '团课', desc: '大家一起练' },
            { type: 'private', title: '私教', desc: '1对1专人指导' },
            { type: 'smallClass', title: '小班课', desc: '28天极速瘦身' },
          ],
        });
      }, 300);
    });
  },
};

// 响应式数据
const courseList = ref([]);
const resdailyData = ref({
  planTitle: '全能玩家DoubleDelight 05',
  planMeta: '8个动作 · 20组 · 1215kg',
  planSource: '来源计划排课：全能玩家 Double Delight',
  actionList: [
    {
      name: '壶铃农夫行走',
      meta: '540kg',
      img: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
      sets: [
        { content: '12kg × 15次', restTime: '30s' },
        { content: '12kg × 15次', restTime: '30s' },
        { content: '12kg × 15次', restTime: '30s' },
      ],
    },
    {
      name: '侧平举',
      meta: '',
      img: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
      sets: [
        { content: '15次', restTime: '30s' },
        { content: '15次', restTime: '30s' },
        { content: '15次', restTime: '30s' },
      ],
    },
    {
      name: '药球深蹲抛',
      meta: '',
      img: 'https://fitness-hcxtec-bucket.oss-cn-shenzhen.aliyuncs.com/20260316/order-empty_1773628059920.png',
      sets: [{ content: '3组 × 60秒 × 30秒/组休息', restTime: '' }],
    },
  ],
}); // 存储训练计划完整数据（包含头部+动作列表）
const showTrainOptions = ref(false);
const selectedDate = ref('');
const displayDate = ref('2026/02/01 周日');

// 加载页面基础数据
const loadPageData = async () => {
  try {
    const res = await mockApi.getPageData();
    courseList.value = res.courseList;
  } catch (error) {
    console.error('加载页面数据失败:', error);
    uni.showToast({ title: '数据加载失败', icon: 'none' });
  }
};

// 加载每日训练模板数据
const loaddailytemplate = async () => {
  try {
    const resdaily = await dailytemplateApi.getdailytemplate(String(selectedDate.value));
    // 模拟接口返回结构
    resdailyData.value = resdaily.data;
  } catch (error) {
    console.error('加载训练模板失败:', error);
    resdailyData.value = {}; // 出错时置空，显示原界面
  }
};

// 事件处理函数
const handleDateNote = () => uni.showToast({ title: '日期备注功能待实现', icon: 'none' });
const handleGoTrain = () => (showTrainOptions.value = true);
const handleCourseClick = (type) => uni.showToast({ title: `点击了${type}课程`, icon: 'none' });
const handleAddTrain = () => (showTrainOptions.value = true);
const closeTrainOptions = () => (showTrainOptions.value = false);
const handleOptionClick = (type) => {
  uni.showToast({
    title: `已选择：${type === 'plan' ? '训练计划中添加' : type === 'template' ? '训练模板' : '自由训练'
      }`,
    icon: 'none',
  });
  closeTrainOptions();
};
const trainingtemplate = () =>
  uni.navigateTo({ url: '/pages4/pages/xunji/xunji-rili-tianjia-moban' });
const freeTraining = () => uni.navigateTo({ url: '/pages4/pages/xunji/xunji-dongzuo-lianxi' });
const handlePlanMore = () => uni.showToast({ title: '更多功能待实现', icon: 'none' });
const handlePlanCopy = () => uni.showToast({ title: '复制计划功能待实现', icon: 'none' });
const handleModifyAction = (item, index) =>
  uni.showToast({ title: `修改${item.name}`, icon: 'none' });

// 返回按钮逻辑
const goBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      console.warn('无法返回，跳转到训练日历页');
      uni.redirectTo({ url: '/pages/xunji/xunji-rili' });
    },
  });
};

// 日期格式化（兼容iOS）
const formatDateWithWeek = (dateStr) => {
  if (!dateStr) return '';
  const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
  const iosSafeDate = new Date(dateStr.replace(/-/g, '/'));
  const year = iosSafeDate.getFullYear();
  const month = String(iosSafeDate.getMonth() + 1).padStart(2, '0');
  const day = String(iosSafeDate.getDate()).padStart(2, '0');
  const week = weekMap[iosSafeDate.getDay()];
  return `${year}/${month}/${day} 周${week}`;
};

// 页面生命周期
onLoad((options) => {
  if (options.date) {
    selectedDate.value = options.date;
    displayDate.value = formatDateWithWeek(options.date);
  }
});

onMounted(() => {
  loadPageData();
  // loaddailytemplate();
});
</script>

<style scoped>
/* 全局容器 */
.container {
  width: 100%;
  min-height: 90vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding: 20rpx 16rpx;
  overflow-x: hidden;
}

/* 顶部日期栏 */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-top: 150rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-arrow {
  font-size: 28rpx;
  color: #333;
}

.date-wrapper {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}

.down-arrow {
  font-size: 20rpx;
  color: #666;
  line-height: 1;
  margin-right: 8rpx;
}

.date-text {
  font-size: 28rpx;
  color: #333;
}

.date-note-btn {
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  border-radius: 40rpx;
  padding: 8rpx 20rpx;
  border: none;
  margin-right: 10rpx;
}

.go-train-btn {
  display: flex;
  align-items: center;
  background: #ffd100;
  border-radius: 40rpx;
  padding: 8rpx 20rpx;
  border: none;
}

.go-train-text {
  font-size: 24rpx;
  color: #000;
  margin-right: 8rpx;
}

.go-train-tag {
  font-size: 20rpx;
  color: #ffd100;
  background: #000;
  border-radius: 4rpx;
  padding: 2rpx 6rpx;
  font-weight: bold;
}

/* 训练计划头部卡片 */
.plan-header-card {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  color: #000;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.plan-header-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.plan-header-info {
  flex-grow: 1;
}

.plan-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.plan-meta {
  font-size: 24rpx;
  color: #ccc;
  display: block;
  margin-bottom: 4rpx;
}

.plan-source {
  font-size: 22rpx;
  color: #999;
  display: block;
}

.plan-header-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
}

.plan-btn {
  font-size: 22rpx;
  border-radius: 8rpx;
  border: none;
  padding: 8rpx 16rpx;
  line-height: 1;
}

.more-btn,
.copy-btn {
  background: #fff;
  color: #000;
}

.go-train-btn-small {
  background: #ffd100;
  color: #000;
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
}

.go-train-text-sm {
  font-size: 20rpx;
  margin-right: 4rpx;
}

.go-train-tag-sm {
  font-size: 18rpx;
  background: #000;
  color: #ffd100;
  border-radius: 4rpx;
  padding: 1rpx 4rpx;
  font-weight: bold;
}

/* 训练动作列表 */
.action-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.action-item {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
}

.action-index {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
  margin-right: 16rpx;
  line-height: 80rpx;
}

.action-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.action-info {
  flex-grow: 1;
}

.action-name {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.action-meta {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 12rpx;
}

.action-sets {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.set-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
}

.set-index {
  width: 30rpx;
  text-align: center;
  margin-right: 8rpx;
  font-size: 22rpx;
  color: #999;
}

.set-content {
  flex-grow: 1;
}

.rest-time {
  font-size: 22rpx;
  color: #999;
  margin-left: 16rpx;
}

.modify-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 24rpx;
  color: #666;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  line-height: 1;
}

/* 空状态区域 */
.empty-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 20rpx 60rpx;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-tip {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
}

.add-train-btn {
  font-size: 28rpx;
  color: #000;
  background: #ffd100;
  border-radius: 40rpx;
  padding: 16rpx 60rpx;
  border: none;
}

/* 底部课程类型区域 */
.course-section {
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx;
  margin-top: 20rpx;
}

.course-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx 0;
}

.course-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 16rpx;
}

.course-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

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

/* 训练选项弹出层 */
.train-options-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.train-options-content {
  position: relative;
  width: 100%;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx 60rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 40rpx;
  color: #999;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.option-btn {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
  background: #f9f9f9;
  border: none;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 按钮通用重置 */
button {
  line-height: 1;
}

button::after {
  border: none;
}
</style>