<template>
  <!-- 模板文件 -->
  <view class="content">

    <!-- 导航栏 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="myNav">
      <myNav title="模板文件" isBack/>
    </view>
    <!-- #endif -->

    <myTabs :current="current" :tabs="tabs" @change="tabChange" fixed/>

    <myPage showSearch :total="total" showTotal searchFixed :isEnd="isEnd" @search="search">
      <myCard :item="item" v-for="(item,index) in list" :key="index">
        ---
      </myCard>
    </myPage>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
          name: '栏目A',
        }, {
          name: '栏目B',
        }, {
          name: '栏目C',
        }],
        current: 0,

        list: undefined,
        total: undefined,
        isEnd: undefined,
        queryParams: {
          searchValue: '',
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 'updateTime', //更新时间倒序
          isAsc: 'desc',
        },
      };
    },
    onPageScroll(res) {
      //传值到子组件 myPage
      uni.$emit('onPageScroll', res.scrollTop);
    },
    onLoad(options) {
      this.init(options);
    },
    onReachBottom() {
      this.getList(true);
    },
    methods: {
      init(options) {
        this.$log('options', options)
        this.current = parseInt(options.tab) || 0; //记得转换为整数
        this.tabChange(this.current);
      },
      //获取列表
      async getList(nextPage) {
        if (nextPage) {
          if (this.isEnd) return; //到底则不加载
          this.queryParams.pageNum++; //+1页
        } else {
          this.queryParams.pageNum = 1;
        }
        let res = await this.$u.api.listxxx(this.queryParams);
        this.list = nextPage ? [...this.list, ...res.rows] : res.rows;
        this.total = res.total;
        this.isEnd = res.isEnd;
        if (!nextPage) {
          //第一页则滑到最顶部
          this.$scrollTo();
        }
      },
      tabChange(e) {
        this.current = e;
        switch (e) {
            //待发货
          case 0:
            this.queryParams.isPay = '1'; //已支付
            break;
            //已发货
          case 1:
            this.queryParams.isPay = '1'; //已支付
            break;
            //待付款
          case 2:
            this.queryParams.isPay = '0'; //已支付
            break;
            //已完成
        }
        this.getList();
      },
      search(e) {
        this.queryParams.searchValue = e;
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>