<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, computed, provide } from 'vue'
import { useRoute } from 'vue-router'
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'
import bgImg from './assets/background.png'

// 从路由获取 orgId
const route = useRoute()
const orgId = computed(() => route.params.id || '')

// 提供给子组件使用
provide('orgId', orgId)

// 大学基本信息
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-1500648767791-00dcc994a43e?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-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(5, 95, 194, 1)' },
  { label: '菲尔兹奖', value: '14', color: 'rgba(5, 95, 194, 1)' },
  { label: '美国院士', value: '273', color: 'rgba(5, 95, 194, 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' }]
  },
  {
    year: '2025',
    date: '9月11日',
    title: '联邦法官叫停特朗普政府"禁招国际学生"令',
    content: '2025年5月29日，马萨诸塞州联邦法官艾莉森·伯恩斯顿发布临时限制令，阻止国土安全部驱逐哈佛招收国际学生资质。',
    tags: [{ name: '集成电路', type: 'tag6' }]
  },
  {
    year: '2025',
    date: '9月10日',
    title: '特朗普政府要求哈佛30天内提交"改革证据"',
    content: '美国教育部正式致函哈佛大学，要求在30天内提交针对招生公平、言论自由和反犹主义处理的整改方案与证据。',
    tags: [{ name: '人工智能', type: 'tag1' }]
  },
  {
    year: '2025',
    date: '9月1日',
    title: '哈佛2025届毕业典礼成政治声援现场',
    content: '毕业典礼上多名学生举起声援巴勒斯坦标语，部分毕业生在演讲环节集体转身背对校方领导，表达对学校处理巴以议题方式的不满。',
    tags: [{ name: '集成电路', type: 'tag6' }]
  },
  {
    year: '2025',
    date: '8月25日',
    title: '哈佛教授警告：国际博士生面临系统性驱逐风险',
    content: '多位哈佛教授联名发表公开信，警告当前移民政策下国际博士生面临签证被撤销和驱逐出境的系统性风险，呼吁联邦政府保障学术自由。',
    tags: [{ name: '能源', type: 'tag7' }, { name: '先进制造', type: 'tag10' }]
  },
  {
    year: '2025',
    date: '8月19日',
    title: '巴以冲突激化哈佛校园对立',
    content: '哈佛校园内亲以色列和亲巴勒斯坦学生团体多次发生激烈对峙，校方被迫加强安保措施并设立"自由表达区"。',
    tags: [{ name: '先进制造', type: 'tag10' }]
  },
  {
    year: '2025',
    date: '8月19日',
    title: '联邦法院裁定哈佛招生不构成种族歧视',
    content: '联邦上诉法院驳回原告上诉，维持原判认定哈佛大学在本科招生中考虑种族因素的做法不构成非法歧视。',
    tags: [{ name: '先进制造', type: 'tag10' }]
  },
  {
    year: '2025',
    date: '8月19日',
    title: '哈佛捐赠基金规模达509亿美元，全球第一',
    content: '截至2025财年末，哈佛大学捐赠基金规模达到509亿美元，继续稳居全球高校捐赠基金榜首，年均回报率达9.8%。',
    tags: [{ name: '先进制造', type: 'tag10' }]
  }
])

// 分页
const totalDynamics = ref(153)

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: url('/src/views/innovationSubject/innovativeInstitutions/assets/background.png') no-repeat center center;
  position: relative;
  overflow: hidden;
}

.bg-area {
  width: 100%;
  height: 459px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  .bg-overlay {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(30, 87, 153, 0.5), rgba(32, 124, 202, 0.3));
  }
}

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

.header-section {
  padding: 80px 160px;
  display: flex;
  justify-content: center;
  padding-bottom: 16px;
  .header-content {
    width: 1600px;
    height: 160px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    padding: 16px 19px;
    position: relative;

    .logo {
      width: 128px;
      height: 128px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 100px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: 100px;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .name-row {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .name-cn {
          font-size: 24px;
          font-weight: 700;
          font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
          color: rgba(59, 65, 75, 1);
          margin: 0;
        }

        .name-en {
          font-size: 16px;
          font-weight: 400;
          font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
          color: rgba(59, 65, 75, 1);
          line-height: 24px;
        }
      }

      .description {
        font-size: 16px;
        font-weight: 400;
        font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
        line-height: 24px;
        color: rgba(59, 65, 75, 1);
        text-align: justify;
        margin: 0;
      }

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

    .visit-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 16px;
      background: rgba(5, 95, 194, 1);
      border-radius: 6px;
      color: white;
      font-size: 16px;
      font-family: 'Microsoft YaHei', sans-serif;
      cursor: pointer;
      transition: opacity 0.2s;
      flex-shrink: 0;
      line-height: 22px;
      align-self: flex-start;
      margin-top: 16px;

      &: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>
