<template>
  <view>
    <view class="article_head">
      <view class="title">{{ $u.getProperty(articleDetail, 'title') }}</view>
      <view class="head_buttom">
        <view class="left">
          <view class="browse">
            <image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_kanguo@2x.png" />
            <view class="browse_number">{{ $u.getProperty(articleDetail, 'views_num') }}</view>
          </view>
          <!--          <view class="browse">-->
          <!--            <image class="browse_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />-->
          <!--            <view class="browse_number">{{ likes_num }}</view>-->
          <!--          </view>-->
        </view>
        <view class="right">{{ created }}</view>
      </view>
    </view>

    <!-- <image class="img" mode="aspectFill" src="{{articleDetail.img}}" /> -->
    <view class="img_source">{{ $u.getProperty(articleDetail, 'soure') }}</view>

    <view class="article_detail">
      <u-parse :content="content" />
    </view>

    <view class="buttom_btn">
      <!--      <view class="btn_box">-->
      <!--        <view :class="[!follow ? 'btn_box_item' : 'item_active']" bindtap="follow">-->
      <!--          <image v-if="!follow" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu1@2x.png" />-->
      <!--          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_guanzhu3@2x.png" />-->
      <!--        </view>-->
      <!--        <view :class="[!fabulous ? 'btn_box_item' : 'item_active2']" bindtap="fabulous">-->
      <!--          <image v-if="!fabulous" class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan1@2x.png" />-->
      <!--          <image v-else class="btn_icon" mode="aspectFill" src="/static/icon/ic_wz_dianzan3@2x.png" />-->
      <!--        </view>-->
      <!--        <button class="btn_box_item" bindtap="showTip">-->
      <!--          <image class="btn_icon" mode="aspectFill" src="/static/icon/ic_fenxiang@2x.png" />-->
      <!--        </button>-->
      <!--      </view>-->

      <!--      <van-action-sheet v-show="showTip" cancel-text="取消" bind:close="close" bind:cancel="cancelShare">-->
      <!--        <view class="share_box">-->
      <!--          <button open-type="share" class="share_pyq_btn">分享给好友</button>-->
      <!--          <view bindtap="sharePYQ" class="share_pyq">分享到朋友圈</view>-->
      <!--        </view>-->
      <!--      </van-action-sheet>-->
    </view>

    <!--    <view class="share_bg" bindtap="closetipPyq" v-if="tipPyq">-->
    <!--      <view class="share_bg_box">-->
    <!--        <image mode="aspectFill" class="img_pyq_tip" src="/static/img_pyq_tip@2x.png" />-->
    <!--      </view>-->
    <!--    </view>-->
  </view>
</template>

<script>
import { articleDetail } from '@/pages/article-detail/mock';

export default {
  data() {
    return {
      query: {},
      articleDetail: {},
      title: '',
      likes_num: '',
      created: '',
      id: null,
      follow: false,
      content: '',
      fabulous: false,
      ifshare: true,
      tipPyq: false, // 朋友圈提示
      showTip: false, // 分享提示
    };
  },

  onLoad(query) {
    this.query = query;
    this.fetchArticleDetail();
  },

  methods: {
    async fetchArticleDetail() {
      const token = uni.getStorageSync('token');
      const { detail } = await uni.$u.http.get('/api/article/detail', { params: { id: this.query.id } });

      this.articleDetail = detail;
      this.created = detail.created.substring(0, 10);
      this.title = detail.title;
      this.follow = detail.follow_status;
      this.fabulous = detail.like_status;
      this.likes_num = detail.likes_num;
      this.content = detail.content;
    },
  },
};
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
