<template>
  <view v-if="!isLoading" class="container b-f p-b">
<!--    <view class="article-title">
      <text class="f-32">{{ detail.title }}</text>
    </view> -->
    <view class="article-little dis-flex flex-x-between m-top10">
<!--      <view class="article-little__left">
        <text class="article-views f-24 col-8">{{ detail.show_views }}次浏览</text>
      </view> -->
      <view class="article-little__right">
        <text class="article-views f-24 col-8">{{ detail.view_time }}</text>
      </view>
    </view>
    <view class="article-content m-top20">
      <mp-html :content="detail.content" />
    </view>
    <!-- 快捷导航 -->
    <!-- <shortcut /> -->
  </view>
</template>

<script>
  import Shortcut from '@/components/shortcut'
  import * as ArticleApi from '@/api/article'

  export default {
    components: {
      Shortcut
    },
    data() {
      return {
        // 当前文章ID
        articleId: null,
        // 加载中
        isLoading: true,
        // 当前文章详情
        detail: null
      }
    },

	onLoad(e){
		const { id } = e
		console.log("id: ",id);
		this.articleId = id
	},

	onShow(e) {
		// 获取文章详情
		this.getArticleDetail()
	},

    methods: {

      // 获取文章详情
      getArticleDetail() {
        const app = this
		const { articleId } = this
        app.isLoading = true
        ArticleApi.getArticle(articleId)
          .then(result => {
            app.detail = result.data;

			// 改写标题
			uni.setNavigationBarTitle({
				title: app.detail.title
			})
          })
          .finally(() => app.isLoading = false)
      }

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      // 构建页面参数
      const params = app.$getShareUrlParams({ articleId: app.articleId });
      return {
        title: app.detail.title,
        path: "/pages/article/detail?" + params
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      // 构建页面参数
      const params = app.$getShareUrlParams({ articleId: app.articleId });
      return {
        title: app.detail.title,
        path: "/pages/article/detail?" + params
      }
    }

  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 90vh;
    padding: 20rpx;
    background: #fff;
  }
  .article-title{
	  text-align: center;
  }
  .article-content {
    font-size: 28rpx;
  }
</style>
