<template>
  <div class="university-detail">
    <!-- 背景区域 -->
    <div class="bg-area">
      <div class="bg-overlay"></div>
    </div>

    <!-- 可滚动内容区 -->
    <div class="scroll-container">
      <!-- 头部信息 -->
      <div class="header-section">
        <div class="header-content">
          <div class="logo">
            <img :src="universityInfo.logo" alt="University Logo" />
          </div>
          <div class="info">
            <div class="name-row">
              <h1 class="name-cn">{{ universityInfo.name }}</h1>
              <span class="name-en">{{ universityInfo.ename }}</span>
            </div>
            <p class="description">{{ universityInfo.description }}</p>
            <div class="tags">
              <AreaTag v-for="(tag, index) in universityInfo.tags" :key="index" :tag-name="tag.name" :type="tag.type" />
            </div>
          </div>
          <div class="visit-btn" @click="handleVisitWebsite">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 12.6667H4C3.26667 12.6667 2.66667 12.0667 2.66667 11.3333V4.66667C2.66667 3.93333 3.26667 3.33333 4 3.33333H7.33333V4.66667H4V11.3333H12V8H13.3333V11.3333C13.3333 12.0667 12.7333 12.6667 12 12.6667ZM8.66667 7.72L12 4.39333V6.66667H13.3333V2.66667H9.33333V4H11.6067L8.27333 7.33333L8.66667 7.72Z" fill="white"/>
            </svg>
            <span>查看官网</span>
          </div>
        </div>
      </div>

      <!-- 导航切换 -->
      <div class="nav-tabs">
        <div 
          v-for="tab in tabs" 
          :key="tab" 
          :class="['nav-tab', { active: activeTab === tab }]"
          @click="activeTab = tab"
        >
          {{ tab }}
        </div>
      </div>

      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- 学校详情Tab -->
        <SchoolDetail 
          v-if="activeTab === '学校详情'"
          :basic-info="basicInfo"
          :key-people="keyPeople"
          :statistics="statistics"
          :history-events="historyEvents"
          :latest-dynamics="latestDynamics"
          :total-dynamics="totalDynamics"
          @page-change="handlePageChange"
        />

        <!-- 科研实力Tab -->
        <ResearchStrength v-else-if="activeTab === '科研实力'" />

        <Cooperation v-else-if="activeTab === '合作情况'" />

        <OtherInfo v-else-if="activeTab === '其他情况'" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AreaTag from '@/components/base/AreaTag/index.vue'
import SchoolDetail from './tabs/SchoolDetail.vue'
import ResearchStrength from './tabs/ResearchStrength.vue'
import Cooperation from './tabs/Cooperation.vue'
import OtherInfo from './tabs/OtherInfo.vue'

// 大学基本信息
const universityInfo = ref({
  name: '哈佛大学',
  ename: 'Harvard University',
  description: '哈佛大学是 1636 年创立于美国马萨诸塞州剑桥市的顶尖私立研究型大学，为常春藤盟校成员，科研与学术影响力卓著。',
  logo: 'https://upload.wikimedia.org/wikipedia/en/thumb/2/29/Harvard_shield_wreath.svg/1200px-Harvard_shield_wreath.svg.png',
  tags: [
    { name: '人工智能', type: 'tag1' },
    { name: '航空航天', type: 'tag6' },
    { name: '先进制造', type: 'tag10' },
    { name: '太空', type: 'tag2' }
  ]
})

// 导航标签
const tabs = ref(['学校详情', '科研实力', '合作情况', '其他情况'])
const activeTab = ref('学校详情')

// 基本信息
const basicInfo = ref({
  image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Harvard_University_Memorial_Hall.jpg/1200px-Harvard_University_Memorial_Hall.jpg',
  establishedTime: '1636年',
  location: '剑桥市、马萨诸塞州、美国',
  nature: '私立研究型大学',
  studentCount: '约22,000人',
  staffCount: '约2,400人',
  qsRanking: '#1',
  focusTags: [
    { name: '核心技术领域7', type: 'tag6' },
    { name: '气候变化解决方案', type: 'tag6' },
    { name: '人工智能伦理', type: 'tag6' },
    { name: '跨学科交叉领域', type: 'tag6' }
  ]
})

// 重点人物
const keyPeople = ref([
  { 
    name: '艾伦·M·加伯', 
    title: '第30任校长', 
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'
  },
  { 
    name: '迈克尔·桑德尔', 
    title: '政府学教授', 
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
  },
  { 
    name: '拉凯什·库拉纳', 
    title: '哈佛学院院长', 
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face'
  },
  { 
    name: '乔治·丘吉', 
    title: '哈佛医学院遗传学教授', 
    avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face'
  }
])

// 统计数据
const statistics = ref([
  { label: '诺贝尔奖', value: '161', color: 'rgba(5, 95, 194, 1)' },
  { label: '图灵奖', value: '18', color: 'rgba(250, 173, 20, 1)' },
  { label: '菲尔兹奖', value: '14', color: 'rgba(5, 95, 194, 1)' },
  { label: '美国院士', value: '273', color: 'rgba(250, 173, 20, 1)' }
])

// 历史事件
const historyEvents = ref([
  { 
    year: '2023年', 
    title: '克劳丁·盖伊成为首位非裔女校长',
    description: '克劳丁·盖伊（Claudine Gay）正式就任哈佛大学第30任校长，成为学校历史上首位非洲裔女性校长。'
  },
  { 
    year: '1999年', 
    title: '拉德克利夫学院转型为"拉德克利夫高等研究院"',
    description: '为了加强女性在研究和学术中的地位，拉德克利夫学院转型为专业研究机构。'
  },
  { 
    year: '1977年', 
    title: '哈佛与拉德克利夫学院正式合并注册',
    description: '哈佛大学与拉德克利夫学院在招生、财务和管理方面实现全面整合。'
  },
  { 
    year: '1950年', 
    title: '逐步整合招生中的宗教、种族限制',
    description: '哈佛开始审视并逐步移除招生中的种族和宗教歧视政策，推进学生群体多元化。'
  },
  { 
    year: '1908年', 
    title: '哈佛商学院成立，首创MBA案例教学法',
    description: '哈佛商学院正式成立，率先采用案例教学法，成为现代商学教育的奠基者。'
  },
  { 
    year: '1869年', 
    title: '查尔斯·W·艾略特任校长',
    description: '查尔斯·W·艾略特（Charles William Eliot）出任哈佛校长，任期长达40年。在其领导下，哈佛推行选修制改革、重建法学院和医学院、新建商学院等。'
  },
  { 
    year: '1636年', 
    title: '哈佛大学成立',
    description: '哈佛大学在美国马萨诸塞州剑桥市成立，是美国第一所大学，也是常春藤盟校中最古老的成员。'
  }
])

// 最新动态
const latestDynamics = ref([
  {
    year: '2025',
    date: '10月10日',
    title: '哈佛大学再遭电话钓鱼攻击致数据泄露',
    content: '一名未授权人员通过社会工程手段入侵校友数据库，泄露联系方式、捐赠记录等信息。这是该校2025年内第二次重大数据泄露事件。',
    tags: [{ name: '数安治理', type: 'tag9' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '10月4日',
    title: '哈佛医学院发生爆炸，警方认定系蓄意制造',
    content: '2024年11月1日凌晨2:49，哈佛医学院一栋教学楼四层发生爆炸，无人伤亡，波士顿警方公布两名震惊罪犯确人监控画面，FBI介入调查。',
    tags: [{ name: '恐怖袭击', type: 'tag1' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '9月29日',
    title: '常春藤盟校联合加强网络安全联盟',
    content: '哈佛与普林斯顿、耶鲁、斯坦福比亚等校宣布成立"常春藤网络安全协作体"，应对日益频繁的恶意网络攻击。',
    tags: [{ name: '生物科技', type: 'tag2' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '9月21日',
    title: '哈佛校长克劳丁·盖伊因学术诚信争议辞职',
    content: '首位非裔女校长克劳丁·盖伊（Claudine Gay）因多篇论文涉嫌抄袭及国会听证会上言论引发舆论风暴，上任不足一年即辞职。',
    tags: [{ name: '先进制造', type: 'tag10' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '9月15日',
    title: '艾伦·M·加伯接任临时校长',
    content: '原教务长艾伦·加伯（Alan M. Garber）出任哈佛第30任校长（临时），并完整复学术诚信与校园团结。',
    tags: [{ name: '集成电路', type: 'tag6' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '9月11日',
    title: '联邦法官叫停特朗普政府"禁招国际学生"令',
    content: '2025年5月29日，马萨诸塞州联邦法官艾莉森·伯恩斯顿发布临时限制令，阻止国土安全部驱逐哈佛招收国际学生资质。',
    tags: [{ name: '集成电路', type: 'tag6' }],
    isHighlight: true
  },
  {
    year: '2025',
    date: '8月28日',
    title: '哈佛启动"AI与伦理"研究中心',
    content: '投资500万美元成立新的跨学科研究中心，旨在探索人工智能技术的伦理应用和社会影响，汇聚全球顶尖学者。',
    tags: [{ name: '人工智能', type: 'tag1' }]
  },
  {
    year: '2025',
    date: '8月15日',
    title: '哈佛医学院宣布重大癌症研究突破',
    content: '研究团队开发出新型免疫疗法，在临床试验中显示出对晚期肺癌的显著疗效，成果已发表于《自然》杂志。',
    tags: [{ name: '生物医学', type: 'tag2' }]
  },
  {
    year: '2025',
    date: '7月30日',
    title: '哈佛大学与MIT联合建立量子计算实验室',
    content: '两校联合投资1亿美元，共同建立量子计算与信息研究实验室，推进量子技术的商业化应用。',
    tags: [{ name: '前沿科技', type: 'tag11' }]
  },
  {
    year: '2025',
    date: '7月10日',
    title: '2025年学年入学录取率创历史新低',
    content: '2025年度本科生申请录取率仅为3.2%，创造了美国高等教育历史新低，共录取1,380名学生。',
    tags: [{ name: '教育新闻', type: 'tag12' }]
  },
  {
    year: '2025',
    date: '6月20日',
    title: '哈佛成立"气候变化研究全球中心"',
    content: '新成立的中心将汇聚来自20个国家的气候科学家，共同应对全球气候变化挑战，年度预算达3000万美元。',
    tags: [{ name: '气候变化', type: 'tag7' }]
  },
  {
    year: '2025',
    date: '6月5日',
    title: '哈佛建筑学院获普利兹克建筑学奖',
    content: '著名建筑师与哈佛建筑学院合作的项目获得2025年普利兹克建筑学奖，该奖项被誉为建筑领域的"诺贝尔奖"。',
    tags: [{ name: '艺术建筑', type: 'tag8' }]
  },
  {
    year: '2025',
    date: '5月15日',
    title: '哈佛捐赠基金规模首次突破500亿美元',
    content: '截至2024年6月30日，哈佛捐赠基金达501亿美元，创历史新高，位列全球大学捐赠基金首位。',
    tags: [{ name: '财务报告', type: 'tag13' }]
  },
  {
    year: '2025',
    date: '4月28日',
    title: '哈佛法学院宣布取消LSAT考试要求',
    content: '从2025年秋季开始，申请人可无需提交LSAT成绩，法学院将采用更全面的综合评估方式审核申请。',
    tags: [{ name: '招生政策', type: 'tag14' }]
  }
])

// 分页
const totalDynamics = ref(256)

const handlePageChange = (page) => {
  console.log('Page changed to:', page)
  // 这里可以调用API获取对应页的数据
}

const handleVisitWebsite = () => {
  window.open('https://www.harvard.edu', '_blank')
}
</script>

<style lang="scss" scoped>
.university-detail {
  width: 100%;
  height: 100vh;
  background: rgba(247, 248, 249, 1);
  position: relative;
  overflow: hidden;
}

.bg-area {
  width: 100%;
  height: 459px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #1e5799 0%, #207cca 50%, #2989d8 100%);
  z-index: 1;
  
  .bg-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(30, 87, 153, 0.8), rgba(32, 124, 202, 0.6));
  }
}

.scroll-container {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50px;
}

.header-section {
  padding: 80px;
  display: flex;
  justify-content: center;
  
  .header-content {
    width: 1600px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    
    .logo {
      width: 110px;
      height: 130px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }
    
    .info {
      flex: 1;
      
      .name-row {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 8px;
        
        .name-cn {
          font-size: 32px;
          font-weight: 700;
          font-family: 'Microsoft YaHei', sans-serif;
          color: white;
          margin: 0;
        }
        
        .name-en {
          font-size: 16px;
          font-weight: 400;
          font-family: 'Microsoft YaHei', sans-serif;
          color: rgba(255, 255, 255, 0.9);
        }
      }
      
      .description {
        font-size: 16px;
        font-weight: 400;
        font-family: 'Microsoft YaHei', sans-serif;
        line-height: 24px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 12px;
      }
      
      .tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
    }
    
    .visit-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: rgba(5, 95, 194, 1);
      border-radius: 4px;
      color: white;
      font-size: 14px;
      font-family: 'Microsoft YaHei', sans-serif;
      cursor: pointer;
      transition: opacity 0.2s;
      
      &:hover {
        opacity: 0.9;
      }
    }
  }
}

.nav-tabs {
  display: flex;
  justify-content: center;
  margin: 0 auto 16px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
  width: 1600px;
  margin-left: auto;
  margin-right: auto;
  
  .nav-tab {
    flex: 1;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    font-family: 'Microsoft YaHei', sans-serif;
    color: rgb(59, 65, 75);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover {
      background: rgba(231, 243, 255, 1);
    }
    
    &.active {
      font-size: 24px;
      font-weight: 700;
      color: rgb(5, 95, 194);
      background: rgba(231, 243, 255, 1);
      border: 2px solid rgba(174, 214, 255, 1);
    }
  }
}

.main-content {
  display: flex;
  justify-content: center;
  
  > * {
    width: 1600px;
  }
}

.placeholder-content {
  padding: 100px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
  text-align: center;
  
  .placeholder-text {
    font-size: 20px;
    color: rgb(132, 136, 142);
    font-family: 'Microsoft YaHei', sans-serif;
  }
}
</style>
