<template>
  <view>
    <view class="article_head">
      <view class="title">{{ $u.getProperty(articleDetail, 'detail.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, 'detail.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.detail.img}}" /> -->
    <view class="img_source">{{ $u.getProperty(articleDetail, 'detail.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 {
      articleDetail: {},
      title: '',
      likes_num: '',
      id: null,
      follow: false,
      content: '',
      fabulous: false,
      ifshare: true,
      tipPyq: false, // 朋友圈提示
      showTip: false, // 分享提示
    };
  },

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

  methods: {
    async fetchArticleDetail() {
      const token = uni.getStorageSync('token');
      this.ifshare = true;
      this.articleDetail = articleDetail;
      this.created = articleDetail.detail.created.substring(0, 10);
      this.title = articleDetail.detail.title;
      this.follow = articleDetail.follow_status;
      this.fabulous = articleDetail.like_status;
      this.likes_num = articleDetail.detail.likes_num;
      this.content = articleDetail.detail.content;
    },
  },
};
</script>

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