<template>
  <view>
     <loading-view v-if="isFirstLoading"></loading-view>
    <!-- 导航栏 -->
    <u-navbar :border-bottom="false"  :background="{ background: '#ffffff' }">
      <view class="pl-base w-full">
        <u-search @change="Change" @search="Search" placeholder="请输入内容" v-model="searchText" :show-action="false"></u-search>
      </view>
      <template #right>
        <view class="mx-base relative" @tap="$u.routeAuth('/pages/news/index')">
          <u-icon name="chat" size="48"></u-icon>
          <block v-if="news_num>0">
            <u-badge :is-dot="true" size="16" :offset="[0, 2]" class="badge"></u-badge>
          </block>
        </view>
      </template>
    </u-navbar>
    <!--  -->
    <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="jump(item.jump_type,item.jump_link,item.id)" 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">
          <view class="text-txBase  w-full h-80rpx leading-40rpx text-30rpx  two-ellipsis font-bold">{{item.title}}</view>
          <view class="text-txGray text-md mt-10rpx">{{item.created_at}}</view>
          <view class="flex items-center justify-between mt-10rpx text-txGray text-md">
            <view>积分: {{item.points}}</view>
            <view class="flex items-center">
              <u-icon :color="item.like_status ? '#378264' : ''" size="48"
                :name="item.like_status ? 'thumb-up-fill' : 'thumb-up'"></u-icon>
              <view class="ml-10rpx h-30rpx">{{item.likes}}</view>
            </view>
          </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 {
        isFirstLoading:true,
        article_banner:[],//广告位图片
        searchText: '',
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
        id:''
      };
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
      cpaceImage(){
        return this.article_banner.length>0?this.article_banner[0]:{}
      }
    },
    onLoad({id}) {
      this.id=id
      setTimeout(()=>{
        this.isFirstLoading=false
      },300)
      this.getCpace()
      uni.$on('isUp', ({
        id
      }) => {
        this.dataList.forEach((item) => {
          if (item.id == id) {
            item.like_status = true;
            item.likes += 1
          }
        })
      })
    },
    methods: {
      //获取广告位
      async getCpace(){
        try{
          let resDate = await this.$api.get('/v1/ads', {
            params: {
              keys: 'article_banner'
            }
          })
          this.article_banner=resDate.article_banner
        }catch(err){}finally{
          // this.isFirstLoading=false
        }
      },
      downCallback() {
        this.mescroll.resetUpScroll();
        this.dataList = []
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData({
        num,
        size
      }) {
        let obj = {
          category: this.id,
          key: this.searchText,
          page: num,
          per_page: size
        }
        this.$api.get(`/v1/articles/by-category/${ this.id}`, {
          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()
        })
      },
      Search() {
        this.downCallback()
      },
      Change(e) {
        if (e == '') this.downCallback()
      },
      //跳转页面
      jump(type, url, id) {
        if (type == 2) {
          uni.navigateTo({
            url: '/pages/web_view/index?url=' + url
          })
        } else {
          this.$u.routeAuth('/pages/article_details/article_details', {
            id: id
          })
        }
      },
      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>
