<!-- 健康文章详情 -->
<template>
  <div class="detail">
    <div class="title">{{article.Title}}</div>
    <div class="info">
      <div class="ellips" style="max-width:3rem;">{{article.Author}}</div>
      <div>{{article.CreationDate | getTime}}</div>
      <div>阅读：{{article.PV}}</div>
    </div>
    <div class="content" v-html="article.ArticleContent"></div>

    <div class="like" :class="article.IsPoints?'red':''" @click="AddFabulous">
      <img :src="iconLove" alt="爱心图标" class="iconLove" />
      {{article.PointsNumber}}
    </div>
  </div>
</template>
<script>
import { iconLove } from "@/assets/js/icon.js";
export default {
  name: "articlesDetail",
  data() {
    return {
      iconLove: iconLove, //爱心图标
      id: "", // 文章id
      article: {} //文章详情
    };
  },
  methods: {
    // 增加阅读量
    AddReadCount() {
      this.$http.AddReadCount(this.id).then(res => {
        if (res.data.IsSuccess) {
        }
      });
    },
    // 获取文章详情
    getArticle() {
      let article = JSON.parse(sessionStorage.getItem("lj_Article"));
      if (!article) {
        return this.$router.replace("/healthInquiry");
      }
      this.id = article.Id;
      this.article = article;
    },
    // 点赞功能
    AddFabulous() {
      if (this.article.IsPoints)
        return this.$toast("你已经点赞过了，无法重复点赞！");
      this.$http.AddFabulous(this.id).then(({ data }) => {
        if (data.IsSuccess) {
          this.$set(this.article, "IsPoints", true);
          this.$set(this.article, "PointsNumber", ++this.article.PointsNumber);
        } else {
          this.$toast(data.ResultMsg);
        }
      });
    }
  },
  created() {
    // 滚动到顶部
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });

    this.getArticle();
    setTimeout(() => {
      // 阅读量
      this.AddReadCount();
    }, 2000);
  }
};
</script>
<style lang='less' scoped>
img {
  display: block;
  width: 100%;
}
.detail {
  padding: 0.4rem 0.2rem;
  line-height: 1.5;
  color: #000000;
  font-size: 0.26rem;
  .title {
    text-align: left;
    font-size: 0.36rem;
    font-weight: 600;
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin: 0.2rem 0;
    color: #828282;
    // div {
    //     margin-right: 1rem;
    // }
  }
  .content {
    line-height: 0.48rem;
    text-align: left;
    /deep/ img {
      display: block !important;
      width: 100% !important;
    }
  }
  .like {
    display: inline-flex;
    align-items: center;
    margin: 0.64rem auto 0;
    padding: 0 0.4rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 0.35rem;
    border: solid 0.01rem #666666;
    color: red;
    filter: grayscale(1);

    .iconLove {
      width: 0.24rem;
      margin-right: 0.05rem;
    }
    &.red {
      filter: grayscale(0);
      border: solid 0.01rem red;
    }
  }
}
</style>