<template>
  <div class="other-info-content">
    <AnalysisBox title="重点实验室" width="100%" height="auto" :show-all-btn="false" class="labs-box">
      <div class="labs-grid">
        <div v-for="(lab, index) in labsData" :key="index" class="lab-card">
          <div class="lab-logo">
            <img :src="lab.logo" :alt="lab.name" />
          </div>
          <div class="lab-name">{{ lab.name }}</div>
          <div class="lab-description">{{ lab.description }}</div>
          <div class="lab-tags">
            <AreaTag v-for="(tag, tagIdx) in lab.tags" :key="tagIdx" :tag-name="tag.name" :type="tag.type" />
          </div>
        </div>
      </div>
    </AnalysisBox>

    <AnalysisBox title="政策文件" width="100%" height="auto" :show-all-btn="false" class="policy-box">
      <div class="policy-grid">
        <div v-for="(policy, index) in policyData" :key="index" class="policy-card">
          <div class="policy-icon">
            <!-- <img src="/images/policy-icon.png" alt="policy" /> -->
          </div>
          <div class="policy-content">
            <div class="policy-title">{{ policy.title }}</div>
            <div class="policy-description">{{ policy.description }}</div>
          </div>
        </div>
      </div>
      <div class="pagination-area">
        <div class="total-count">共{{ totalCount }}篇合作动态</div>
        <div class="pagination">
          <LeftBtn @click="prevPage" />
          <span v-for="page in displayPages" :key="page" :class="['page-num', { active: page === currentPage }]" @click="goToPage(page)">
            {{ page === '...' ? '...' : page }}
          </span>
          <RightBtn @click="nextPage" />
        </div>
      </div>
    </AnalysisBox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import LeftBtn from '@/components/base/pageBtn/leftBtn.vue'
import RightBtn from '@/components/base/pageBtn/rightBtn.vue'
import AreaTag from '@/components/base/AreaTag/index.vue'

// 重点实验室数据
const labsData = ref([
  {
    logo: '/images/lab-wyss.png',
    name: '怀斯生物启发工程研究所',
    description: '成立于2009年，由汉斯约尔格·怀斯（Hansjörg Wyss）捐赠建立，聚焦仿生学与跨学科工程，推动医疗、机器人、材料等领域的突破。',
    tags: [{ name: '生物科技', type: 'tag2' }]
  },
  {
    logo: '/images/lab-rowland.png',
    name: '罗兰研究所',
    description: '原为独立研究机构，2002年并入哈佛，支持高风险、高回报的基础科学研究，尤其鼓励青年科学家。',
    tags: [{ name: '物理学', type: 'tag6' }, { name: '化学', type: 'tag10' }]
  },
  {
    logo: '/images/lab-quantum.png',
    name: '哈佛量子计划',
    description: '跨学院合作平台，整合物理、工程、计算机科学等资源，推动量子科学与技术发展。',
    tags: [{ name: '物理', type: 'tag6' }]
  },
  {
    logo: '/images/lab-broad.png',
    name: '博德研究所',
    description: '全球顶尖基因组学与生物医学研究中心，推动精准医学与疾病机制研究。',
    tags: [{ name: '医学', type: 'tag9' }]
  },
  {
    logo: '/images/lab-stem.png',
    name: '哈佛干细胞研究所',
    description: '成立于2004年，联合哈佛医学院、牙医学院、文理学院等，推动干细胞基础研究与临床转化。',
    tags: [{ name: '医学', type: 'tag9' }]
  },
  {
    logo: '/images/lab-cfa.png',
    name: '哈佛大学天体物理中心',
    description: '由哈佛大学与史密森尼学会于1973年联合成立，是全球规模最大、最活跃的天体物理研究机构之一。',
    tags: [{ name: '天体物理', type: 'tag3' }]
  }
])

// 政策文件数据
const policyData = ref([
  { title: '《哈佛大学权利与责任声明》', description: '阐明学生在言论自由、学术自由、正当程序、尊重他人等方面的权利与义务。' },
  { title: '《哈佛大学学术诚信政策》', description: '定义抄袭、作弊、伪造等学术不端行为，并规定处理流程。' },
  { title: '《哈佛大学反歧视与反骚扰政策》', description: '禁止基于种族、性别、性取向、宗教、残疾等的歧视与骚扰，明确举报与调查机制。' },
  { title: '《研究合规与人类受试者保护政策》', description: '规范涉及人类受试者的研究（如医学、心理学、社会学实验），确保符合联邦法规（如Common Rule）。' },
  { title: '《哈佛法学院学术政策手册》', description: '详述J.D./LL.M./S.J.D.学位要求、课程规则、成绩制度、书面作业要求、出勤规定、荣誉毕业标准等。' },
  { title: '《哈佛文理研究生院学生手册》', description: '涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。' }
])

// 分页相关
const currentPage = ref(5)
const totalCount = ref(105)
const totalPages = computed(() => Math.ceil(totalCount.value / 10))

const displayPages = computed(() => {
  const pages: (number | string)[] = []
  if (totalPages.value <= 7) {
    for (let i = 1; i <= totalPages.value; i++) pages.push(i)
  } else {
    pages.push(1)
    if (currentPage.value > 3) pages.push('...')
    const start = Math.max(2, currentPage.value - 1)
    const end = Math.min(totalPages.value - 1, currentPage.value + 1)
    for (let i = start; i <= end; i++) pages.push(i)
    if (currentPage.value < totalPages.value - 2) pages.push('...')
    pages.push(totalPages.value)
  }
  return pages
})

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

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
}

// 跳转到指定页
const goToPage = (page: number | string) => {
  if (typeof page === 'number') currentPage.value = page
}

// 获取标签样式

</script>

<style lang="scss" scoped>
.other-info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.labs-box {
  .labs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;

    .lab-card {
      padding: 16px;
      background: #FFFFFF;
      border: 1px solid #EAECEE;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .lab-logo {
        width: 40px;
        height: 40px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .lab-name {
        font-size: 16px;
        font-weight: 700;
        color: #3B414B;
        line-height: 24px;
      }

      .lab-description {
        font-size: 14px;
        color: #5F656C;
        line-height: 22px;
        flex: 1;
      }

      .lab-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;


      }
    }
  }
}

.policy-box {
  .policy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;

    .policy-card {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: #FFFFFF;
      border: 1px solid #EAECEE;
      border-radius: 4px;

      .policy-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .policy-content {
        flex: 1;

        .policy-title {
          font-size: 16px;
          font-weight: 700;
          color: #3B414B;
          line-height: 24px;
          margin-bottom: 8px;
        }

        .policy-description {
          font-size: 14px;
          color: #5F656C;
          line-height: 22px;
        }
      }
    }
  }

  .pagination-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #EAECEE;

    .total-count {
      font-size: 14px;
      color: #84888E;
    }

    .pagination {
      display: flex;
      align-items: center;
      gap: 8px;

      .page-num {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #3B414B;
        cursor: pointer;
        border-radius: 4px;

        &:hover {
          background: #F6FAFF;
        }

        &.active {
          background: #055FC2;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
