<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="page">
    <loading-cover v-if="loading" ref="loadingCover"></loading-cover>
    <!--文章标题-->
    <view class="help-title">{{ detail.article_title }}</view>
    <view class="help-meta">
      <text class="help-time">发表时间: {{ detail.create_time }}</text>
    </view>
    <!--用户信息  存在分享人则显示分享人信息，不存在则显示本人信息 -->
<!--    <view class="user">-->
<!--      <view class="avatar" @click="goToPage">-->
<!--        <image class="avatar-image" :src="$util.img(member.headimg)"></image>-->
<!--      </view>-->
<!--      <view class="info" @click="goToPage">-->
<!--        <view class="nickname">{{ member.nickname }}</view>-->
<!--        <view class="phone">{{ member.mobile }}</view>-->
<!--      </view>-->
<!--      <view class="btn">-->
<!--        &lt;!&ndash;判断：当前用户存在推荐人且本人不是分销商-显示推荐人信息，不存在推荐人或者本人是分销商-显示本人信息； 当：本人不是分销商或者会员卡已过期-显示升级名片，本人是分销商且会员卡未过期-显示我要推广&ndash;&gt;-->
<!--        <view class="btn-item" v-if="member.show_type === 'upgrade'" @click="onUpgrade">升级名片</view>-->
<!--        <view class="btn-item" v-else @click="share_panel = true">我要分享</view>-->
<!--      </view>-->
<!--    </view>-->
    <!--文章内容-->
    <view class="help-content">
      <rich-text :nodes="content"></rich-text>
    </view>
    <!--浏览量和点赞-->
    <view class="bottom">
      <view class="browse">{{ set_info.browse_text || '浏览量' }}{{ detail.read_num }}次数</view>
      <view class="bottom-list">
        <view class="fabulous" @click="fabulous">
          <van-icon v-if="detail.is_fabulous > 0" class="good-job" name="good-job" />
          <van-icon v-else class="good-job-o" name="good-job-o" />
          赞 {{ detail.dianzan_num }}
        </view>
        <view class="share_panel" @click="share_panel = true"><image class="my-icon" src="./public/img/fenxiang.png"></image>分享</view>
      </view>
    </view>
    <!-- 推荐阅读 -->
    <view class="recommend">
      <!--顶部内容-->
      <view class="top">
        <view class="title">推荐阅读</view>
        <view class="more-info" @click="$util.redirectTo('/pages_promotion/article/list')">
          查看更多<van-icon class="arrow" name="arrow" />
        </view>
      </view>
      <!--推荐列表-->
      <view class="article">
        <van-list v-model="list_loading" :finished="finished" finished-text="" @load="getList">
          <view class="article-block" v-for="(item,index) in list" :key="index" @click="goToDetail(item.article_id)">

            <view class="block-content">
              <view class="content-title">{{ item.article_title }}</view>
              <view class="content-abstract">{{ item.article_abstract }}</view>
              <view class="content-info">
                <view class="content-info-item">
                  <image class="my-icon" src="./public/img/liulan.png"></image>
                  {{ item.read_num }}
                </view>
                <view class="content-info-item">
                  <image class="my-icon" src="./public/img/dianzan.png"></image>
                  {{ item.dianzan_num }}
                </view>
                <view class="content-info-item" style="width: 160rpx">{{ item.create_time.split(" ")[0] }}</view>
              </view>
            </view>
            <view class="img">
              <image class="image" :src="$util.img(item.cover_img)"></image>
            </view>
          </view>
        </van-list>
      </view>
    </view>
	</view>
  <!-- 底部tabBar -->
  <view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
  <!--分享面板-->
  <share :show="share_panel" @close="share_panel = false" :share="share_info" :shareParams="share_params"></share>
</template>

<script>
import htmlParser from '@/common/js/html-parser';
import share from '@/components/share-panel/share-panel';

export default {
  components:{
    share
  },
	data() {
		return {
      set_info: {},
      loading: true,
			articleId: 0,
			detail: {},
			content: '',
      share_panel: false,
      member_id: 0,
      member:{},

      page: 1 ,
      list: [],
      list_loading: false, // 是否处于加载状态，加载过程中不触发load事件
      finished: false, // 是否已加载完成，加载完成后不再触发load事件

      share_info:{},
      share_params: [
          'article_id'
      ],

      source_member: 0,
		};
	},
	onLoad(options) {
		this.articleId = options.article_id || 0;
		if (this.articleId == 0) {
			this.$util.redirectTo('/pages_tool/help/list', {}, 'redirectTo');
			return;
		}
    // 分享奖励
    if(options.source_member && options.share_id) this.shareReward(options);
    // 分享接收 source_member
    if (options.source_member) uni.setStorageSync('source_member', options.source_member);
    // 获取数据
    this.getData();
	},
	onShow() {
    //记录分享关系
    if(uni.getStorageSync('token') && uni.getStorageSync('source_member')){
      this.$util.onSourceMember(uni.getStorageSync('source_member'));
    }
  },
  mounted() {
    this.getSetting()
  },
  methods: {
    // 获取文章详情
		getData() {
      let _this = this;
      let source_member = uni.getStorageSync('source_member') || 0;

      _this.$api.sendRequest({
				url: '/article/api/index/details',
				data: { article_id: _this.articleId, source_member: source_member },
				success: res => {
					if (res.code === 0 && res.data) {
            _this.detail = res.data;
            // _this.member = res.member;
            _this.$langConfig.title(this.detail.article_title);
            _this.content = htmlParser(this.detail.article_content);

            _this.share_info = {
              title: _this.detail.article_title, // 分享标题
              desc: _this.detail.article_abstract, // 分享描述
              imgUrl: _this.detail.cover_img, // 分享图标
            };
					}
          else {
						this.$util.showToast({
							title: res.message
						});
						setTimeout(() => {
							this.$util.redirectTo('/pages_promotion/article/list', {}, 'redirectTo');
						}, 2000);
					}

          _this.loading = false;
				},
				fail: res => {
          _this.loading = false;
				}
			});
		},
    // 点击升级名片
    onUpgrade(){
      if(this.member.level_expire_time > 0) this.$util.redirectTo('/pages_tool/member/card')
      else this.$util.redirectTo('/pages_tool/member/card_buy')
    },
    // 点击进入名片
    goToPage(){
      this.$util.redirectTo('/pages_promotion/card/homepage')
    },
    // 获取基本设置
    getSetting(){
      let _this = this;
      this.$api.sendRequest({
        url: '/article/api/index/setInfo',
        success: res => {
          if(res.code === 0){
            _this.set_info = res.data;
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 点击点赞按钮
    fabulous(){
      let _this = this;
      _this.$api.sendRequest({
        url: '/article/api/index/fabulous',
        data: { article_id: _this.articleId },
        success: res => {
          this.$util.showToast({
            title: res.message
          });
          if (res.code === 0) _this.getData();
        },
        fail: res => {}
      });
    },
    // 获取文章列表
    getList(){
      let _this = this;
      this.list_loading = true;
      _this.$api.sendRequest({
        url: '/article/api/index/articleList',
        data: {
          page_size: 10,
          page: _this.page,
          is_rand: 1,
        },
        success: res => {
          if(res.code === 0){
            _this.list_loading = false;
            let data = res.data;

            if(_this.page === 1) _this.list = data.list;
            else _this.list = _this.list.concat(data.list);
            _this.page++;
            // 推荐列表 仅加载一页
            _this.finished = true;
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 点击跳转 —— 文章详情
    goToDetail(id) {
      this.$util.redirectTo('/pages_promotion/article/detail', { article_id: id });
    },
    // 获取分享奖励
    shareReward(options){
      this.$api.sendRequest({
        url: '/article/api/index/getShareReward',
        data: options,
        success: res => {
          console.log(res);
        },
        fail: res => {
          console.log('分享奖励失败',res);
        }
      });
    }
	},
	onShareAppMessage(res) {
		var title = this.detail.article_title;
		var path = '/pages_promotion/article/detail?article_id=' + this.articleId;
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">
.page {
	width: 100%;
	height: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	background: #ffffff;
  user-select: auto;
  .help-title {
    font-size: 40rpx;
    font-weight: bold;
    text-align: left;
    line-height: 60rpx;
  }
  .help-content {
    margin-top: $margin-updown;
    word-break: break-all;
    user-select: auto;
  }
  .help-meta {
    text-align: right;
    margin-top: $margin-updown;
    color: $color-tip;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    .share-o{
      margin-right: 6rpx;
    }

    .help-time {
      font-size: $font-size-tag;
    }
  }
  .user{
    margin: 40rpx 0;
    background: #f6f7fb;
    border-radius: 20rpx;
    padding: 30rpx;
    width: calc(100% - 60rpx);
    height: 120rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .avatar{
      height: 120rpx;
      width: 120rpx;

      .avatar-image{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info{
      width: calc(100% - 120rpx - 170rpx);
      padding-left: 20rpx;

      .nickname{
        font-size: 30rpx;
        font-weight: bold;
      }
      .phone{
        font-size: 26rpx;
      }
    }
    .btn{
      width: 170rpx;
      .btn-item{
        background: #de3242;
        border-radius: 40rpx;
        width: 160rpx;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        color: #FFF;
      }
    }


  }
  .bottom{
    margin: 30rpx 0;
    font-size: 26rpx;
    display: inline-flex;
    width: 100%;
    height: 60rpx;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    .browse{
      color: #909399;
    }
    .bottom-list{
      display: flex;
      justify-content: space-between;
      width: 280rpx;
      .fabulous{
        color: #909399;
        border: 1px solid #dddddd;
        border-radius: 100rpx;
        height: 50rpx;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 30rpx;

        .good-job-o{
          color: #909399;
          font-size: 34rpx;
          margin-right: 10rpx;
        }
        .good-job{
          color: #e02e42;
          font-size: 34rpx;
          margin-right: 10rpx;
        }
      }
      .share_panel{
        line-height: 64rpx;
        color: #909399;
      }
    }
  }
  .recommend{
    .top{
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      line-height: 60rpx;
      margin: 50rpx 0;
      position: relative;

      .title{
        padding-left: 30rpx;
        font-size: 26rpx;
      }
      .title::after{
        content: "";
        position: absolute;
        left: 0;
        top: 14rpx;
        width: 6rpx;
        height: calc(100% - (14rpx * 2));
        background: #527010;
      }
      .more-info{
        font-size: 26rpx;
        color: #8f9298;
        .arrow{}
      }
    }
    .article{
      .article-block{
        width: 100%;
        padding: 20rpx 0;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        height: 180rpx;
        position: relative;
        .img{
          width: 260rpx;
          height: 180rpx;
          border-radius: 20rpx;
          overflow: hidden;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .block-content{
          width: calc(100% - 290rpx);
          height: 100%;
          display: inline-flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;

          .content-title{
            width: 100%;
            font-size: 30rpx;
            font-weight: bold;
            line-height: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .content-abstract{
            height: 40rpx;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            //text-align: center;
            font-size: 24rpx;
            //font-weight: bold;
            line-height: 40rpx;
            text-overflow: ellipsis;
            display: block;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .content-info{
            width: 100%;
            display: inline-flex;
            justify-content: flex-start;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-end;
            .content-info-item{
              width: 85rpx;
              font-size: 26rpx!important;
              color: #999999;
            }
          }
        }
      }
      .article-block::after{
        content: "";
        position: absolute;
        width: calc(100% - 40rpx);
        height: 1px;
        bottom: 0;
        left: 20rpx;
        background: #f5f5f5;
      }
    }
  }

}

.my-icon {
  top: 3px;
  height: 15px;
  width: 15px;
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 'vant-icon';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

</style>
