<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { getHomeConfig } from '../services/api'
import { showToast } from 'vant'
import SubmitAchievementForm from '../components/SubmitAchievementForm.vue'
import SubmitDemandForm from '../components/SubmitDemandForm.vue'
import AchievementList from '../components/AchievementList.vue'
import DemandList from '../components/DemandList.vue'

// 定义数据
const config = ref({
  title: '',
  introduction: '',
  serviceHotline: [],
  emails: [],
  address: []
})

const loading = ref(true)
// 切换标签数据<van-icon name="balance-list" /><van-icon name="add-square" />
const tabs = [
  { key: 'achievement', name: '成果清单', icon: 'balance-list', color: '#2196f3', activeColor: '#1976d2' },
  { key: 'demand', name: '需求清单', icon: 'award', color: '#9c27b0', activeColor: '#7b1fa2' },
  { key: 'submit-achievement', name: '成果填报', icon: 'add', color: '#4caf50', activeColor: '#388e3c' },
  { key: 'submit-demand', name: '需求填报', icon: 'add-square', color: '#f44336', activeColor: '#d32f2f' }
]

// 当前激活的标签
const activeTab = ref('achievement')

// 处理标签点击
const handleTabClick = (tab) => {
  // 更新激活状态
  activeTab.value = tab.key
}

// 是否固定标签栏
const isTabsFixed = ref(false)

// 标签栏DOM引用
const tabsContainer = ref(null)

// 标签栏初始top值
const tabsInitialTop = ref(0)

// 滚动监听处理函数
const handleScroll = () => {
  if (tabsInitialTop.value === 0) return
  
  const scrollTop = window.scrollY
  
  isTabsFixed.value = scrollTop >= tabsInitialTop.value
}

// 十六进制颜色转RGB值函数
const hexToRgb = (hex) => {
  // 移除#号
  hex = hex.replace(/^#/, '')
  
  // 解析十六进制值
  let r = 0, g = 0, b = 0
  
  if (hex.length === 3) {
    // 简写形式，如 #RGB
    r = parseInt(hex[0] + hex[0], 16)
    g = parseInt(hex[1] + hex[1], 16)
    b = parseInt(hex[2] + hex[2], 16)
  } else if (hex.length === 6) {
    // 完整形式，如 #RRGGBB
    r = parseInt(hex.substring(0, 2), 16)
    g = parseInt(hex.substring(2, 4), 16)
    b = parseInt(hex.substring(4, 6), 16)
  }
  
  return `${r}, ${g}, ${b}`
}

// 页面挂载时获取数据和添加滚动监听
onMounted(async () => {
  // 获取数据
  try {
    loading.value = true
    const response = await getHomeConfig()
    if (response.code === 1) {
      config.value = response.data
    } else {
      showToast('获取数据失败')
    }
  } catch (error) {
    console.error('请求失败:', error)
    showToast('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
  
  // 等待DOM更新后获取初始位置
  nextTick(() => {
    if (tabsContainer.value) {
      tabsInitialTop.value = tabsContainer.value.offsetTop
    }
  })
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)
})

// 页面卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div class="home">
    <!-- 顶部标题区域 -->
    <div class="header">
      <h1 class="title">{{ config.title }}</h1>
    </div>

    <!-- 内容区 -->
    <div class="content">
      <!-- 简介区域 -->
      <div class="card intro-card">
        <!-- <h2 class="section-title">平台简介</h2> -->
        <div v-if="loading" class="loading-container">
          <van-skeleton title :row="3" animated />
        </div>
        <div v-else class="intro-content">{{ config.introduction }}</div>
      </div>

      <!-- 切换按钮区域 -->
      <div class="tabs-container" ref="tabsContainer" :class="{ 'tabs-fixed': isTabsFixed }">
        <div class="tabs-wrapper">
          <div 
            v-for="tab in tabs" 
            :key="tab.key" 
            class="tab-item" 
            :style="{
              '--tab-color': activeTab === tab.key ? tab.activeColor : tab.color,
              '--tab-color-rgb': hexToRgb(activeTab === tab.key ? tab.activeColor : tab.color)
            }"
            :class="{ active: activeTab === tab.key }"
            @click="handleTabClick(tab)"
          >
            <van-icon :name="tab.icon" size="18" />
            <span class="tab-text">{{ tab.name }}</span>
          </div>
        </div>
      </div>
      
      <!-- 切换内容区域 -->
      <div class="tab-content">
        <!-- 成果清单 -->
        <div v-if="activeTab === 'achievement'" class="tab-panel">
          <AchievementList />
        </div>
        
        <!-- 需求清单 -->
        <div v-else-if="activeTab === 'demand'" class="tab-panel">
          <DemandList />
        </div>
        
        <!-- 成果填报 -->
        <div v-else-if="activeTab === 'submit-achievement'" class="tab-panel">
          <SubmitAchievementForm />
        </div>
        
        <!-- 需求填报 -->
        <div v-else-if="activeTab === 'submit-demand'" class="tab-panel">
          <SubmitDemandForm />
        </div>
      </div>
    </div>

    <!-- 底部咨询对接区域 -->
    <div class="contact-section">
      <div class="contact-card">
        <div class="contact-title-container">
          <van-icon name="chat-o" size="20" color="#4caf50" />
          <h2 class="contact-title">咨询对接</h2>
        </div>

        <!-- 服务热线 -->
        <div class="contact-item-card phone-card">
          <div class="contact-item-header">
            <van-icon name="phone-o" size="18" color="#2196f3" />
            <span class="contact-item-label">服务热线</span>
          </div>
          <div class="contact-item-content">
            <div v-for="(item, index) in config.serviceHotline" :key="index" class="contact-person">
              <span class="person-name">{{ item.name }}</span>
              <a :href="`tel:${item.phone}`" class="person-phone">{{ item.phone }}</a>
            </div>
          </div>
        </div>

        <!-- 邮箱咨询 -->
        <div class="contact-item-card email-card">
          <div class="contact-item-header">
            <van-icon name="email-o" size="18" color="#9c27b0" />
            <span class="contact-item-label">邮箱咨询</span>
          </div>
          <div class="contact-item-content">
            <a v-for="(email, index) in config.emails" :key="index" :href="`mailto:${email}`" class="contact-email">
              {{ email }}
            </a>
          </div>
        </div>

        <!-- 办公地址 -->
        <div class="contact-item-card address-card">
          <div class="contact-item-header">
            <van-icon name="location-o" size="18" color="#4caf50" />
            <span class="contact-item-label">办公地址</span>
          </div>
          <div class="contact-item-content">
            <div v-for="(addr, index) in config.address" :key="index" class="contact-address">
              {{ addr }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 全局样式重置和基础设置 */
.home {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部标题区域 */
.header {
  background: linear-gradient(135deg, #2563eb 0%, #7e22ce 100%);
  color: white;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

/* 内容区 */
.content {
  padding: 15px;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:active {
  transform: translateY(1px);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

/* 标题样式 */
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #1e88e5;
}

/* 加载状态 */
.loading-container {
  padding: 10px 0;
}

/* 简介内容 */
.intro-content {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  text-align: justify;
}

/* 正文占位符 */
.content-placeholder {
  text-align: center;
  padding: 30px 15px;
  color: #999;
  font-size: 15px;
  background-color: #fafafa;
  border-radius: 8px;
  margin-top: 5px;
}

/* 底部咨询对接区域 */
.contact-section {
  background-color: #f5f5f5;
  padding: 20px 15px;
  margin-top: auto;
}

/* 整体咨询卡片 */
.contact-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 咨询标题容器 */
.contact-title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* 咨询标题 */
.contact-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 单个咨询项卡片 */
.contact-item-card {
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fafafa;
  transition: all 0.2s ease;
}

.contact-item-card:last-child {
  margin-bottom: 0;
}

/* 服务热线卡片样式 */
.phone-card {
  background-color: rgba(33, 150, 243, 0.05);
  border-left: 4px solid #2196f3;
}

.phone-card .contact-item-label {
  color: #2196f3;
}

.phone-card .person-phone {
  color: #2196f3;
}

/* 邮箱咨询卡片样式 */
.email-card {
  background-color: rgba(156, 39, 176, 0.05);
  border-left: 4px solid #9c27b0;
}

.email-card .contact-item-label {
  color: #9c27b0;
}

.email-card .contact-email {
  color: #9c27b0;
}

/* 办公地址卡片样式 */
.address-card {
  background-color: rgba(76, 175, 80, 0.05);
  border-left: 4px solid #4caf50;
}

.address-card .contact-item-label {
  color: #4caf50;
}

.address-card .contact-address {
  color: #4caf50;
}

/* 咨询项头部 */
.contact-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
}

/* 咨询项标签 */
.contact-item-label {
  font-weight: 500;
}

/* 咨询项内容 */
.contact-item-content {
  padding-left: 26px;
}

/* 联系人信息 */
.contact-person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.contact-person:last-child {
  margin-bottom: 0;
}

/* 联系人姓名 */
.person-name {
  color: #666;
  font-weight: 500;
}

/* 联系人电话 */
.person-phone {
  font-weight: 500;
  text-decoration: none;
}

/* 联系邮箱 */
.contact-email {
  display: block;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
}

/* 联系地址 */
.contact-address {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

/* 切换按钮区域 */
.tabs-container {
  margin: 0;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 10;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

/* 固定状态 */
.tabs-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 切换按钮容器 */
.tabs-wrapper {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 确保所有状态下按钮容器的宽度正确 */
.tabs-container {
  width: 100%;
  box-sizing: border-box;
}

/* 固定状态下的按钮容器 */
.tabs-fixed .tabs-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* 确保固定状态下按钮容器不超出视口 */
.tabs-fixed {
  width: 100%;
  box-sizing: border-box;
}

/* 切换按钮项 */
.tab-item {
  flex: 1 1 25%;
  width: 25%;
  padding: 12px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--tab-color);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-left: 1px solid #e5e5e5;
  background-color: white;
  box-sizing: border-box;
  min-width: 0;
}

.tab-item:first-child {
  border-left: none;
}

.tab-item:active {
  opacity: 0.9;
}

/* 激活状态 */
.tab-item.active {
  font-weight: 600;
  /* 使用对应颜色的深色背景作为选中效果 */
  background-color: var(--tab-color);
}

/* 激活状态的图标 */
.tab-item.active .van-icon {
  color: white;
}

/* 激活状态的文字 */
.tab-item.active .tab-text {
  color: white;
}

/* 非激活状态的图标 */
.tab-item:not(.active) .van-icon {
  color: var(--tab-color);
  font-size: 18px;
}

/* 非激活状态的文字 */
.tab-item:not(.active) .tab-text {
  color: var(--tab-color);
  font-size: 13px;
}

/* 切换内容区域 */
.tab-content {
  margin-top: 15px;
}

/* 切换面板 */
.tab-panel {
  background-color: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  min-height: 400px;
}

/* 成果填报表单容器 */
.tab-panel :deep(.submit-achievement-form) {
  padding: 0;
}

/* 适配小屏幕 */
@media (max-width: 375px) {
  .tab-panel {
    padding: 12px;
  }
}

/* 适配小屏幕 */
@media (max-width: 375px) {
  .header {
    padding: 25px 15px;
  }
  
  .title {
    font-size: 20px;
  }
  
  .content {
    padding: 12px;
  }
  
  .section-title {
    font-size: 17px;
  }
  
  .contact-section {
    padding: 15px 12px;
  }
  
  /* 小屏幕切换按钮 */
  .tab-item {
    font-size: 14px;
    padding: 12px 0;
  }
  
  .tab-panel {
    padding: 15px;
    min-height: 300px;
  }
}
</style>