<template>
  <div class="yinlishi-detail-container">
    <section class="single-list">
      <div class="item-card">
        <img :src="articleItem.src" :alt="articleItem.name || '引礼师详情'" class="item-image" />
        <div class="item-content">
          <div class="item-role">{{ articleItem.role }}</div>
          <div class="item-name" v-html="formatNameWithSuperscript(articleItem.name)"></div>
          <div class="item-desc" v-html="articleItem.desc"></div>
        </div>
      </div>
    </section>

    <div class="waterfall-content" v-if="columns[0].length || columns[1].length">
      <div class="waterfall-container">
        <div class="waterfall-column" v-for="(column, cidx) in columns" :key="cidx">
          <div
            class="waterfall-item"
            v-for="item in column"
            :key="item.id"
            @click="onImageClick(item)"
          >
            <div class="image-wrapper">
              <img
                :src="item.src"
                :alt="item.title"
                :style="{ height: item.height + 'px' }"
                @load="onImageLoad"
                @error="onImageError"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useTitle } from '@vueuse/core'
import { useRoute } from 'vue-router'
import { showImagePreview } from 'vant'
import { formatNameWithSuperscript } from '@utils/text'

import { getArticleDetailAPI } from '@/api/index.js'

useTitle('引礼师详情')

const route = useRoute()

const articleItem = ref({})
const columns = reactive([[], []])
const allImages = ref([])

/**
 * 分配图片到两列
 * @param {Array} images 新增图片列表
 * @returns {void}
 */
const distributeImages = (images) => {
  images.forEach((image) => {
    const leftHeight = columns[0].reduce((sum, item) => sum + item.height + 20, 0)
    const rightHeight = columns[1].reduce((sum, item) => sum + item.height + 20, 0)

    if (leftHeight <= rightHeight) {
      columns[0].push(image)
      return
    }

    columns[1].push(image)
  })
}

/**
 * 初始化瀑布流图片数据
 * @param {Array} imgs 原始图片列表
 * @returns {void}
 */
const initWaterfallImages = (imgs) => {
  columns[0].splice(0, columns[0].length)
  columns[1].splice(0, columns[1].length)

  const list = Array.isArray(imgs) ? imgs : []
  const mapped = list.map((item, idx) => {
    const src = typeof item === 'string' ? item : (item?.value || item?.src || '')

    return {
      id: typeof item === 'object' && item?.id ? item.id : idx + 1,
      src: src + ((item?.size || 0) > 20 * 1024 * 1024 ? '' : '?imageMogr2/thumbnail/400x/strip/quality/70'),
      title: typeof item === 'object' && item?.name ? item.name : (`图片${idx + 1}`),
      height: Math.floor(Math.random() * 200) + 200
    }
  }).filter((item) => String(item.src || '').trim().length > 0)

  allImages.value = mapped
  distributeImages(mapped)
}

/**
 * 加载文章详情
 * @returns {Promise<void>}
 */
const loadArticleDetail = async () => {
  try {
    const articleId = route.params.id
    const { code, data } = await getArticleDetailAPI({ i: articleId })

    if (!code) {
      return
    }

    articleItem.value = {
      id: data.id,
      role: data.post_excerpt,
      name: data.post_title,
      src: `${data?.file_list?.photo?.value || ''}?imageMogr2/thumbnail/400x/strip/quality/70`,
      desc: data.post_content,
      imgs: data?.file_list?.img || []
    }

    initWaterfallImages(articleItem.value.imgs)
  } catch (error) {
    console.error('加载引礼师详情失败:', error)
  }
}

/**
 * 图片加载完成回调
 * @returns {void}
 */
const onImageLoad = () => {
  // 预留：如需按图片实际宽高调整瀑布流高度，可在这里扩展
}

/**
 * 图片加载失败回调
 * @param {Event} evt 图片加载事件
 * @returns {void}
 */
const onImageError = (evt) => {
  console.warn(`图片加载失败：${evt.target.src}`)
}

/**
 * 点击预览大图
 * @param {object} item 当前图片项
 * @returns {void}
 */
const onImageClick = (item) => {
  const currentIndex = allImages.value.findIndex((img) => img.id === item.id)
  const images = allImages.value.map((img) => img.src.replace('?imageMogr2/thumbnail/400x/strip/quality/70', ''))

  showImagePreview({
    images,
    startPosition: currentIndex >= 0 ? currentIndex : 0,
    showIndex: true,
    closeable: true
  })
}

onMounted(() => {
  loadArticleDetail()
})
</script>

<style lang="less" scoped>
.yinlishi-detail-container {
  min-height: 100vh;
  width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  background: #F2EBDB;

  .waterfall-content {
    margin-top: 1rem;
  }

  .waterfall-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .waterfall-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .waterfall-item {
    .image-wrapper {
      width: 100%;
      overflow: hidden;
      border-radius: 0.5rem;
      background: #FFFFFF;
      box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);

      img {
        width: 100%;
        display: block;
        object-fit: cover;
      }
    }
  }
}

.single-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.item-card {
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1rem rgba(107, 65, 2, 0.08);
}

.item-image {
  width: 100%;
  display: block;
}

.item-content {
  padding: 1rem;
}

.item-role {
  color: #6B4102;
  font-size: 0.875rem;
}

.item-name {
  margin-top: 0.5rem;
  color: #3D2A0B;
  font-size: 1.75rem;
  font-weight: 600;
}

.item-desc {
  margin-top: 0.75rem;
  color: #4F4F4F;
  line-height: 1.7;
  font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .yinlishi-detail-container {
    padding: 0.75rem;
  }

  .item-content {
    padding: 0.875rem;
  }

  .item-name {
    font-size: 1.5rem;
  }
}
</style>