<template>
  <div :class="['exhibition-container', !isFromParam ? 'home-tabar' : '']">
    <!-- 轮播图部分 -->
    <div class="carousel-section">
      <div style="position: relative;" @click="goToDetail(item.exhibitId)">
        <img src="https://sit-kelamayi.4dage.com/mini/wxImg/zhanlan.png" alt="展览图片" class="carousel-img" />
        <div class="online-exhibition" @click.stop="goToOnlineExhibition(item)">
          <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
          <span class="online-text">线上观展</span>
        </div>
      </div>
    </div>

    <!-- 展厅分类 -->
    <div class="exhibition-categories">
      <div class="category-item" :class="{ active: selectedType === 1 }" @click="selectCategory(1)">
        <img src="@/assets/exhibition/icon_in.png" alt="室内展览" class="category-icon" />
        <span>室内展览</span>
      </div>
      <div class="category-item" :class="{ active: selectedType === 2 }" @click="selectCategory(2)">
        <img src="@/assets/exhibition/icon_out.png" alt="室外展览" class="category-icon" />
        <span>室外展览</span>
      </div>
    </div>

    <!-- 展览列表 -->
    <div class="exhibition-list" ref="listContainer" @scroll="handleScroll">
      <div class="exhibition-item" v-for="item in exhibitionList" :key="item.exhibitId"
        @click="goToDetail(item.exhibitId)">
        <img :src="getFieldValue(item, 'img')" alt="展览" class="exhibition-img">
        <div class="exhibition-info">
          <h4 class="exhibition-title">{{ getFieldValue(item, 'title') || '记忆与传承的艺术史' }}</h4>
        </div>
      </div>

      <!-- 加载更多提示 -->
      <div v-if="loading" class="loading-more">
        <span>加载中...</span>
      </div>

      <!-- 没有更多数据提示 -->
      <div v-if="!hasMore && exhibitionList.length > 0" class="no-more">
        <span>没有更多数据了</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { museumApi } from '@/api/indexPage'

const store = useStore()
const router = useRouter()
const route = useRoute()
// 从vuex获取isFromParam
const isFromParam = computed(() => store.getters.getIsFrom)

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

// 获取字段值的函数，预览模式下优先使用B字段
const getFieldValue = (item, fieldName) => {
  if (isPreviewMode.value && item[fieldName + 'B']) {
    return item[fieldName + 'B']
  }
  return item[fieldName]
}

// 响应式数据
const selectedType = ref(0) // 当前选中的类型：0-全部，1-室内，2-室外
const carouselList = ref([]) // 轮播图数据
const exhibitionList = ref([]) // 展览列表数据
const loading = ref(false) // 加载状态
const hasMore = ref(true) // 是否还有更多数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页数量
const listContainer = ref(null) // 列表容器引用

// 获取轮播图数据（type为0的前5条）
const getCarouselData = async () => {
  try {
    const params = {
      pageNum: 1,
      pageSize: 5,
      type: 0
    }

    // 预览模式下添加status参数
    if (isPreviewMode.value) {
      params.status = -1
    }

    const response = await museumApi.getExhibitionList(params)
    if (response && response.records) {
      carouselList.value = response.records
    }
  } catch (error) {
    console.error('获取轮播图数据失败:', error)
  }
}

// 获取展览列表数据
const getExhibitionList = async (isLoadMore = false) => {
  if (loading.value) return

  loading.value = true

  try {
    const params = {
      pageNum: isLoadMore ? currentPage.value : 1,
      pageSize: pageSize.value,
      type: selectedType.value
    }

    // 预览模式下添加status参数
    if (isPreviewMode.value) {
      params.status = -1
    }

    const response = await museumApi.getExhibitionList(params)

    if (response && response.records) {
      if (isLoadMore) {
        // 加载更多，追加数据
        exhibitionList.value = [...exhibitionList.value, ...response.records]
      } else {
        // 重新加载，替换数据
        exhibitionList.value = response.records
        currentPage.value = 1
      }

      // 判断是否还有更多数据
      hasMore.value = response.records.length === pageSize.value

      if (isLoadMore) {
        currentPage.value++
      }
    }
  } catch (error) {
    console.error('获取展览列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 选择分类
const selectCategory = async (type) => {
  if (selectedType.value === type) return

  selectedType.value = type
  currentPage.value = 1
  hasMore.value = true

  // 重新获取列表数据
  await getExhibitionList(false)
}

// 滚动加载
const handleScroll = async () => {
  if (!listContainer.value || loading.value || !hasMore.value) return

  const { scrollTop, scrollHeight, clientHeight } = listContainer.value

  // 当滚动到底部附近时加载更多
  if (scrollTop + clientHeight >= scrollHeight - 50) {
    await getExhibitionList(true)
  }
}

// 跳转到详情页面
const goToDetail = (id) => {
  const query = {
    id: id,
    type: 'exhibition',
    isFromPage: 'exhibition'
  }

  // 如果当前页面有preview=1参数，跳转时也要带上
  if (isPreviewMode.value) {
    query.preview = '1'
  }

  router.push({
    path: '/allDetailsShow',
    query: query
  })
}
const goToOnlineExhibition = () => {
  let url;
  if (isPreviewMode.value) {
    url = 'https://www.4dmodel.com/SuperTwoCustom/KLMYscene/?m=SG-alDn3FU4jQ8'
  } else {
    url = 'https://www.4dmodel.com/SuperTwoCustom/KLMYscene/?m=SG-alDn3FU4jQ8'
  }
  if (url) {
    window.open(url, '_blank')
  }
}
// 初始化
onMounted(async () => {
  // 获取轮播图数据
  await getCarouselData()

  // 获取初始展览列表
  await getExhibitionList(false)
})
</script>

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

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

.carousel-section {
  margin-bottom: 20px;

  :depp(.el-carousel__item) {
    position: relative;
  }

  .online-exhibition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 1;

    .online-text {
      color: #fff;
    }
  }

  /*指示器按钮*/
  :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;
    }
  }
}

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

.section-title {
  display: flex;
  align-items: center;
  margin: 20px 0 15px;

  .title-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  span {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}

.exhibition-categories {
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(229, 200, 142, 0.2);
    padding: 15px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(148, 118, 90, 0.5);
    width: 45%;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      background-color: rgba(229, 200, 142, 0.6);
      border-color: rgba(148, 118, 90, 0.8);
      transform: scale(1.02);
    }

    &:hover {
      background-color: rgba(229, 200, 142, 0.4);
    }

    .category-icon {
      width: 45px;
      height: 39px;
      margin-bottom: 6px;
    }

    span {
      font-size: 16px;
      color: #B1967B;
    }
  }
}

.exhibition-list {
  padding: 0 20px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;

  // 展览项
  .exhibition-item {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 206px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

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

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

    .exhibition-info {
      width: 100%;
      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;
        padding: 0 10px;
      }
    }
  }

  // 加载更多提示
  .loading-more {
    text-align: center;
    padding: 20px;
    color: #B1967B;
    font-size: 14px;
  }

  // 没有更多数据提示
  .no-more {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 14px;
  }
}
</style>