<template>
  <div class="cases-timeline">
    <div class="timeline-line-row">
      <div class="top-line">
        <div class="top-line1"></div>
      </div>
    </div>

    <div class="cases-carousel">
      <LeftBtn @click="prevCases" />

      <div class="cases-items">
        <div v-for="(item, index) in visibleCases" :key="index" class="case-item">
          <div class="case-date">{{ item.date }}</div>
          <div class="node-dot"></div>
          <div class="connector-line"></div>
          <div class="case-card">
            <div class="case-tag" :class="item.tagType">{{ item.tag }}</div>
            <div class="case-partner">合作主体：{{ item.partner }}</div>
            <div class="case-title">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <RightBtn @click="nextCases" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import LeftBtn from '@/components/base/PageBtn/LeftBtn.vue'
import RightBtn from '@/components/base/PageBtn/RightBtn.vue'

interface CaseItem {
  date: string
  tag: string
  tagType: 'project' | 'patent' | 'paper'
  partner: string
  title: string
}

const props = withDefaults(defineProps<{
  data?: CaseItem[]
  pageSize?: number
}>(), {
  pageSize: 4
})

const defaultData: CaseItem[] = [
  { date: '2025年3月12日', tag: '项目合作', tagType: 'project', partner: '清华大学', title: '"气候变化、碳中和与能源智联"(CNEST)研讨会' },
  { date: '2025年5月7日', tag: '专利合作', tagType: 'patent', partner: '北京航空航天大学', title: '北航－哈佛 Wood 实验室联合研制鲤鱼仿生吸盘机器人' },
  { date: '2025年6月23日', tag: '论文合作', tagType: 'paper', partner: '山西省古建筑与彩塑壁画保护研究院', title: '山西古建院－哈佛中国艺术实验室合作' },
  { date: '2025年10月19日', tag: '项目合作', tagType: 'project', partner: '复旦大学、四川大学', title: '哈佛中国健康伙伴计划多机构合作' },
  { date: '2024年12月5日', tag: '论文合作', tagType: 'paper', partner: '北京大学', title: '人工智能在医疗诊断中的应用研究' },
  { date: '2024年9月18日', tag: '专利合作', tagType: 'patent', partner: '中国科学院', title: '新型纳米材料在能源存储中的应用专利' },
  { date: '2024年7月22日', tag: '项目合作', tagType: 'project', partner: '上海交通大学', title: '智能制造与工业4.0联合研究项目' },
  { date: '2024年4月10日', tag: '论文合作', tagType: 'paper', partner: '浙江大学', title: '量子计算在密码学中的突破性进展' },
  { date: '2024年2月28日', tag: '专利合作', tagType: 'patent', partner: '南京大学', title: '生物降解塑料新型合成技术专利' },
  { date: '2023年11月15日', tag: '项目合作', tagType: 'project', partner: '武汉大学', title: '长江流域生态环境保护联合研究' }
]

const casesData = computed(() => props.data && props.data.length > 0 ? props.data : defaultData)

const currentPage = ref(0)

const visibleCases = computed(() => {
  const start = currentPage.value * props.pageSize
  return casesData.value.slice(start, start + props.pageSize)
})

const totalPages = computed(() => Math.ceil(casesData.value.length / props.pageSize))

// 上一页
const prevCases = () => {
  if (currentPage.value > 0) {
    currentPage.value--
  }
}

// 下一页
const nextCases = () => {
  if (currentPage.value < totalPages.value - 1) {
    currentPage.value++
  }
}
</script>

<style lang="scss" scoped>
.cases-timeline {
  padding: 24px 16px;
  position: relative;

  .timeline-line-row {
    position: absolute;
    left: 48px;
    right: 48px;
    top: calc(24px + 22px + 8px + 11px - 4px);
    height: 8px;
    z-index: 0;

    .top-line {
      width: 100%;
      height: 8px;
      background: url('../assets/top-line-icon.png') repeat-x;
      background-size: auto 8px;

      .top-line1 {
        display: none;
      }
    }
  }

  .cases-carousel {
    display: flex;
    align-items: center;
    gap: 60px;

    .cases-items {
      flex: 1;
      display: flex;
      gap: 60px;
      overflow: hidden;
      margin-top: 9px;
      .case-item {
        flex-shrink: 0;
        width: 273px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        z-index: 1;

        .case-date {
          font-size: 14px;
          font-weight: 700;
          color: #055FC2;
          margin-bottom: 8px;
          padding-left: 2px;
        }

        .node-dot {
          width: 11px;
          height: 11px;
          border-radius: 50%;
          background: #fff;
          border: 4px solid #1677FF;
          box-sizing: border-box;
          position: relative;
          z-index: 2;
        }

        .connector-line {
          width: 1px;
          height: 20px;
          background: #1677FF;
          margin-left: 5px;
        }

        .case-card {
          width: 273px;
          min-height: 210px;
          padding: 16px;
          background: #FFFFFF;
          border: 1px solid #E5E7EB;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .case-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            width: fit-content;

            &.project {
              background: #FFF1F0;
              color: #F5222D;
              border: 1px solid #FFA39E;
            }

            &.patent {
              background: #FFFBE6;
              color: #FAAD14;
              border: 1px solid #FFE58F;
            }

            &.paper {
              background: #F0F5FF;
              color: #2F54EB;
              border: 1px solid #ADC6FF;
            }
          }

          .case-partner {
            font-size: 14px;
            color: #5F656C;
          }

          .case-title {
            font-size: 16px;
            font-weight: 700;
            color: #3B414B;
            line-height: 24px;
          }
        }
      }
    }
  }
}
</style>
