<template>
  <div class="camp-management-board">
    <header class="board-header">
        <div>
      <h1>营期节奏总览与调控</h1>
      <p>点击任意中心行即可展开或收起详情调控面板</p>
        </div>
     
      <button class="save-button" @click="saveSettings">保存全部设置</button>
    </header>

    <div class="overview-panel">
      <!-- 列表头部 -->
      <div class="overview-header">
        <span class="header-name">中心名称</span>
        <span class="header-stage">当前营期阶段</span>
        <span class="header-timeline">营期节奏分布</span>
        <span class="header-days">总天数</span>
      </div>

      <!-- 中心列表 -->
      <div class="center-list">
        <template v-for="center in centersData" :key="center.id">
          <!-- 1. 概览行 (可点击) -->
          <div
            class="center-summary-row"
            @click="selectCenter(center.id)"
            :class="{ 'selected': selectedCenterId === center.id }"
          >
            <span class="center-name">{{ center.name }}</span>
            <span class="current-stage">{{ getCurrentStage(center) }}</span>
            
            <!-- 可视化时间轴 -->
            <div class="timeline-bar">
              <div
                v-for="stage in center.stages"
                :key="stage.name"
                class="timeline-segment"
                :style="getStageStyle(center, stage)"
                :title="`${stage.name}: ${stage.days} 天`"
              >
                <span class="stage-label" v-if="(stage.days / calculateTotalDays(center)) > 0.08">{{ stage.name }}</span>
              </div>
            </div>

            <span class="total-days">{{ calculateTotalDays(center) }} 天</span>
          </div>

          <!-- 2. 详情调控面板 (条件渲染，带过渡动画) -->
          <transition name="slide-fade">
            <div v-if="selectedCenterId === center.id" class="detail-control-panel">
              <h4>正在调控: {{ center.name }}</h4>
              <ul class="control-items-container">
                <li v-for="stage in center.stages" :key="stage.name" class="control-item">
                  <span class="color-dot" :style="{ backgroundColor: stage.color }"></span>
                  <span class="stage-name-detail">{{ stage.name }}</span>
                  <input type="number" v-model.number="stage.days" min="0" class="days-input" />
                  <span>天</span>
                </li>
              </ul>
            </div>
          </transition>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始数据模型保持不变
const centersData = ref([
  { id: 1, name: '一中心', startDate: '2025-08-1', stages: [ { name: '接数据', days: 3, color: '#ffc107' }, { name: '课一', days: 1, color: '#0dcaf0' }, { name: '课二', days: 1, color: '#0d6efd' }, { name: '课三', days: 1, color: '#6f42c1' }, { name: '课四', days: 1, color: '#d63384' }] },
  { id: 2, name: '二中心', startDate: '2025-08-3', stages: [ { name: '接数据', days: 2, color: '#ffc107' }, { name: '课一', days: 1, color: '#0dcaf0' }, { name: '课二', days: 1, color: '#0d6efd' }, { name: '课三', days: 1, color: '#6f42c1' }, { name: '课四', days: 1, color: '#d63384' }] },
  { id: 3, name: '三中心', startDate: '2025-08-5', stages: [ { name: '接数据', days: 4, color: '#ffc107' }, { name: '课一', days: 1, color: '#0dcaf0' }, { name: '课二', days: 1, color: '#0d6efd' }, { name: '课三', days: 1, color: '#6f42c1' }, { name: '课四', days: 1, color: '#d63384' }] },
  { id: 4, name: '四中心', startDate: '2025-08-5', stages: [ { name: '接数据', days: 2, color: '#ffc107' }, { name: '课一', days: 1, color: '#0dcaf0' }, { name: '课二', days: 1, color: '#0d6efd' }, { name: '课三', days: 1, color: '#6f42c1' }, { name: '课四', days: 1, color: '#d63384' }] },
  { id: 5, name: '五中心', startDate: '2025-08-4', stages: [ { name: '接数据', days: 3, color: '#ffc107' }, { name: '课一', days: 1, color: '#0dcaf0' }, { name: '课二', days: 1, color: '#0d6efd' }, { name: '课三', days: 1, color: '#6f42c1' }, { name: '课四', days: 1, color: '#d63384' }] },
]);

// 新增状态：用于追踪当前被选中的中心ID
const selectedCenterId = ref(null);

const getCurrentStage = (center) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const startDate = new Date(center.startDate);
  startDate.setHours(0, 0, 0, 0);

  if (today < startDate) {
    return '未开始';
  }

  const diffTime = Math.abs(today - startDate);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 当天算第一天

  let cumulativeDays = 0;
  for (let i = 0; i < center.stages.length; i++) {
    const stage = center.stages[i];
    cumulativeDays += stage.days;
    if (diffDays <= cumulativeDays) {
      return `${stage.name}`;
    }
  }

  return '已结束';
};

/**
 * 选择一个中心进行调控
 * 如果点击的是已选中的中心，则取消选择（收起面板）
 * @param {number} centerId - 被点击的中心ID
 */
const selectCenter = (centerId) => {
  if (selectedCenterId.value === centerId) {
    selectedCenterId.value = null; // 取消选择
  } else {
    selectedCenterId.value = centerId; // 选择新的
  }
};

// 以下函数与之前版本基本相同
const calculateTotalDays = (center) => {
  return center.stages.reduce((sum, stage) => sum + (Number(stage.days) || 0), 0);
};

const getStageStyle = (center, stage) => {
  const totalDays = calculateTotalDays(center);
  const widthPercentage = totalDays > 0 ? (stage.days / totalDays) * 100 : 0;
  return {
    width: `${widthPercentage}%`,
    backgroundColor: stage.color,
  };
};

const saveSettings = () => {
  console.log('正在保存设置...');
  alert('所有中心的设置已保存！请在浏览器控制台查看最新数据。');
  console.log('最新的营期数据:', JSON.parse(JSON.stringify(centersData.value)));
};
</script>

<style scoped>
/* 整体面板 */
.camp-management-board {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  color: #333;
}

.board-header {
  /* margin-bottom: 24px; */
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.board-header h1 { margin: 0; font-size: 20px; color: #2c3e50; }
.board-header p { color: #7f8c8d; margin: 8px 0 16px; }
.save-button { padding: 10px 20px; font-size: 14px; font-weight: bold; color: #fff; background-color: #4caf50; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; }
.save-button:hover { background-color: #45a049; }

/* 总览面板 */
.overview-panel {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 保证内部元素不超出圆角 */
}

.overview-header {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background-color: #f8f9fa;
  color: #6c757d;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid #e9ecef;
}
.header-name { width: 15%; }
.header-stage { width: 15%; text-align: center; }
.header-timeline { flex: 1; text-align: center; }
.header-days { width: 10%; text-align: right; }


/* 中心概览行 */
.center-summary-row {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.center-summary-row:last-child {
  border-bottom: none;
}
.center-summary-row:hover {
  background-color: #f1f3f5;
}
.center-summary-row.selected {
  background-color: #e7f5ff; /* 选中时的背景色 */
  border-left: 4px solid #1c7ed6; /* 选中时左侧的强调线 */
  padding-left: 20px;
}

.center-name { width: 15%; font-size: 18px; font-weight: 500; color: #34495e; }
.current-stage { width: 15%; text-align: center; font-size: 16px; font-weight: 500; color: #28a745; }
.timeline-bar { flex: 1; display: flex; height: 32px; border-radius: 6px; background-color: #e9ecef; overflow: hidden; margin: 0 20px; }
.timeline-segment { height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.total-days { width: 10%; text-align: right; font-size: 18px; font-weight: bold; color: #e67e22; }

/* 详情调控面板 */
.detail-control-panel {
  /* padding: 20px 24px 12px 24px; */
  background-color: #fafafa;
  border-bottom: 1px solid #e9ecef
}
.detail-control-panel h4 { margin-top: 0; margin-bottom: 16px; font-size: 16px; color: #1c7ed6; }
.detail-control-panel .control-items-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  /* flex-wrap: wrap; */
}
.control-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 15px;
}
.color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.stage-name-detail {width: 50px; font-size: 16px; flex-shrink: 0; }
.days-input { width: 70px; padding: 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font-size: 16px; margin-right: 8px; }
.days-input:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); }

/* 过渡动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>