<template>
  <view>
    <cu-navbar class="cu-navbar" :background="{ background: '#f5f5f5' }" :border-bottom="false">
      <view slot="right" class="flex items-center">
         <!-- #ifndef  MP-WEIXIN -->
        <view class="px-18rpx relative" @tap="$u.route(`/pages/web_view/index?url=${service}`)">
            <u-icon name="kefu-ermai" color="#000" size="48" ></u-icon>
        </view>
         <!-- #endif -->
        <!-- #ifdef  MP-WEIXIN -->
        <button class="px-18rpx relative cu-btn" open-type="contact" hover-class="none">
            <u-icon name="kefu-ermai" color="#000" size="48" ></u-icon>
        </button>
          <!-- #endif -->
      </view>
      <view class="w-full">
        <u-search @change="Change" @search='Search' border-color="#A6A6A6" placeholder="商品名称" v-model="searchText"
          :show-action="false"></u-search>
      </view>
    </cu-navbar>
    <view class="fixed top-0 w-full z-50">
      <view class="w-full" :style="[{ height: StatusBar + 44 + 'px' }]"></view>
      <u-tabs bgColor="#f5f5f5" active-color="#378264" inactive-color="#808080" bar-width="85" height="80"
        bar-height="8" :list="order" :is-scroll="false" :current="active" @change="tabChange"></u-tabs>
    </view>
    <mescroll-body top="90" :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
      @up="upCallback" :down="downOption" :up="upOption">
      <view class="pt-base">
        <block v-for="(item,index) in dataList" :key="index">
          <view class="mb-24rpx">
            <order-item @Parent=Parent :item="item"  />
          </view>
        </block>
      </view>
    </mescroll-body>
  </view>
</template>
<script>
  import OrderItem from './conponents/order-item.vue';
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin],
    components: {
      OrderItem,
    },
    data() {
      return {
        // service:process.env.VUE_APP_SERVICE,
        active: 0,
        order: [{
            name: '全部',
            key: '',
          },
          {
            name: '待付款',
            key: 'pending',
          },
          {
            name: '待收货',
            key: 'unreceived',
          },
          {
            name: '已完成',
            key: 'completed',
          }, {
            name: '已取消',
            key: 'cancelled',
          }
        ],
        searchText: '',
        downOption: {
          auto: false,
        },
        upOption: {
          page: {
            size: 20
          },
          noMoreSize: 1
        },
        dataList: [], //获取到的数据
      };
    },
    computed: {
      StatusBar() {
        const {
          statusBarHeight
        } = this.$u.sys();
        return statusBarHeight
      },
      service(){
        // const clien = process.env.VUE_APP_SERVICE
        // const user = this.$store.getters.user ?? {}
        // const phone = user?.phone
        // const name = user?.nickname ?? phone ?? '访客'
        // return `${clien}?u_cust_name=${name}&u_cust_phone=${phone}&u_cust_id=${phone}`
      },
      height() {
        const {
          windowHeight,
          statusBarHeight
        } = this.$u.sys();
        return windowHeight - statusBarHeight - 44 + 'px';
      },
    },
    onLoad({
      type = 0
    }) {
      this.active = type
      // this.tabChange(type);
    },
    methods: {
      tabChange(index) {
        if (index != -1) {
          this.active = 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,
          status: this.order[this.active].key,
          keyword: this.searchText
        }
        this.$api.get(`/v1/order/orders`, {
          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()
        })
      },
      //搜索
      Search() {
        this.downCallback()
      },
      Change(e) {
        if (e == '') {
          this.downCallback()
        }
      },
      //修改状态
      Parent(e) {
        let Index = this.dataList.findIndex(item => {
          return item.id == e
        })
        this.dataList.splice(Index, 1)
      }
    },
  };
</script>
<style lang="scss" scoped>
  .badge {
    @apply bg-badge;
  }
</style>
