<template>
  <div class="detail-container">
    <!-- 返回按钮 -->
    <div v-if="shouldShowBackButton" class="back-button" @click="goBack">
      <img src="@/assets/indexPage/icon_back.png" alt="">
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 详情内容 -->
    <div v-else-if="detailData" class="detail-content">
      <!-- 标题 -->
      <div class="detail-title">{{ getFieldValue(detailData, 'title') || '展馆地图' }}</div>

      <!-- 时间 -->
      <!-- <div class="detail-time" v-if="detailData.createTime || detailData.publishTime">
        {{ formatTimeWithDash(detailData.createTime || detailData.publishTime) }}
      </div> -->
      <div class="line"></div>

      <!-- 处理后的内容 -->
      <div class="detail-text" v-if="getFieldValue(detailData, 'context')">
        <div v-html="processedContent" class="processed-html-content"></div>
      </div>

      <!-- 描述 -->
      <div class="detail-description" v-else-if="getFieldValue(detailData, 'description')">
        {{ getFieldValue(detailData, 'description') }}
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-state">
      <div class="error-text">加载失败，请重试</div>
      <button class="retry-button" @click="loadDetailData">重新加载</button>
    </div>

    <!-- 导航前往按钮 -->
    <div class="map-button" @click="openNavitor">
      <img class="btn-bg" src="@/assets/components/btn_05.png" alt="">
      <p class="btn-title">
        <span><el-icon :size="20">
            <Position />
          </el-icon></span>
        <span>导航前往</span>
      </p>
    </div>
  </div>
</template>

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

const router = useRouter()
const route = useRoute()

// 检查是否来自微信，如果是则隐藏返回按钮
const shouldShowBackButton = computed(() => {
  return route.query.isFrom !== 'weixin'
})

// 检查是否为预览模式
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 loading = ref(false)
const detailData = ref(null)

// 处理后的HTML内容
const processedContent = computed(() => {
  const content = getFieldValue(detailData.value, 'context');
  return content ? processHtmlContent(content) : ''
})
// 导航前往
const openNavitor = () => {
  
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 加载详情数据
const loadDetailData = async () => {
  loading.value = true

  try {
    // 获取展馆地图详情数据
    const response = await museumApi.getMuseumDetail(2)
    if (response) {
      detailData.value = response
    }
  } catch (error) {
    console.error('获取地图详情数据失败:', error)
    detailData.value = null
  } finally {
    loading.value = false
  }
}

// 页面初始化
onMounted(() => {
  // 检查是否有通过路由传递的数据
  if (history.state && history.state.mapData) {
    detailData.value = history.state.mapData
  } else {
    // 如果没有传递数据，直接调用接口
    loadDetailData()
  }
})
</script>

<style lang="scss" scoped>
.detail-container {
  position: relative;
  height: 100vh;
  padding: 20px;
  background: url('@/assets/indexPage/bg.png') no-repeat;
  background-size: cover;
  overflow-y: auto;
}

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

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;

  img {
    width: 40px;
    height: 40px;
  }
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;

  .loading-text {
    font-size: 16px;
    color: #666;
  }
}

.detail-content {
  margin-top: 40px;
  padding: 20px;
  border-radius: 10px;
  padding-bottom: 120px;
  /* 为导航按钮留出空间 */
}

.detail-title {
  font-size: 24px;
  font-weight: bold;
  color: #584735;
  margin-bottom: 10px;
  line-height: 1.4;
}

.detail-time {
  font-size: 14px;
  color: #584735;
  margin-bottom: 10px;
}

.line {
  height: 2px;
  background: linear-gradient(90deg, rgba(91, 71, 46, 0.5) 0%, rgba(91, 71, 46, 0) 100%);
}

.detail-text {
  font-size: 16px;
  line-height: 1.6;
  color: #584735;
  margin-top: 20px;

  :deep(p) {
    margin-bottom: 15px;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
  }
}

.detail-description {
  font-size: 16px;
  line-height: 1.6;
  color: #584735;
  margin-top: 20px;
}

.error-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;

  .error-text {
    font-size: 16px;
    color: #584735;
    margin-bottom: 20px;
  }

  .retry-button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      background: #0056b3;
    }
  }
}

/* 处理后的HTML内容样式 */
.processed-html-content {

  /* 缩进段落样式 */
  :deep(.indent) {
    text-indent: 2em;
    margin-bottom: 10px;
    line-height: 1.6;
    color: #584735;
  }

  /* 缩进文本样式 */
  :deep(.indent-text) {
    margin-left: 2em;
  }

  /* 处理后的图片容器样式 */
  :deep(.processed-image) {
    margin: 20px 0;
    text-align: center;
    border-radius: 8px;
  }

  /* 内容图片样式 */
  :deep(.content-image) {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }

  :deep(.content-image:hover) {
    transform: scale(1.02);
  }

  /* 处理后的音频容器样式 */
  :deep(.processed-audio) {
    margin: 15px 0;
    padding: 15px;
    text-align: center;
  }

  /* 处理后的视频容器样式 */
  :deep(.processed-video) {
    margin: 20px 0;
    text-align: center;
  }

  /* 通用媒体容器样式 */
  :deep(.media-wrap) {
    position: relative;
    overflow: hidden;
  }

  /* 段落基础样式 */
  :deep(p) {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #584735;
  }

  /* 图片基础样式 */
  :deep(img) {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
  }
}

.map-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 345px;
  height: 80px;
  background-size: cover;
  color: rgba(88, 71, 53, 1);
  border-radius: 5px;
  cursor: pointer;
  z-index: 100;

  .btn-bg {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 20px;
    left: 0px;
    object-fit: cover;
  }

  .btn-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -30%);
    display: flex;
    justify-content: center;

    span {
      font-size: 14px;
      font-weight: 500;
      color: #584735;

      &:first-child {
        margin-right: 8px;
      }
    }
  }
}

/* 响应式处理 */
@media (max-width: 768px) {
  .processed-html-content {
    :deep(.processed-image) {
      margin: 0;
      padding: 0;
    }

    :deep(.indent) {
      text-indent: 1.5em;
    }

    :deep(.indent-text) {
      margin-left: 1.5em;
    }
  }
}
</style>