<template>
  <header class="header">
    <!-- 背景图片容器 -->
    <div class="header-background"></div>

    <div class="header-content">
      <div class="header-left">
        <div class="date-time">{{ currentDateTime }}</div>
      </div>
      <div class="header-center">
        <h1>{{ projectName }}</h1>
      </div>
      <div class="header-right">
        <button class="fullscreen-btn" @click="toggleFullscreen">
          {{ isFullscreen ? '退出全屏' : '全屏' }}
        </button>
        <div class="year-selector">
          <div class="year-display" @click="toggleDropdown">{{ selectedYear }}年</div>
          <div class="year-dropdown" v-if="dropdownOpen">
            <div
              v-for="year in years"
              :key="year"
              class="year-option"
              :class="{ active: year === selectedYear }"
              @click="selectYear(year)"
            >
              {{ year }}年
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

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

// 响应式数据
const currentDateTime = ref('')
const isFullscreen = ref(false)
const selectedYear = ref(new Date().getFullYear())
const dropdownOpen = ref(false)

// Props
const projectName = ref('淮阳区纪检同步·养老互老数字化治理中心')

// 计算属性：生成年份选项（当前年及前后5年）
const years = computed(() => {
  const current = new Date().getFullYear()
  const yearRange = []
  for (let i = current - 5; i <= current + 5; i++) {
    yearRange.push(i)
  }
  return yearRange
})

// 方法
const updateDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch((err) => {
      console.error(`Error attempting to enable fullscreen: ${err.message}`)
    })
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

const toggleDropdown = () => {
  dropdownOpen.value = !dropdownOpen.value
}

const selectYear = (year: number) => {
  selectedYear.value = year
  dropdownOpen.value = false
  console.log('Selected year:', year)
  // 这里可以添加年份变更后的逻辑
}

// 点击外部关闭下拉菜单
document.addEventListener('click', (e: MouseEvent) => {
  const yearSelector = document.querySelector('.year-selector')
  if (yearSelector && !yearSelector.contains(e.target as Node)) {
    dropdownOpen.value = false
  }
})

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 生命周期
onMounted(() => {
  updateDateTime()
  setInterval(updateDateTime, 1000)
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style lang="scss" scoped>
// SCSS变量定义
$header-height: 223px;
$primary-color: #06d4c2;
$neon-green: #00ff88;
$neon-blue: #00aaff;
$neon-cyan: #00ffe6;
$dark-bg: rgba(0, 30, 20, 0.9);
$transition-speed: 0.3s ease;

.header {
  height: $header-height;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;

  // 背景图片容器
  .header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/images/header_bg.png');
    background-size: contain;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 1;
  }

  // 内容容器
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 56px;
    position: relative;
    z-index: 10;

    // 左侧日期时间
    .header-left {
      position: absolute;
      bottom: -6px;

      .date-time {
        font-family: PingFang SC;
        font-size: 48px;
        color: $primary-color;
        font-weight: 500;
        line-height: 56px;
        letter-spacing: 2px;
      }
    }

    // 中间标题
    .header-center {
      margin: 0 auto;

      h1 {
        font-family: FZFengYaSongS-GB, FZFengYaSongS-GB;
        font-weight: 400;
        font-size: 82px;
        letter-spacing: 4px;
        text-shadow:
          1px 0px 1px rgba(184, 255, 248, 0.71),
          0px 4px 4px rgba(0, 0, 0, 0);
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(270deg, #78fee0 0%, rgba(5, 246, 192, 0.63) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }

    // 右侧功能区
    .header-right {
      position: absolute;
      right: 56px;
      bottom: -6px;
      display: flex;
      gap: 20px;
      align-items: center;

      // 全屏按钮
      .fullscreen-btn {
        position: relative;
        width: 212px;
        height: 80px;
        background: rgba(255, 255, 255, 0.1);
        // border-left: 8px solid $neon-cyan;
        color: $neon-cyan;
        padding: 0;
        font-size: 32px;
        cursor: pointer;
        transition: all $transition-speed;
        border-radius: 0;
        box-shadow:
          inset 6px 0 0 rgba(0, 201, 181, 1),
          0 8px 8px 0 rgba(0, 0, 0, 0.25),
          inset 0 0 6px 0 rgba(0, 255, 230, 0.1);
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: rgba(255, 255, 255, 0.2);
        }
      }

      // 年份选择器
      .year-selector {
        position: relative;
        width: 274px;
        height: 80px;
        cursor: pointer;

        // 年份显示区域
        .year-display {
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.1);
          box-shadow:
            inset 6px 0 0 rgba(0, 201, 181, 1),
            0 8px 8px 0 rgba(0, 0, 0, 0.25),
            inset 0 0 6px 0 rgba(0, 255, 230, 0.1);
          border: none;
          // border-left: 8px solid $neon-cyan;
          color: $neon-cyan;
          padding: 0 50px 0 10px;
          font-size: 32px;
          font-weight: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background $transition-speed;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }
        }

        // 下拉菜单容器
        .year-dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background: rgba(0, 30, 20, 0.98);
          border: 1px solid $neon-cyan;
          border-top: none;
          z-index: 100;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
          max-height: 300px;
          overflow-y: auto;

          // 隐藏默认滚动条
          &::-webkit-scrollbar {
            width: 0;
          }
        }

        // 年份选项
        .year-option {
          padding: 15px 10px;
          color: $neon-cyan;
          font-size: 30px;
          transition: all $transition-speed;
          cursor: pointer;

          &:hover {
            background: rgba(0, 255, 230, 0.2);
          }

          // 选中状态
          &.active {
            background: rgba(0, 255, 230, 0.3);
            font-weight: bold;
          }
        }

        // 自定义下拉箭头容器
        &::after {
          content: '▼';
          position: absolute;
          right: 28px;
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
          color: $neon-cyan;
          font-size: 16px;
          z-index: 10;
        }
      }
    }
  }
}
</style>
