<template>
  <view>
    <view class="fixed left-0 right-0  w-full z-50">
      <u-tabs active-color="#378264" :is-scroll="false" height="80" bar-width="110" bar-height="8" :list="tabsList"
        :current="tabsCurrent" @change="tabChange"></u-tabs>
    </view>
    <mescroll-body top="90" :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
      @up="upCallback" :down="downOption" :up="upOption">
      <view v-for="(item,index) in dataList" :key="index"
        class="w-710rpx  bg-white rounded-xs m-auto mt-base px-base pb-base">
        <view class="py-base border-b text-txBase text-lg border-txBorder">订单编号：{{item.order_sn}}</view>
        <view class="flex  mt-46rpx ">
          <u-image border-radius="10" width="190rpx" height="190rpx" :src="item.product.cover" :lazy-load="true">
          </u-image>
          <view class="ml-10rpx flex-1 ">
            <view class="text-txBase text-lg two-ellipsis h-80rpx">{{item.product.name}}</view>
            <view class="flex justify-end">
              <view @tap="$u.route('/pageA/after_sales_detail/index',{id:item.id})"
                class="  mt-30rpx w-180rpx h-66rpx bg-primary text-center leading-66rpx rounded-lg text-white text-lg">
                查看
              </view>
            </view>
          </view>
        </view>
        <view v-if="item.remarks" class="mt-55rpx p-base bg-hex-F2F0F0 min-h-108rpx rounded-xs text-md text-txGray">
          {{item.remarks}}
        </view>
      </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 {
        tabsList: [{
          name: '处理中',
          doing: true
        }, {
          name: '申请记录',
          doing: ''
        }],
        tabsCurrent: 0,
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    computed: {
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    onLoad() {
      uni.$on('refresh', () => {
        this.downCallback()
      })
    },
    methods: {
      tabChange(index) {
        this.tabsCurrent = index;
        this.downCallback()
      },
      downCallback() {
        this.dataList = []
        this.mescroll.resetUpScroll();
      },
      async upCallback(page) {
        this.loadData(page);
      },
      loadData(page) {
        let obj = {
          page: page.num,
          per_page: page.size,
          doing: this.tabsList[this.tabsCurrent].doing,
        }
        this.$api.get(`/v1/after-sales`, {
          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" scoped>

</style>
