<template>
  <article class="article-page">
    <a href="javascript:;" class="back-button" @click="$router.back()"
      >&lt; 返回{{ fromTitle }}</a
    >

    <template v-if="article">
      <h2 class="article-title">{{ article.title }}</h2>
      <div class="article-meta">
        <span class="article-time">{{ article.createdAt }}</span>
      </div>
      <div class="article-content" v-html="content"></div>

      <a
        class="article-like-button"
        :class="
          article.liked ? 'icon-thumb-gold-bg-gray' : 'icon-thumb-bg-gray'
        "
        href="javascript:;"
      ></a>
    </template>
  </article>
</template>
<script>
import Img1 from '@/assets/article/1.png'
import Img2 from '@/assets/article/2.png'
import Img3 from '@/assets/article/3.png'
import { sanitize } from 'dompurify'

export default {
  name: 'ArticlePage',
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      from: '',

      article: {
        title: '2023晶闪科技春季校园招聘正式启动',
        content: `<p style="text-align: center;"><img src="${Img1}" style="width: 520px"></p><p style="text-align: center;"><img src="${Img2}" style="width: 520px"></p><p style="text-align: center;"><img src="${Img3}" style="width: 520px"></p>`,
        createdAt: '2023-01-01 12:34:56',
        liked: Math.random() > 0.5,
      },
    }
  },
  computed: {
    fromTitle() {
      if (!this.from) return
      const matched = this.$router.resolve({ name: this.from }).route
      return matched.meta?.title
    },
    content() {
      return sanitize(this.article?.content || '')
    },
  },
  beforeRouteUpdate(to, from, next) {
    this.init()
    next()
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.from = this.$route.query.from
      this.loadArticle()
    },
    async loadArticle() {},
  },
}
</script>
<style lang="scss" scoped>
.article-page {
  padding: 40px 0;
  width: 940px;
  margin: 0 auto;
}

.back-button {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
}

.article-title {
  text-align: center;
  font-size: 30px;
  color: #323232;
  font-weight: normal;
  margin: 40px 0 20px;
  padding-bottom: 20px;

  position: relative;
  &::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
  }
}

.article-meta {
  text-align: center;
  font-size: 14px;
  color: #999;
}

.article-like-button {
  position: fixed;
  bottom: calc(10vh + 70px);
  right: 10vw;
  z-index: 9999;
  display: block;
  width: 50px;
  height: 50px;
  opacity: 0.8;
}

.article-content::v-deep {
  margin-top: 40px;
  overflow: hidden;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei,
      Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    line-height: 1.35;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.6em;
  }

  h4 {
    font-size: 1.4em;
  }

  h5 {
    font-size: 1.2em;
  }

  p {
    margin: 0;
    line-height: 1.5;
    margin-bottom: 16px;
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei,
      Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  }

  img {
    max-width: 100%;
  }
}
</style>
