<!--
 * @Date: 2025-11-10 18:12:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-13 10:27:23
 * @FilePath: /stdj_h5/src/views/StudentInfo.vue
 * @Description: 戒子详情页
-->
<template>
  <div class="masters-detail-container">
    <section class="single-list">
      <div class="item-card">
        <img :src="student_info.src" :alt="student_info.title" class="item-image" />
        <div class="item-content">
          <!-- <div class="item-role">{{ student_info.name }}</div> -->
          <!-- <div class="item-name" v-html="formatNameWithSuperscript(student_info.courtesy_name)"></div> -->
          <div class="item-name">{{ student_info.name }}</div>
          <div class="item-group-title">{{ student_info.group_title }}</div>
          <div class="item-desc" v-html="student_info.desc"></div>
        </div>
      </div>
    </section>
    <!-- 标题图片 -->
    <div class="common-title">
      <img src="https://cdn.ipadbiz.cn/stdj/images/%E7%9B%B8%E5%85%B3%E7%85%A7%E7%89%87@2x.png" alt="相关照片"
        class="title-image">
    </div>
    <!-- 下载提示：参考首页滑动提示样式 -->
    <div v-if="student_info?.photo?.length" class="download-hint">
      <span class="download-icon">⬇</span>
      <span class="download-text">点击查看大图 长按图片下载</span>
    </div>
    <!-- 瀑布流内容 -->
    <div v-if="student_info?.photo?.length" class="waterfall-content">
      <div class="waterfall-container">
        <div class="waterfall-column" v-for="(column, index) in columns" :key="index">
          <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 v-else>
      <div class="empty-message">暂无相关照片</div>
    </div>

    <div class="more-button" @click="viewMore()">
      <span class="more-text">查看更多</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useTitle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router'
import { showImagePreview } from 'vant'
import Cookies from 'js-cookie'

// 导入接口
import { getUserInfoAPI } from '@/api/index.js'

useTitle('戒子详情')

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

const info_id = ref('');
const student_info = ref({})

/**
 * 为name字段的第一个文字添加上标效果
 * @param {string} name - 原始姓名
 * @returns {string} - 带上标的HTML字符串
 */
const formatNameWithSuperscript = (name) => {
  if (!name || name.length === 0) return name

  const firstChar = name.charAt(0)
  const restChars = name.slice(1)

  return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}

/**
 * 加载详情
 */
const loadUserInfo = async () => {
  try {
    const { code, data } = await getUserInfoAPI({ i: info_id.value })
    if (code) {
      // 遍历data对象，将每个元素转换为新的对象格式
      student_info.value = {
        id: data.id,
        role: data.name,
        name: data.nickname,
        src: data?.avatar[0].url,
        desc: data.introduction,
        courtesy_name: data.courtesy_name,
        group_title: data.group_title,
        photo: data.photo,
      }
      // 处理图片数据
      if (student_info.value.photo?.length) {
        student_info.value.photo = student_info.value.photo.map(item => ({
          id: item.id,
          src: item.url + '?imageMogr2/thumbnail/400x/strip/quality/70',
          title: item.name,
          height: Math.floor(Math.random() * 200) + 200
        }))
        allImages.value = student_info.value.photo
        distributeImages(student_info.value.photo)
      }
    }
  } catch (error) {
    console.error('加载文章详情失败:', error)
  }
}

// 响应式数据
const allImages = ref([])
const columns = reactive([[], []])

// 分配图片到两列
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)
    } else {
      columns[1].push(image)
    }
  })
}

/**
 * 显示图片预览（仅单张）
 * @param {Object} item - 当前点击的图片对象
 */
// 图片点击事件 - 仅预览当前单张图片
const onImageClick = (item) => {
  showImagePreview({
    images: [item.src.replace('?imageMogr2/thumbnail/400x/strip/quality/70', '')],
    startPosition: 0,
    showIndex: false,
    loop: false,
    closeable: true
  })
}

// 图片加载成功
const onImageLoad = (event) => {
  // console.log('图片加载成功:', event.target.src)
}

// 图片加载失败
const onImageError = (event) => {
  console.error('图片加载失败:', event.target.src)
  // 可以设置默认图片
  event.target.src = 'https://via.placeholder.com/300x400?text=加载失败'
}

onMounted(() => {
  // 检查是否已登录（通过token判断）
  const token = Cookies.get('token-stdj')
  if (!token) {
    // 未登录，跳转到登录页
    router.replace({ path: '/jz_login' })
    return
  }
  //
  info_id.value = token
  //
  loadUserInfo()
})

const viewMore = () => {
  router.push({ path: '/students', query: { i: '3680502' } })
}
</script>

<style scoped>
/* 通用标题样式 */
.common-title {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 3;
  margin-top: 2rem;
}

.common-title img {
  max-width: 10rem;
  height: auto;
}

.empty-message {
  text-align: center;
  color: #999999;
  font-size: 1rem;
  margin-top: 2rem;
}

.more-button {
  position: static;
  margin: 1rem auto;
  margin-top: 4rem;
  height: 2.5rem;
  width: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
  background-color: #985122;
  color: #FCF8F1;
  border-radius: 0.25rem;
}

/* 下载提示样式（参考首页 swipe-hint） */
.download-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: -1rem auto 1.25rem;
  color: #985122;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.download-icon {
  font-size: 0.875rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.download-text {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02rem;
}

@media (max-width: 30rem) {
  .download-hint {
    margin-bottom: 1.25rem;
  }

  .download-icon,
  .download-text {
    font-size: 0.8rem;
  }
}

.masters-detail-container {
  padding: 1.5rem;
  background: #F2EBDB;
  min-height: 100vh;
  /* 背景至少覆盖整个视口高度 */
  width: 100%;
  box-sizing: border-box;
}

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

.item-card {
  position: relative;
  padding: 0.5rem;
  background: #F2EBDB;
  border: 2px solid #6B4102;
  overflow: hidden;
  transition: transform 0.2s ease;
}

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

.item-content {
  padding: 0.85rem;
  text-align: center;
  color: #6B4102;
  background: #FCF8F1;
}

.item-role {
  font-size: 0.75rem;
  opacity: 0.95;
}

.item-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.item-group-title {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.item-desc {
  margin-top: 0.5rem;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
}

.waterfall-content {
  padding: 0;
}

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

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

.waterfall-item {
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

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

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.waterfall-item:hover .image-wrapper img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 1rem 0.75rem 0.75rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.waterfall-item:hover .image-overlay {
  transform: translateY(0);
}

.image-title {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* 加载状态样式 */
:deep(.van-list__loading) {
  padding: 1rem;
  text-align: center;
  color: #969799;
}

:deep(.van-list__finished-text) {
  padding: 1rem;
  text-align: center;
  color: #969799;
  font-size: 0.875rem;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .waterfall-content {
    padding: 0;
  }

  .waterfall-container {
    gap: 0.5rem;
  }

  .waterfall-column {
    gap: 0.5rem;
  }

  .image-title {
    font-size: 0.8125rem;
  }
}

/* 骨架屏效果 */
.waterfall-item.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* 遮罩层样式 */
:deep(.van-overlay) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.overlay-content {
  background-color: #fff;
  border-radius: 1rem;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.overlay-image-wrapper {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.overlay-image {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  display: block;
}

.overlay-description {
  padding: 1.5rem;
  background-color: #fff;
}

.overlay-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.overlay-text {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .overlay-content {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 0.75rem;
  }

  .close-btn {
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
  }

  .overlay-description {
    padding: 1rem;
  }

  .overlay-title {
    font-size: 1.125rem;
  }

  .overlay-text {
    font-size: 0.875rem;
  }
}
</style>