<template>
  <!--<loading-cover v-if="loading" ref="loadingCover"></loading-cover>-->
	<page-meta :page-style="themeColor"></page-meta>
	<view id="articleList">
    <!--分类标题栏-->
    <view class="top-buttons">
      <view class="cate">
        <!-- #ifdef H5 -->
        <van-tabs v-model="cate_ids" scrollspy :swipe-threshold="3" color="#527010">
          <van-tab v-for="(item,index) in cate_list" :key="index" :name="item.category_id" :title="item.category_name"></van-tab>
        </van-tabs>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <van-tabs swipeable :swipe-threshold="3" color="#527010" :active="cate_ids" @change="changeTabs">
          <van-tab v-for="(item,index) in cate_list" :key="index" :name="item.category_id" :title="item.category_name"></van-tab>
        </van-tabs>
        <!-- #endif -->
      </view>
    </view>
    <!--轮播图-->
    <!-- #ifdef H5 -->
    <van-swipe v-if="set_info.banner_list && cate_ids === 'recommend'" class="swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in set_info.banner_list" :key="index">
        <image class="image-item" :src="$util.img(item)" mode="aspectFit"></image>
      </van-swipe-item>
    </van-swipe>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <swiper class="swipe" circular indicator-dots autoplay :interval="30000" v-if="set_info.banner_list && cate_ids === 'recommend'" >
      <swiper-item v-for="(item,index) in set_info.banner_list" :key="index">
        <image class="image-item" :src="$util.img(item)" mode="widthFix"></image>
      </swiper-item>
    </swiper>
    <!-- #endif -->

    <!-- hot阅读 -->
    <view class="hot" v-if="cate_ids === 'recommend'">
      <!--顶部内容-->
      <view class="top">
        <view class="title">热门文章</view>
      </view>
      <!--推荐列表-->
      <view class="article">
        <scroll-view scroll-x="true">
          <view class="article-block" v-for="(item,index) in hot_list" :key="index" @click="goToDetail(item.article_id)">
            <view class="img">
              <image class="image" :src="$util.img(item.cover_img)"></image>
            </view>
            <view class="block-content">
              <view class="content-title">{{ item.article_title }}</view>
              <view class="content-abstract">{{ item.article_abstract }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 推荐阅读 -->
    <view class="recommend" v-if="cate_ids === 'recommend'">
      <!--顶部内容-->
      <view class="top">
        <view class="title">精选推荐</view>
        <view class="more-info" @click="cate_ids = 'recommend-list'">
          查看更多 <van-icon class="arrow" name="arrow" />
        </view>
      </view>
      <!--推荐列表-->
      <view class="article">
        <view class="article-block" v-for="(item,index) in recommend_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="liulan"></image>
                {{ item.read_num }}
              </view>
              <view class="content-info-item">
                <image class="my-icon" :src="dianzan"></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>
      </view>
    </view>
    <!--文章列表-->
    <view class="article" v-if="cate_ids !== 'recommend'">
      <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="liulan"></image>
              {{ item.read_num }}
            </view>
            <view class="content-info-item">
              <image class="my-icon" :src="dianzan"></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>
    </view>
  </view>
  <!-- 底部tabBar -->
  <view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
</template>

<script>
export default {
  components: {  },
	data() {
		return {
      liulan: this.$util.img('public/picture/aijiu/liulan.png'),
      dianzan: this.$util.img('public/picture/aijiu/dianzan.png'),
      cate_list: [],
      set_info: [],
			list: [],
      hot_list: [],
      recommend_list: [],
      // 排序内容
      sort_value: 'new',
      sort_list: [
        { text: '最新', value: 'new' },
        { text: '推荐', value: 'recommend' },
        { text: '热门', value: 'hot' },
        { text: '点赞', value: 'fabulous' },
      ],
      // 列表相关
      search_title: '',
      cate_ids: '',
      page: 1,
      total_page: 1,
		};
	},
	onShow() {},
  watch:{
    'search_title':{
      handler() {
        this.initGetList();
      }
    },
    'cate_ids':{
      handler() {
        this.initGetList();
      }
    },
    'sort_value':{
      handler() {
        this.initGetList();
      }
    },
  },
  mounted() {
    this.getCateList();
    this.getSetting();
    this.getHotList();
    this.getRecommendList();
  },
  methods: {
    // 初始化
    initGetList(){
      this.page = 1;
      this.list = [];
      this.getList();
    },
    // 获取文章分类
    getCateList(){
      let _this = this;
      this.$api.sendRequest({
        url: '/article/api/index/cateList',
        success: res => {
          if(res.code === 0){
            let list = [
              {category_id: 'recommend', category_name: '推荐'},
              // {category_id: '', category_name: '全部'}
            ];
            _this.cate_list = list.concat(res.data);
            _this.cate_list = _this.cate_list.concat([
              {category_id: 'recommend-list', category_name: '精选推荐'}
            ])

            _this.cate_ids = 'recommend';
          }else {
            this.$util.showToast({
              title: res.message
            });
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 获取基本设置
    getSetting(){
      let _this = this;
      this.$api.sendRequest({
        url: '/article/api/index/setInfo',
        success: res => {
          if(res.code === 0){
            let data = res.data;
            if(typeof data.banner_list) data.banner_list = JSON.parse(data.banner_list);

            _this.set_info = res.data;
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 获取文章列表
    getList(){
      let _this = this;
      this.loading = true;
      _this.$api.sendRequest({
        url: '/article/api/index/articleList',
        data: {
          page: _this.page,
          page_size: 10,
          search_text: _this.search_title,
          cate_ids: _this.cate_ids === 'recommend-list' ? '' : _this.cate_ids,
          orders: _this.sort_value,
          is_recommend: _this.cate_ids === 'recommend-list' ? 1 : 0
        },
        success: res => {
          if(res.code === 0){
            _this.loading = false;
            let data = res.data;
            if(_this.page === 1) {
              _this.list = data.list;
              _this.total_page = data.page_count;
            }
            else {
              _this.list = _this.list.concat(data.list);
            }
            _this.page++;
            // 加载完成  判断是否为最后一页
            if (_this.page > data.page_count) _this.finished = true;
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 获取热门文章列表
    getHotList(){
      let _this = this;
      this.loading = true;
      _this.$api.sendRequest({
        url: '/article/api/index/articleList',
        data: {
          page_size: 10,
          is_hot: 1,
          page: 1,
          search_text: '',
          cate_ids: '',
          orders: ''
        },
        success: res => {
          if(res.code === 0){
            _this.loading = false;
            let data = res.data;
            _this.hot_list = _this.list.concat(data.list);
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 获取推荐文章列表
    getRecommendList(){
      let _this = this;
      this.loading = true;
      _this.$api.sendRequest({
        url: '/article/api/index/articleList',
        data: {
          page_size: 10,
          is_recommend: 1,
          page: 1,
          search_text: '',
          cate_ids: '',
          orders: ''
        },
        success: res => {
          if(res.code === 0){
            _this.loading = false;
            let data = res.data;
            _this.recommend_list = _this.list.concat(data.list);
          }
        },
        fail: res => {
          console.log(res);
        }
      });
    },
    // 点击跳转 —— 文章详情
		goToDetail(id) {
			this.$util.redirectTo('/pages_rush/article/detail', { article_id: id });
		},
    // 点击跳转 —— 签到
    goToSign() {
      this.$util.redirectTo('/pages_tool/member/signin');
    },
    // 改变顶部标签
    changeTabs(event){
      console.log(event);
      this.cate_ids = event.detail.name;
    }

  },
	onShareAppMessage(res) {
		var title = '文章列表';
		var path = '/pages_rush/article/list';
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	},
  onReachBottom() {
    //触底事件
    if(this.total_page >= this.page) this.getList();
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-search__content{
  background-color: #f0f0f0;
}
#articleList{
  padding: 0 10px;
  background: #ffffff;
  .search{
    width: 70rpx;
    height: 70rpx;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    .img{
      image{
        width: 100%;
        height: 34rpx;
        display: block;
      }
    }
    .sign-button{
      height: 30rpx;
      font-size: 26rpx;
      line-height: 30rpx;
    }
  }
  .top-buttons{
    height: 60rpx;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: flex-end;

    .cate{
      height: 100%;
      //width: calc(100% - 150rpx);
      width: 100%;

      /deep/ .van-tabs{
        height: 100%;
        .van-tabs__wrap{
          height: 100%;
        }
      }
    }
    .sort{
      --sort-width--: 140rpx;
      height: 100%;
      width: var(--sort-width--);
      position: relative;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;

      /deep/ .van-dropdown-menu{
        height: 100%!important;
        width: var(--sort-width--);
        .van-dropdown-menu__bar{
          height: 100%!important;
          width: var(--sort-width--);
        }
      }
    }
    .sort::after{
      content: "";
      position: absolute;
      left: 0;
      top: calc((100% - 60rpx) / 2);
      width: 4rpx;
      height: 60rpx;
      background: #999999;
    }

  }
  .swipe{
    width: 100% !important;
    height: calc(100vw / 2);
    padding: 0;
    margin: 20rpx 0;

    .image-item{
      width: 100% !important;
      height: 100%!important;
      border-radius: 20rpx;
      /deep/ div{
        background-size: 100% 100% !important;
      }
    }
  }
  .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;
    }
  }
  .recommend{
    .top{
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      line-height: 60rpx;
      margin: 10rpx 0 10rpx 0;
      position: relative;

      .title{
        padding-left: 20rpx;
        font-size: 36rpx;
        font-weight: 900;

      }
      //.title::after{
      //  content: "";
      //  position: absolute;
      //  left: 0;
      //  top: 14rpx;
      //  width: 6rpx;
      //  height: calc(100% - (14rpx * 2));
      //  background: #e02e42;
      //}
      .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;
      }
    }
  }

  .hot{
    .top{
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      line-height: 60rpx;
      margin: 0 0 10rpx 0;
      position: relative;

      .title{
        padding-left: 20rpx;
        font-size: 36rpx;
        font-weight: 900;

      }
      .more-info{
        font-size: 26rpx;
        color: #8f9298;
        .arrow{}
      }
    }
    .article{
      white-space: nowrap;
      width: 100%;
      height: calc(65vw / 2);
      .article-block{
        display: inline-block;
        width: 55vw;
        padding: 0 20rpx 10rpx 0!important;
        height: calc(65vw / 2);
        position: relative;
        .img{
          width: 100%;
          height:  100%;
          border-radius: 20rpx;
          overflow: hidden;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .block-content{
          width: 55vw;
          height: calc(65vw / 2);
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          color: #ffffff;
          display: inline-flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

          .content-title{
            overflow: hidden;
            /*这里要显示的设置宽度*/
            white-space:nowrap;
            text-align: center;
            color: #ffffff;
            width: 80%;
            font-size: 32rpx;
            font-weight: bold;
            line-height: 40rpx;
            text-overflow: ellipsis;
            display: block;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .content-abstract{
            overflow: hidden;
            white-space:nowrap;
            text-align: center;
            color: #ffffff;
            width: 60%;
            font-size: 24rpx;
            //font-weight: bold;
            line-height: 40rpx;
            text-overflow: ellipsis;
            display: block;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .article-block::after{
        content: "";
        position: absolute;
        width: calc(100% - 40rpx);
        height: 1px;
        bottom: 0;
        left: 20rpx;
        background: #f5f5f5;
      }
      .article-block:nth-of-type(1){
        margin-left: 0!important;
        padding-left: 0!important;
      }
      .article-block:nth-last-of-type(1){
        margin-right: 0!important;
        padding-right: 0!important;
      }
    }
  }
}
.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>