<template>
  <div id="newsDetail" class="app" ref="croll">
    <van-sticky :offset-top="0">
      <van-nav-bar
        :title="detailData.publishTime"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      >
      </van-nav-bar>
    </van-sticky>
    <div class="content" ref="content">
      <div class="grid-cell">
        <div class="render-detail-article">
          <div class="render-detail-title" v-text="detailData.title"></div>
          <span v-text="detailData.origSource"></span>
          <div class="contentDetail" v-html="detailData.content"></div>
        </div>
      </div>
    </div>
    <comment-list
      :commentList="detailData.commentList"
      :isFablous="!!detailData.fabulous"
      :isCollect="!!detailData.collect"
      v-if="$pageParams"
      :id="$pageParams.id"
      :more="more"
      :diggCount="detailData.diggCount"
      :readCount="detailData.readCount"
      :commentCount="detailData.commentCount"
      @changeFab="changeFab"
      @changeColl="collection"
      @upset="upset"
    ></comment-list>
  </div>
</template>

<script>
import {
  digg,
  collect,
  progress,
  diggCancel,
  articleDetail,
  collectCancel,
  getCommentList
} from "@/api/article/article.js";
import { currentUrlToParams } from "@/utils/common.js";

import CommentList from "../../../components/Comment/Comment";

import { NavBar as vanNavBar, Sticky as vanSticky, Toast } from "vant";
import "vant/lib/nav-bar/style";
import "vant/lib/sticky/style";
import "vant/lib/toast/style";
import "vant/lib/field/style";
import Config from "@/config/index.js";

export default {
  name: "app",
  maxPro: 0,
  timeout: null,
  data: function() {
    return {
      detailData: {},
      more: false
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    collection() {
      this.$set(this.detailData, "collect", !this.detailData.collect);
      this.detailData.collect
        ? collect(this.$pageParams.id).then(() => {
            Toast("收藏成功！");
          })
        : collectCancel(this.$pageParams.id).then(() => {
            Toast("取消收藏！");
          });
    },
    setProgress() {
      if (!this.$refs.croll) return;
      let timeout = new Date() - 0;
      let scrollTop = this.$refs.croll.scrollTop;
      let height =
        this.$refs.content.offsetHeight + 70 - this.$refs.croll.clientHeight;
      let pro = (scrollTop / height).toFixed(2);
      pro = pro > 1 ? "1" : pro;
      pro = height <= 0 ? "1" : pro;
      if (
        (height > 0 && timeout - this.timeout < Config.proTimeout) ||
        pro <= this.maxPro
      )
        return;
      this.maxPro = pro;
      this.timeout = timeout;
      progress({
        articleId: this.$pageParams.id,
        progress: pro
      });
    },
    changeFab(val) {
      // 点赞
      this.$set(this.detailData, "fabulous", val);
      val
        ? digg(this.$pageParams.id).then(() => {
            Toast("点赞成功！");
            this.$set(
              this.detailData,
              "diggCount",
              this.detailData.diggCount + 1
            );
          })
        : diggCancel(this.$pageParams.id).then(() => {
            Toast("取消点赞！");
            this.$set(
              this.detailData,
              "diggCount",
              this.detailData.diggCount - 1
            );
          });
    },
    upset() {
      let list = this.detailData.commentList ? this.detailData.commentList : [];
      this.more = true;
      let p = {};
      list.length ? (p.lastId = list[list.length - 1].id) : "";
      getCommentList(p, this.$pageParams.id).then(res => {
        this.more = false;
        list.push(...(res || []));
        this.$set(this.detailData, "commentList", list);
        this.$set(
          this.detailData,
          "commentCount",
          this.detailData.commentCount + 1
        );
      });
    }
  },
  mounted() {
    this.$pageParams = currentUrlToParams();
    articleDetail(this.$pageParams.id).then(res => {
      this.detailData = res || {};
      this.timeout = new Date() - 1001;
      window.addEventListener("scroll", this.setProgress, true);
      this.$nextTick(() => {
        this.setProgress();
      });
    });
  },
  beforeDestroy: function() {
    // 销毁之前
    this.setProgress();
    clearTimeout(this.timeout);
  },
  components: {
    vanNavBar,
    vanSticky,
    CommentList
  }
};
</script>
<style lang="scss">
#newsDetail {
  padding: 0.1rem;
  color: #262626;
  overflow-y: scroll;
  font-size: 16px;
  font-weight: 450;
  height: 100%;
  .van-button {
    border: none;
  }
  .render-detail-article .render-detail-title {
    text-align: center;
    font-size: 0.2rem;
    letter-spacing: 0;
    line-height: 1.2em;
    font-weight: 500;
    margin: 0.05rem auto;
  }
  .contentDetail {
    p {
      min-height: 0.3rem;
      line-height: 1.5em;
      text-indent: 2em;
      margin: 0.2rem 0;
      padding-left: 0.05rem;
      strong {
        font-weight: 450;
      }
      .render-detail-footer {
        text-align: right;
        padding-right: 5px;
      }
    }

    img {
      width: 100%;
    }
  }

  .selectText {
    color: #ee0a24;
  }
}
</style>
