<!--
 * @Date: 2025-10-30 20:00:25
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-11-04 18:15:15
 * @FilePath: /stdj_h5/src/views/MastersDetail.vue
 * @Description: 文件描述
-->
<template>
  <div class="masters-detail-container">
    <section class="single-list">
      <div class="item-card">
        <img :src="article_item.src" :alt="article_item.title" class="item-image" />
        <div class="item-content">
          <div class="item-role">{{ article_item.role }}</div>
          <div class="item-name" v-html="formatNameWithSuperscript(article_item.name)"></div>
          <div class="item-desc" v-html="article_item.desc"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTitle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router'

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

useTitle('三師七證 - 詳情')

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

const article_item = 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 loadArticleDetail = async () => {
  try {
    const articleId = route.params.id
    const { code, data } = await getArticleDetailAPI({ i: articleId })
    if (code) {
      // 遍历data对象，将每个元素转换为新的对象格式
      article_item.value = {
        id: data.id,
        role: data.post_excerpt,
        name: data.post_title,
        src: data?.file_list?.photo?.value,
        desc: data.post_content
      }
    }
  } catch (error) {
    console.error('加载文章详情失败:', error)
  }
}

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


<style scoped>
.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-desc {
  margin-top: 0.5rem;
}
</style>