<template>
  <view>
   <block v-if="bannerList.length>0">
      <cu-swiper @click="swiperJump" indicator-pos="bottomRight" mode="number" height="400" border-radius="0" :list="bannerList"></cu-swiper>
   </block>
    <!--列表  -->
    <mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
      :down="downOption" :up="upOption">
      <view class="px-rowSm mt-20rpx">
        <u-waterfall v-model="dataList" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" :key="index" class="px-rowSm mb-base">
              <goods-item :showShrough="true" :goods="item"></goods-item>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view v-for="(item, index) in rightList" :key="index" class="px-rowSm mb-base">
              <goods-item :showShrough="true" :goods="item"></goods-item>
            </view>
          </template>
        </u-waterfall>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        bannerList: [],
        downOption: {
          auto: false,
          use: false
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    onLoad() {
      this.getBanner()
    },
    methods: {
      //轮播跳转
      swiperJump(e){
        let item=this.bannerList[e]
        this.jumpByOption(item)
      },
      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}`);
          }
        }
      },
      //获取轮播图
      async getBanner(){
        let resDate=await this.$api.get('/v1/ads',{params: { keys: 'wechat_mini_vip_car_banner'}})
        this.bannerList=resDate.wechat_mini_vip_car_banner
      },
      downCallback() {
        this.dataList = []
        this.$refs.uWaterfall.clear();
        this.mescroll.resetUpScroll();
      },
      upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        let obj = {
          page: page.num,
          per_page: page.size,
          part:'vip'
        }
        this.$api.get(`/v1/product/part`, {
          params: obj
        }).then(res => {
          this.mescroll.endSuccess(res.data.length)
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        }).catch(err => {
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="scss">

</style>
