<template>
  <!--<loading-cover v-if="loading" ref="loadingCover"></loading-cover>-->
	<page-meta :page-style="themeColor"></page-meta>
	<view id="articleList">
    <!--搜索框-->
<!--    <van-search shape="round" v-model="search_title" show-action placeholder="请输入文章标题">-->
<!--      <template #action>-->
<!--        <view class="search" @click="goToSign">-->
<!--          <view class="img">-->
<!--            <image :src="$util.img('public/picture/aijiu/sign.png')" mode="aspectFit"></image>-->
<!--          </view>-->
<!--          <view class="sign-button">签到</view>-->
<!--        </view>-->
<!--      </template>-->
<!--    </van-search>-->
    <!--分类标题栏-->
    <view class="top-buttons">
      <view class="cate">
        <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>
      </view>
<!--      <view class="sort">-->
<!--        <van-dropdown-menu>-->
<!--          <van-dropdown-item v-model="sort_value" :options="sort_list" />-->
<!--        </van-dropdown-menu>-->
<!--      </view>-->
    </view>
    <!--轮播图-->
    <van-swipe v-if="set_info.banner_list && cate_ids === 'recommend'" class="swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in set_info.banner_list">
        <image class="image-item" :src="$util.img(item)" mode="aspectFit"></image>
      </van-swipe-item>
    </van-swipe>
    <!-- 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">
        <van-list v-model="list_loading" :finished="finished" finished-text="" @load="getList">
          <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="./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 class="article" v-if="cate_ids !== 'recommend'">
      <van-list v-model="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>
  <!-- 底部tabBar -->
  <view class="page-bottom"><diy-bottom-nav></diy-bottom-nav></view>
</template>

<script>
export default {
	data() {
		return {
      cate_list: [],
      set_info: [],
			list: [],
      hot_list: [],
      recommend_list: [],
      loading: false, // 是否处于加载状态，加载过程中不触发load事件
      finished: false, // 是否已加载完成，加载完成后不再触发load事件
      // 排序内容
      sort_value: 'new',
      sort_list: [
        { text: '最新', value: 'new' },
        { text: '推荐', value: 'recommend' },
        { text: '热门', value: 'hot' },
        { text: '点赞', value: 'fabulous' },
      ],
      // 列表相关
      page: 1,
      search_title: '',
      cate_ids: 'recommend',
		};
	},
	onShow() {},
  watch:{
    'search_title':{
      handler() {
        this.page = 1;
        this.list = [];
        this.getList();
      }
    },
    'cate_ids':{
      handler() {
        this.page = 1;
        this.list = [];
        this.getList();
      }
    },
    'sort_value':{
      handler() {
        this.page = 1;
        this.list = [];
        this.getList();
      }
    },
  },
  mounted() {
    this.getCateList();
    this.getSetting();
    this.getHotList();
    this.getRecommendList();
  },
  methods: {
    // 获取文章分类
    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: '精选推荐'}
            ])
          }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;
            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_size: 10,
          page: _this.page,
          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;
            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_promotion/article/detail', { article_id: id });
		},
    // 点击跳转 —— 签到
    goToSign() {
      this.$util.redirectTo('/pages_tool/member/signin');
    }
  },
	onShareAppMessage(res) {
		var title = '文章列表';
		var path = '/pages_promotion/article/list';
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	}
};
</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: 90rpx;
    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%;
    height: calc(100vw / 2);
    padding: 0;
    margin: 20rpx 0;

    .image-item{
      width: 100%;
      height: 100%;
      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: 50rpx 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: 50rpx 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: 20rpx 16rpx;
        height: calc(65vw / 2);
        .img{
          width: 100%;
          height:  100%;
          border-radius: 20rpx;
          overflow: hidden;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .block-content{
          width: calc(100%);
          height: 100%;
          display: block;
          position: relative;
          top: calc(-65vw / 4 - 36rpx);
          color: #ffffff;

          .content-title{
            margin: auto;
            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{
            margin: auto;
            overflow: hidden;
            margin-top: 16rpx;
            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;
      }
    }
  }
}

.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>
