<template>
  <div class="timeline-section">
    <h2 class="section-title">
      <i class="timeline-icon"></i>
      个人履历
    </h2>
    <div class="timeline">
      <!-- 时间节点 -->
      <div class="timeline-items">
        <div v-for="(item, index) in timelineData" :key="index" :class="['timeline-item', index % 2 === 0 ? 'top' : 'bottom']">
          <div class="content">
            <div class="year">{{ item.year }}</div>
            <div class="description">{{ item.description }}</div>
          </div>
          <div class="dot" :class="{ active: index === 0 }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const timelineData = ref([
    {
      year: '2020年',
      description: '新创设计21号项目设计~某月某空中机',
    },
    {
      year: '2021年',
      description: '南京工业大学机器人实验室项目',
    },
    {
      year: '2022年',
      description: '新创设计21号项目设计~某月某空中机',
    },
    {
      year: '2023年',
      description: '南京工业大学机器人实验室项目',
    },
    {
      year: '2023年',
      description: '南京工业大学机器人实验室项目',
    },
    {
      year: '2023年',
      description: '南京工业大学机器人实验室项目',
    },
    // 可以继续添加更多数据...
  ])
</script>

<style scoped>
  .timeline-section {
    margin: 30px 0;
    padding: 20px;
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 18px;
    color: #333;
  }

  .timeline {
    position: relative;
    padding: 40px 0;
  }

  .timeline-items {
    position: relative;
    display: grid; /* 改用grid布局 */
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    gap: 60px 20px; /* 行间距60px，列间距20px */
    z-index: 2;
  }

  .timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
  }

  /* 时间轴横线 - 为每一行创建独立的线 */
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    height: 2px;
    background-color: #e8f3ff;
    z-index: 1;
  }

  /* 连接相邻项目的横线 */
  .timeline-item::after {
    content: '';
    position: absolute;
    left: 50%;
    right: -50%;
    top: 50%;
    height: 2px;
    background-color: #e8f3ff;
    z-index: 1;
  }

  /* 最后一个项目不需要连接线 */
  .timeline-item:last-child::after {
    display: none;
  }

  .timeline-item.top {
    flex-direction: column;
  }

  .timeline-item.bottom {
    flex-direction: column-reverse;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #005be5;
    margin: 15px 0;
    z-index: 2;
  }

  .dot.active {
    background-color: #005be5;
  }

  .content {
    text-align: center;
    background-color: #fff;
    padding: 0 10px;
    width: 100%;
  }

  .top .content {
    padding-bottom: 20px;
  }

  .bottom .content {
    padding-top: 20px;
  }

  .year {
    font-size: 16px;
    color: #005be5;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }

  /* 响应式布局 */
  @media screen and (max-width: 1200px) {
    .timeline-items {
      grid-template-columns: repeat(3, 1fr); /* 3列 */
    }
  }

  @media screen and (max-width: 900px) {
    .timeline-items {
      grid-template-columns: repeat(2, 1fr); /* 2列 */
    }
  }

  @media screen and (max-width: 600px) {
    .timeline-items {
      grid-template-columns: 1fr; /* 1列 */
    }
  }
</style>
