<template>
  <section class="article-container">
    <!-- 文章标题 -->
    <h1 class="article-title">{{ article.title }}</h1>

    <!-- 文章元信息 -->
    <div class="article-meta">
      <!--  <div class="author-info">
        <img :src="article.author.avatar" class="author-avatar" alt="作者头像" />
        <span class="author-name">{{ article.author.name }}</span>
      </div> -->
      <div class="publish-time">
        <span>{{
          $t('system["updateTimeTxt"]', {
            updateTime: formatDate(article.publishTime, locale),
          })
        }}</span>
      </div>
    </div>

    <!-- 富文本内容区域 -->
    <div class="article-content" v-html="article.content"></div>

    <!-- 标签 -->
    <div class="article-tags" v-if="article.tags && article.tags.length">
      <div class="tag" v-for="(tag, i) in article.tags" :key="i">
        <span>{{ tag }}</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import useSystemStore from '@/stores/useSystemStore'

const systemStore = useSystemStore()
const { locale } = storeToRefs(systemStore)

// 模拟文章数据
const article = ref({
  title: '《平凡的世界》节选：黄土高原上的青春与奋斗',
  author: {
    name: '路遥',
    avatar: 'https://via.placeholder.com/40',
  },
  publishTime: '2023-05-15T10:30:00',
  content: `
  <h2>第一章</h2>
  
  <p>一九七五年二三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>
  
  <p>在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方，冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。</p>
  
  <blockquote>
    "生活包含着更广阔的意义，而不在于我们实际得到了什么；关键是我们的心灵是否充实。"
  </blockquote>
  
  <h3>孙少平的出场</h3>
  
  <p>就在这时候，在空旷的院坝的北头，走过来一个瘦高个的青年人。他胳膊窝里夹着一只碗，缩着脖子在泥地里蹒跚而行。小伙子脸色黄瘦，而且两颊有点塌陷，显得鼻子像希腊人一样又高又直。脸上看来才刚刚褪掉少年的稚气——显然由于营养不良，还没有焕发出他这种年龄所特有的那种青春光彩。</p>
  
  <p>他撩开两条瘦长的腿，扑踏扑踏地踩着泥水走着。这也许就是那几个黑面馍的主人？看他那一身可怜的穿戴想必也只能吃这种伙食。瞧吧，他那身衣服尽管式样裁剪得勉强还算是学生装，但分明是自家织出的那种老土粗布，而且黑颜料染得很不均匀，给人一种肮肮脏脏的感觉。脚上的一双旧黄胶鞋已经没有了鞋带，凑合着系两根白线绳；一只鞋帮上甚至还缀补着一块蓝布补丁。裤子显然是前两年缝的，人长布缩，现在已经短窄得吊在了半腿把上；幸亏袜腰高，否则就要露肉了。</p>
  
  <img src="https://via.placeholder.com/600x400?text=黄土高原风光" alt="黄土高原风光" style="margin: 20px auto; display: block; border-radius: 8px;">
  
  <h2>青春的苦涩与尊严</h2>
  
  <p>他独个儿来到馍筐前，先怔了一下，然后便弯腰拾了两个高粱面馍。筐里还剩两个，不知他为什么没有拿。他直起身子来，眼睛不由地朝三只空荡荡的菜盆里瞥了一眼。他瞧见乙菜盆的底子上还有一点残汤剩水。房上的檐水滴答下来，盆底上的菜汤四处飞溅。他扭头瞧了瞧：雨雪迷蒙的大院坝里空无一人。他很快蹲下来，慌得如同偷窃一般，用勺子把盆底上混合着雨水的剩菜汤往自己的碗里舀。铁勺刮盆底的嘶啦声像炸弹的爆炸声一样令人惊心。血涌上了他黄瘦的脸。一滴很大的檐水落在盆底，溅了他一脸菜汤。他闭住眼，紧接着，就见两颗泪珠慢慢地从脸颊上滑落了下来——唉，我们姑且就认为这是他眼中溅进了辣子汤吧！</p>
  
  <p>他站起来，用手抹了一把脸，端着半碗剩菜汤，来到西南拐角处的开水房前，在水房后墙上伸出来的管子上给菜汤里搀了一些开水，然后把高粱面馍掰碎泡进去，就蹲在房檐下狼吞虎咽地吃起来。</p>
  
  <pre><code>这就是《平凡的世界》开篇展现的，
一个普通农村青年的日常生活。
没有华丽的辞藻，
只有真实得令人心痛的细节描写。</code></pre>
  
  <h3>关于尊严的思考</h3>
  
  <p>突然间，他听见后面传来一阵低低的议论声："瞧，这就是那个每天最后一个来拿饭的......"</p>
  
  <p>孙少平猛地转过身，眼睛紧张地扫视着刚才声音传来的方向。他发现是两个低年级的女生正看着他交头接耳——她们显然没有料到他会突然转身，立刻尴尬地低下头，装作若无其事地从他身边匆匆走过。</p>
  
  <p>孙少平站在那里，手里端着那碗被雨水稀释了的菜汤，感到一种难以言喻的屈辱。他知道，在这所县立高中，像他这样从农村来的学生并不多，而像他这样穷困的就更少了。大多数同学至少还能吃上玉米面馍，像他这样顿顿啃高粱面馍的，恐怕全校也就他一个。</p>
  
  <ul>
    <li>贫穷不是耻辱，但确实带来了难以言说的痛苦</li>
    <li>青春期的自尊心在这种环境下显得格外脆弱</li>
    <li>物质匮乏却无法阻挡精神世界的成长</li>
  </ul>
  
  <h2>结语</h2>
  
  <p>这就是路遥笔下的《平凡的世界》，它展现了中国社会变革时期普通人的生存状态和精神世界。孙少平的形象，代表了一代农村青年在城乡二元结构下的挣扎与奋斗。小说通过这些看似平凡的日常生活描写，展现了不平凡的人性光辉。</p>
  
  <p>正如路遥在书中所写："<strong>生活不能等待别人来安排，要自己去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。</strong>"</p>
`,
  tags: ['路遥', '《平凡的世界》', '茅盾文学奖', '现实主义'],
})

// 格式化日期
const formatDate = (dateString: string, lang: string) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' }
  return new Date(dateString).toLocaleDateString(lang, options as Object)
}
</script>

<style scoped lang="less">
.article-container {
  max-width: 1200px;
  max-width: 75rem;
  margin: 0 auto;
  padding: 60px 15px;
  padding: 3.75rem 0.9375rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

.article-title {
  font-size: var(--title-size);
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  color: #222;
  text-align: center;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  gap: 1.25rem;
  margin-bottom: 30px;
  margin-bottom: 1.875rem;
  padding-bottom: 20px;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eee;
  color: #666;
  font-size: 0.9rem;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  gap: 0.625rem;
}

.author-avatar {
  width: 40px;
  width: 2.5rem;
  height: 40px;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: bold;
}

.article-content {
  margin-bottom: 40px;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  gap: 0.625rem;
  margin-top: 30px;
  margin-top: 1.875rem;
  padding-top: 20px;
  padding-top: 1.25rem;
  border-top: 1px solid #eee;
}

.article-tags .tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  padding: 0.25rem 0.75rem;
  background-color: #f0f0f0;
  border-radius: 20px;
  border-radius: 1.25rem;
  font-size: 0.8rem;
  color: #555;
}
</style>

<style>
/* 全局样式用于富文本内容 */
.article-content >>> h2 {
  font-size: 1.8rem;
  margin: 30px 0 15px;
  margin: 1.875rem 0 0.9375rem;
  color: #222;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}

.article-content >>> h3 {
  font-size: 1.4rem;
  margin: 25px 0 12px;
  margin: 1.5625rem 0 0.75rem;
  color: #333;
}

.article-content >>> p {
  margin: 15px 0;
  margin: 0.9375rem 0;
  font-size: 1rem;
}

.article-content >>> ul,
.article-content >>> ol {
  margin: 15px 0;
  margin: 0.9375rem 0;
  padding-left: 30px;
  padding-left: 1.875rem;
}

.article-content >>> li {
  margin: 8px 0;
  margin: 0.5rem 0;
}

.article-content >>> a {
  color: var(--color-active);
  text-decoration: none;
}

.article-content >>> a:hover {
  text-decoration: underline;
}

.article-content >>> img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  margin: 1.25rem 0;
  border-radius: 4px;
  border-radius: 0.25rem;
}

.article-content >>> pre {
  background-color: #f6f8fa;
  padding: 16px;
  padding: 1rem;
  border-radius: 6px;
  border-radius: 0.375rem;
  overflow: auto;
  margin: 20px 0;
  margin: 1.25rem 0;
}
</style>