﻿<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'

// 导入子组件
import SchoolOverview from '~/components/school/SchoolOverview.vue'
import HistoricalScores from '~/components/school/HistoricalScores.vue'
import EnrollmentPlan from '~/components/school/EnrollmentPlan.vue'
import Majors from '~/components/school/Majors.vue'
import AdmissionPrediction from '~/components/school/AdmissionPrediction.vue'

// --- 类型定义 ---
interface Ranking {
  label: string
  value: number
  trend?: 'up' | 'down' | 'flat'
}

interface Major {
  college: string
  majors: string[]
}

// --- 状态数据 ---
const route = useRoute('/school/[schoolCode]')
const schoolCode = ref('')

const activeLocationTab = ref('唐岛湾校区')
const activeNavTab = ref('学校概况')

// 轮播图相关
const currentSlide = ref(0)
const carouselInterval = ref<number | null>(null)
const bannerImages = [
  'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=1200&h=400&fit=crop',
  'https://images.unsplash.com/photo-1562774053-701939374585?w=1200&h=400&fit=crop',
  'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=1200&h=400&fit=crop',
  'https://images.unsplash.com/photo-1591380542610-f6263b6884b3?w=1200&h=400&fit=crop',
]

// 基础信息数据
// const stats: StatItem[] = [
//   { label: '建校时间', value: '1953年', icon: '📅' },
//   { label: '占地面积', value: '5000亩', icon: '⛳' },
//   { label: '主管部门', value: '教育部', icon: '🏛️' },
//   { label: '博士点', value: '16个', icon: '🎓' },
//   { label: '硕士点', value: '33个', icon: '📜' },
//   { label: '国家重点学科', value: '5个', icon: '⭐' },
// ];

const rankings: Ranking[] = [
  { label: '软科综合', value: 67 },
  { label: '校友会综合', value: 80 },
  { label: 'US世界', value: 500 },
  { label: '人气值排名', value: 70 },
]

// 院系设置数据 (模拟部分)
const departments: Major[] = [
  { college: '地球科学与技术学院', majors: ['勘查技术与工程', '地质学', '资源勘查工程', '地球物理学'] },
  { college: '石油工程学院', majors: ['海洋油气工程', '石油工程', '碳储科学与工程'] },
  { college: '化学化工学院', majors: ['化学', '化学工程与工艺', '应用化学', '环境工程', '能源化学工程'] },
  { college: '机电工程学院', majors: ['安全工程', '工业设计', '智能制造工程', '机械设计制造及其自动化'] },
  { college: '储运与建筑工程学院', majors: ['土木工程', '工程力学', '建筑环境与能源应用工程', '油气储运工程'] },
]

// 校园配置数据
const facilities = [
  { name: '4人/间', icon: '🛏️' },
  { name: '5个食堂', icon: '🍚' },
  { name: '上床下桌', icon: '🪑' },
  { name: '独立卫浴', icon: '🚿' },
  { name: '有空调', icon: '❄️' },
  { name: '有游泳馆', icon: '🏊' },
]

// 校园风光图片
const sceneryImages = [
  'https://images.unsplash.com/photo-1564981797816-1043664bf78d?w=400&h=300&fit=crop',
  'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&h=300&fit=crop',
  'https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?w=400&h=300&fit=crop',
  'https://images.unsplash.com/photo-1607237138185-eedd9c632b0b?w=400&h=300&fit=crop',
]

// 校区地址数据
const locationInfo = computed(() => {
  return activeLocationTab.value === '唐岛湾校区'
    ? { address: '山东省青岛市黄岛区长江西路66号', details: '附近3km内分布着 58个餐饮场所...' }
    : { address: '山东省东营市...', details: '老校区历史悠久...' }
})

// 轮播图函数
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % bannerImages.length
}

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + bannerImages.length) % bannerImages.length
}

const goToSlide = (index: number) => {
  currentSlide.value = index
}

const startCarousel = () => {
  carouselInterval.value = window.setInterval(nextSlide, 4000)
}

const stopCarousel = () => {
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value)
    carouselInterval.value = null
  }
}

// 关注按钮点击事件
const handleFollow = () => {
  console.log('关注学校:', schoolCode.value)
  // TODO: 实现关注逻辑
}

// 加入对比按钮点击事件
const handleCompare = () => {
  console.log('加入对比:', schoolCode.value)
  // TODO: 实现对比逻辑
}

onMounted(() => {
  startCarousel()
})

onUnmounted(() => {
  stopCarousel()
})

watchEffect(() => {
  schoolCode.value = route.params.schoolCode
})
useHead({
  title: () => { return `${schoolCode.value}|艺体志愿宝` },
})
</script>

<template>
  <div class="mx-auto max-w-7xl min-h-screen bg-gray-50 px-4 transition-colors duration-300 dark:bg-slate-900 lg:px-8 sm:px-6">
    <!-- 顶部导航 & Header sticky -->
    <header class="top-0 z-50 shadow-sm">
      <div class="mb-8 mt-8 rounded-lg bg-white dark:bg-slate-800">
        <div class="h-20 flex items-center justify-between">
          <div class="flex items-center gap-4">
            <div class="h-16 w-16 flex items-center justify-center rounded-full bg-blue-900 text-sm text-white font-bold">
              Logo
            </div>
            <div>
              <h1 class="text-2xl text-gray-900 font-bold dark:text-white">
                中国石油大学（华东）
              </h1>
              <div class="flex gap-2 text-sm text-gray-500 dark:text-gray-400">
                <span>公办</span><span>|</span><span>理工类</span><span>|</span><span>教育部直属</span>
              </div>
            </div>
            <!-- 标签 -->
            <div class="ml-4 hidden gap-1 md:flex">
              <span class="border border-orange-500 rounded px-2 py-0.5 text-sm text-orange-500">211</span>
              <span class="border border-orange-500 rounded px-2 py-0.5 text-sm text-orange-500">双一流</span>
            </div>
          </div>
          <!-- 关注和对比按钮 -->
          <div class="flex gap-3">
            <button
              class="flex items-center gap-1.5 rounded-full border-2 border-orange-500 px-4 py-2 text-sm text-orange-500 font-medium transition hover:bg-orange-500 hover:text-white"
              @click="handleFollow"
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              关注
            </button>
            <button
              class="flex items-center gap-1.5 rounded-full bg-orange-500 px-4 py-2 text-sm text-white font-medium transition hover:bg-orange-600"
              @click="handleCompare"
            >
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              加入对比
            </button>
          </div>
        </div>

        <!-- 导航菜单 -->
        <nav class="scrollbar-hide flex overflow-x-auto pt-4 pb-2 text-base text-gray-500 font-medium space-x-8 sm:pb-0 dark:text-gray-400">
          <button
            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
            :class="activeNavTab === '学校概况' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
            @click="activeNavTab = '学校概况'"
          >
            学校概况
          </button>
          <button
            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
            :class="activeNavTab === '历年分数' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
            @click="activeNavTab = '历年分数'"
          >
            历年分数
          </button>
          <button
            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
            :class="activeNavTab === '招生计划' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
            @click="activeNavTab = '招生计划'"
          >
            招生计划
          </button>
          <button
            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
            :class="activeNavTab === '开设专业' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
            @click="activeNavTab = '开设专业'"
          >
            开设专业
          </button>
          <button
            class="whitespace-nowrap border-b-2 pb-3 transition-colors"
            :class="activeNavTab === '录取预测' ? 'border-orange-500 text-orange-600 dark:text-orange-400' : 'border-transparent hover:text-gray-700 dark:hover:text-gray-200'"
            @click="activeNavTab = '录取预测'"
          >
            录取预测
          </button>
        </nav>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <!-- mx-auto max-w-7xl px-4 py-6 lg:px-8 sm:px-6 -->
    <main class="mx-auto max-w-7xl">
      <!-- 顶部 Banner 信息卡片 -->
      <div class="mb-6 overflow-hidden rounded-lg bg-white shadow dark:bg-slate-800">
        <!-- 轮播图 -->
        <div class="relative h-48 bg-cover bg-center md:h-64" :style="{ backgroundImage: `url(${bannerImages[currentSlide]})` }">
          <!-- 左右切换按钮 -->
          <button
            class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
            @click="prevSlide"
          >
            ◀
          </button>
          <button
            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/30 p-2 text-white backdrop-blur-sm transition hover:bg-black/50"
            @click="nextSlide"
          >
            ▶
          </button>

          <!-- 轮播指示器 -->
          <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2">
            <button
              v-for="(img, index) in bannerImages"
              :key="index"
              class="h-2 w-2 rounded-full transition-all"
              :class="currentSlide === index ? 'w-8 bg-white' : 'bg-white/50'"
              @click="goToSlide(index)"
            />
          </div>

          <!-- 右上角按钮 -->
          <div class="absolute bottom-4 right-4 flex gap-2">
            <button class="rounded bg-black/50 px-3 py-1 text-sm text-white backdrop-blur-sm hover:bg-black/70">
              📺 视频
            </button>
            <button class="rounded bg-white/90 px-3 py-1 text-sm text-gray-800 backdrop-blur-sm hover:bg-white">
              📷 校园风光
            </button>
          </div>
        </div>

        <!-- 快速统计信息栏 -->
        <div class="grid grid-cols-2 gap-4 border-b border-gray-100 p-3 md:grid-cols-5 sm:grid-cols-4 dark:border-slate-700">
          <div class="flex items-start gap-2">
            <div class="text-xl text-orange-500">
              🕒
            </div>
            <div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                建校时间
              </p>
              <p class="text-gray-900 font-medium dark:text-white">
                1953年
              </p>
            </div>
          </div>
          <div class="flex items-start gap-2">
            <div class="text-xl text-purple-500">
              ⛳
            </div>
            <div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                占地面积
              </p>
              <p class="text-gray-900 font-medium dark:text-white">
                5000亩
              </p>
            </div>
          </div>
          <div class="flex items-start gap-2">
            <div class="text-xl text-blue-500">
              🎓
            </div>
            <div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                主管部门
              </p>
              <p class="text-gray-900 font-medium dark:text-white">
                教育部
              </p>
            </div>
          </div>
          <div class="flex items-start gap-2">
            <div class="text-xl text-blue-500">
              📞
            </div>
            <div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                联系电话
              </p>
              <p class="text-gray-900 font-medium dark:text-white">
                0532-86983086
              </p>
            </div>
          </div>
          <div class="flex items-start gap-2">
            <div class="text-xl text-blue-500">
              📧
            </div>
            <div>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                邮箱
              </p>
              <p class="text-gray-900 font-medium dark:text-white">
                zhaosheng@upc.edu.cn
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 网格布局：左侧主内容，右侧简单侧边栏(可选) -->
      <div class="grid grid-cols-1 gap-6 lg:grid-cols-4">
        <!-- 左侧/主体内容 (占3份宽度) -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 子页面组件 -->
          <SchoolOverview v-show="activeNavTab === '学校概况'" />
          <HistoricalScores v-show="activeNavTab === '历年分数'" />
          <EnrollmentPlan v-show="activeNavTab === '招生计划'" />
          <Majors v-show="activeNavTab === '开设专业'" />
          <AdmissionPrediction v-show="activeNavTab === '录取预测'" />
        </div>
        <!-- 右侧侧边栏 (保留男女比例，其他已移除) -->
        <div class="hidden lg:col-span-1 lg:block space-y-6">
          <!-- 男女比例 -->
          <div class="rounded-lg bg-white p-6 shadow-sm dark:bg-slate-800">
            <h3 class="mb-4 text-gray-900 font-bold dark:text-white">
              男女比例
            </h3>
            <div class="mb-2 flex items-end justify-between">
              <div class="text-xl text-blue-500 font-bold">
                ♂ 70.12%
              </div>
              <div class="text-xl text-pink-500 font-bold">
                ♀ 29.88%
              </div>
            </div>
            <!-- 进度条 -->
            <div class="h-2 w-full flex overflow-hidden rounded-full bg-gray-200 dark:bg-slate-700">
              <div class="h-full bg-blue-500" style="width: 70%" />
              <div class="h-full bg-pink-500" style="width: 30%" />
            </div>
            <div class="mt-1 flex justify-between text-xs text-gray-400">
              <span>男生</span>
              <span>女生</span>
            </div>
          </div>

          <!-- 此处原有：毕业去向、分数推荐、留言板、高考工具箱等，均已移除 -->

          <!-- 占位：如果觉得右侧太空，可以放联系方式或者简单的文字链接 -->
          <div class="border border-blue-100 rounded-lg bg-blue-50 p-4 dark:border-slate-600 dark:bg-slate-700/50">
            <h4 class="mb-2 text-sm text-blue-800 font-bold dark:text-blue-300">
              招生办联系方式
            </h4>
            <p class="mb-1 text-xs text-gray-600 dark:text-gray-400">
              电话：0532-86983086
            </p>
            <p class="text-xs text-gray-600 dark:text-gray-400">
              邮箱：zhaosheng@upc.edu.cn
            </p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
/* 隐藏滚动条但保留滚动功能 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569;
}
</style>
