<template>
  <router-view v-if="hasChildRoute"></router-view>
  <div v-else :class="['home-container', !isFromParam ? 'home-tabar' : '']">
    <!-- 轮播图区域 -->
    <div class="carousel-section">
      <el-carousel height="180px" indicator-position="bottom" :interval="4000">
        <el-carousel-item v-for="item in bannerData" :key="item.carouselId">
          <img :src="getImg(item)" :alt="getTitle(item) || '轮播图'" class="carousel-img">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 功能区域 -->
    <div class="function-section">
      <div class="function-item" :class="{ 'disabled': isPreviewMode }" @click="handleFunctionClick('visit')">
        <img src="@/assets/indexPage/visit.png" alt="预约参观" class="function-icon">
        <span class="function-text">预约参观</span>
      </div>
      <div class="function-item" :class="{ 'disabled': isPreviewMode }" @click="handleFunctionClick('activity')">
        <img src="@/assets/indexPage/activity.png" alt="活动预约" class="function-icon">
        <span class="function-text">活动预约</span>
      </div>
      <div class="function-item" @click="handleFunctionClick('map')">
        <img src="@/assets/indexPage/map.png" alt="展馆地图" class="function-icon">
        <span class="function-text">展馆地图</span>
      </div>
      <div class="function-item" @click="handleFunctionClick('introduce')">
        <img src="@/assets/indexPage/introduce.png" alt="展馆介绍" class="function-icon">
        <span class="function-text">展馆介绍</span>
      </div>
    </div>

    <!-- 展览资讯 -->
    <div class="section">
      <div class="section-header">
        <h3 class="section-title">展览资讯</h3>
        <span class="view-more" @click="viewMore('recommended')">查看更多 +</span>
      </div>
      <div class="news-item" v-for="item in newsList" :key="item.informationId" @click="viewNews(item)">
        <img :src="getInfoImg(item)" alt="展览资讯" class="news-img">
        <div class="news-content">
          <h4 class="news-title">{{ getTitle(item) }}</h4>
          <span class="news-desc"><el-icon>
              <SortUp />
            </el-icon></span>
        </div>
      </div>
    </div>

    <!-- 推荐展览 -->
    <div class="section">
      <div class="section-header">
        <h3 class="section-title">推荐展览</h3>
        <span class="view-more" @click="viewMore('exhibition')">查看更多 +</span>
      </div>
      <div class="scroll-container">
        <div class="scroll-wrapper">
          <div class="exhibition-item" v-for="exhibition in exhibitionList" :key="exhibition.exhibitId"
            @click="viewExhibition(exhibition)">
            <img :src="getImg(exhibition)" alt="展览" class="exhibition-img">
            <div class="exhibition-info">
              <h4 class="exhibition-title">{{ getTitle(exhibition) }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 社教活动 -->
    <div class="section">
      <div class="section-header">
        <h3 class="section-title">社教活动</h3>
        <span class="view-more" @click="viewMore('activity')">查看更多 +</span>
      </div>
      <div class="scroll-container">
        <div class="scroll-wrapper">
          <div class="activity-item" v-for="active in activeList" :key="active.activityId"
            @click="viewActivity(active)">
            <div class="active-top">
              <img :src="getIndexImg(active)" alt="活动" class="activity-img">
              <span class="active-go"><el-icon>
                  <ArrowRight />
                </el-icon></span>
            </div>
            <div class="activity-info">
              <h4 class="activity-title">{{ getTitle(active) }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { useIndexPageApi } from '@/setup/useIndexPageApi'
import { museumApi } from '@/api/indexPage'
const router = useRouter()
const route = useRoute()
const store = useStore()
// 使用首页API组合式函数
const {
  bannerData,
  newsList,
  exhibitionList,
  activeList,
  initAllData
} = useIndexPageApi()
// 从vuex获取isFromParam
const isFromParam = computed(() => store.getters.getIsFrom)

// 判断当前是否有子路由
const hasChildRoute = computed(() => {
  return route.path !== '/indexPage'
})

// 检查是否为预览模式
const isPreviewMode = computed(() => {
  return route.query.preview === '1'
})

// 获取字段值的通用方法，优先获取带B后缀的字段
const getFieldValue = (item, fieldName) => {
  if (isPreviewMode.value) {
    return item[fieldName + 'B'] || item[fieldName]
  }
  return item[fieldName]
}

// 获取标题的方法
const getTitle = (item) => {
  return getFieldValue(item, 'title')
}

// 获取图片的方法
const getImg = (item) => {
  return getFieldValue(item, 'img')
}

// 获取信息图片的方法
const getInfoImg = (item) => {
  return getFieldValue(item, 'indexImg')
}

// 获取索引图片的方法
const getIndexImg = (item) => {
  return getFieldValue(item, 'indexImg')
}

// 功能点击处理
const handleFunctionClick = (type) => {
  // 预览模式下禁止点击
  if (isPreviewMode.value && !['map', 'introduce'].includes(type)) {
    return
  }

  console.log(`点击了${type}功能`)
  // 根据不同功能跳转到不同页面或显示不同内容
  switch (type) {
    case 'visit':
      router.push({ name: 'visitPreview' }) // 跳转到预约参观页面
      break
    case 'activity':
      // 活动预约逻辑
      router.push({ name: 'activePreview' })
      break
    case 'map':
      // 展馆地图逻辑
      handleMapClick()
      break
    case 'introduce':
      // 跳转到展馆介绍详情页
      router.push({
        path: '/allDetailsShow',
        query: {
          id: '1',
          type: 'museum'
        }
      })
      break
  }
}

// 查看更多
const viewMore = (section) => {
  console.log(`查看更多${section}`)
  // 根据不同区块跳转到对应的列表页
  const query = isPreviewMode.value ? { preview: '1' } : {}

  switch (section) {
    case 'exhibition':
      router.push({ path: '/exhibition', query })
      break
    case 'recommended':
      router.push({ name: 'news', query })
      break
    case 'activity':
      router.push({ name: 'activity', query })
      break
  }
}

// 查看展览详情
const viewExhibition = (exhibition) => {
  console.log(`查看展览${exhibition.exhibitId}详情`)
  // 跳转到展览详情页
  const query = {
    id: exhibition.exhibitId,
    type: 'exhibition',
    isFromPage: 'indexPage'
  }
  if (isPreviewMode.value) {
    query.preview = '1'
  }
  router.push({
    path: '/allDetailsShow',
    query
  })
}

// 查看活动详情
const viewActivity = (active) => {
  console.log(`查看活动${active.activityId}详情`)
  // 跳转到活动详情页
  const query = {
    id: active.activityId,
    type: 'activity',
    isFromPage: 'indexPage'
  }
  if (isPreviewMode.value) {
    query.preview = '1'
  }
  router.push({
    path: '/allDetailsShow',
    query
  })
}

// 查看资讯详情
const viewNews = (news) => {
  console.log(`查看资讯${news.informationId}详情`)
  // 跳转到资讯详情页
  const query = {
    id: news.informationId,
    type: 'information',
    isFromPage: 'indexPage'
  }
  if (isPreviewMode.value) {
    query.preview = '1'
  }
  router.push({
    path: '/allDetailsShow',
    query
  })
}

// 处理地图点击事件
const handleMapClick = async () => {
  try {
    // 调用展馆地图接口
    const mapData = await museumApi.getMuseumDetail(2)
    console.log('地图数据:', mapData)

    // 跳转到地图页面，并传递数据
    router.push({
      name: 'map',
      state: { mapData }
    })
  } catch (error) {
    console.error('获取地图数据失败:', error)
    // 即使接口失败也跳转到地图页面
    router.push({ name: 'map' })
  }
}


onMounted(() => {
  // 只有在首页路径时才初始化数据，避免路由跳转时重复触发
  if (route.path === '/indexPage') {
    // 根据预览模式设置status参数
    const statusValue = isPreviewMode.value ? -1 : 1

    // 使用组合式函数初始化所有数据，可以传入动态参数
    initAllData({
      bannerParams: { pageNum: 1, pageSize: 5, status: statusValue },
      newsParams: { pageNum: 1, pageSize: 3, status: statusValue },
      exhibitionParams: { pageNum: 1, pageSize: 5, status: statusValue, recommend: 1 },
      activeParams: { pageNum: 1, pageSize: 5, status: statusValue }
    })
  }
})
</script>

<style lang="scss" scoped>
.home-container {
  height: calc(100vh); // 减去底部导航栏高度
  overflow-y: auto;
  background: url('@/assets/indexPage/bg.png') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-bottom: 20px;
}

@media (min-width: 1024px) {
  .home-container {
    width: 400px;
  }
}

.home-not-overflow {
  overflow: hidden;
}

// 轮播图区域
.carousel-section {
  width: 100%;
  margin-bottom: 15px;

  .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*指示器按钮*/
  :deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
  }

  /*指示器激活按钮*/
  :deep(.is-active) {
    .el-carousel__button {
      background-color: #fff;
    }
  }
}

// 功能区域
.function-section {
  display: flex;
  justify-content: space-around;
  border-radius: 8px;
  margin: 0 15px 20px;

  .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    cursor: pointer;

    .function-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 5px;
    }

    .function-text {
      font-size: 16px;
      color: #B1967B;
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

// 通用区块样式
.section {
  margin: 0 15px 0;
  border-radius: 8px;
  padding: 4px 10px;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: #584735;
      margin: 0;
      position: relative;
      padding-left: 10px;

    }

    .view-more {
      font-size: 14px;
      color: #79ACF9;
      cursor: pointer;
    }
  }
}

// 展览资讯
.news-item {
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  height: 106px;
  overflow: hidden;

  .news-img {
    object-fit: cover;
    width: 100%;
    height: 106px;
  }

  .news-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 106px;
    background: linear-gradient(90deg, rgba(177, 150, 123, 0) 0%, #B1967B 100%);

    .news-title {
      width: 150px;
      text-align: right;
      font-size: 16px;
      font-weight: 800;
      margin: 16px;
      float: right;
      color: #FFFFFF;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .news-desc {
      position: absolute;
      bottom: 8px;
      right: 16px;
      display: inline-block;
      font-size: 20px;
      color: #fff;
      transform: rotate(-90deg) scale(1, -1);
      margin: 0;
    }
  }
}

// 滚动容器
.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  .scroll-wrapper {
    display: flex;
    padding-bottom: 5px;
  }

  /* 仅在移动端隐藏滚动条 */
  @media (max-width: 768px) {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* 桌面端显示并美化滚动条 */
  @media (min-width: 769px) {
    scrollbar-width: thin;
    scrollbar-color: #B1967B #f1f1f1;

    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #B1967B;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #9d8469;
    }
  }
}

// 展览项
.exhibition-item {
  position: relative;
  flex: 0 0 auto;
  width: 345px;
  height: 206px;
  margin-right: 10px;
  border-radius: 8px;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }

  .exhibition-img {
    width: 100%;
    height: 206px;
    object-fit: cover;
  }

  .exhibition-info {
    width: 345px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    background: #B1967B;

    .exhibition-title {
      font-size: 16px;
      margin: 0;
      color: #fff;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

// 活动项
.activity-item {
  flex: 0 0 auto;
  width: 108px;
  margin-right: 10px;
  border-radius: 8px;
  overflow: hidden;

  &:last-child {
    margin-right: 0;
  }

  .active-top {
    position: relative;
    width: 108px;
    height: 124px;
    border-radius: 8px;
    overflow: hidden;

    .active-go {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      position: absolute;
      bottom: 4px;
      right: 8px;
      border: 1px solid #FCE39E;
      border-radius: 50%;
      color: #FCE39E;
      font-size: 12px;
    }

    .activity-img {
      width: 108px;
      height: 124px;
      object-fit: cover;
    }
  }

  .activity-info {
    padding: 8px;

    .activity-title {
      font-size: 12px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #584735;
    }
  }
}
</style>