<template>
  <view>
    <loading-view v-if="isFirstLoading"></loading-view>
    <!-- 顶部tabbar -->
    <view class="bg-white sticky w-full top-0 z-9999">
      <u-tabs :list="tabbarList" :is-scroll="isScroll" active-color="#378264" inactive-color="#808080" :current="current" @change="change"></u-tabs>
    </view>
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
      :down="downOption" :up="upOption">
      <!-- 广告位 -->
      <view v-if="cpaceImage.image" @tap="jumpByOption(cpaceImage)" class="w-710rpx m-auto mt-base">
        <u-image border-radius="25rpx" width="100%" height="180rpx" :src="cpaceImage.image" :lazy-load="true"></u-image>
      </view>
      <!-- 列表 -->
      <view @tap="jumpByOption(item)" v-for="(item,index) in dataList" :key="index"
        class="w-710rpx p-base bg-white rounded-xs m-auto mt-base flex items-start justify-between">
        <block v-if="item.cover">
          <u-image border-radius="15rpx" width="250rpx" height="187rpx" :src="item.cover" :lazy-load="true"></u-image>
        </block>
        <view class="ml-base flex-1 h-187rpx flex items-start justify-between flex-col">
          <view class="text-txBase  w-full  leading-40rpx text-30rpx  three-ellipsis font-bold">{{item.title}}
          </view>
          <view class="text-txGray text-md text-right w-full">{{item.created_at}}</view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import CartMixin from '@/pages/shop_cart/mixin';
  export default {
    mixins: [MescrollMixin, CartMixin],
    data() {
      return {
        tabbarList: [],
        isFirstLoading: true,
        article_banner: [], //广告位图片
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
        current: 0
      };
    },
    computed: {
      isScroll(){
        return this.tabbarList.length>5?true:false
      },
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
      cpaceImage() {
        return this.article_banner.length > 0 ? this.article_banner[0] : {}
      },
      chooseItem(){
        return this.tabbarList[this.current]
      }
    },
    onLoad() {
      setTimeout(() => {
        this.isFirstLoading = false
      }, 300)
      this.getCpace()
      this.getDate()
    },
    methods: {
      change(e) {
        if(e==this.current) return
         this.current=e
        this.downCallback()
      },
      //获取广告位
      async getCpace() {
        try {
          let resDate = await this.$api.get('/v1/ads', {
            params: {
              keys: 'article_banner'
            }
          })
          this.article_banner = resDate.article_banner
        } catch (err) {} 
      },
      //获取文章分类
     async getDate(){
       const resData=await this.$api.get('/v1/articles/category')
       this.tabbarList=resData
       this.downCallback()
     },
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData({
        num,
        size
      }) {
        let obj = {
          cate: this.chooseItem?.id,
          key:'',
          page: num,
          per_page: size
        }
        this.$api.get(`/v1/articles`, {
          params: obj
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
      jumpByOption(e) {
        if (!!e.jump_link) {
          if (e.jump_type == 1) {
            this.$u.route(e.jump_link);
          } else if (e.jump_type == 2) {
            this.$u.route(`/pages/web_view/index?url=${e.jump_link}`);
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .badge {
    @apply bg-badge;
  }
</style>
