<template>
  <view class="container">
    <uv-sticky bgColor="#f7f7f7">
      <uv-tabs
        :list="orderType"
        :lineColor="`url(${ $handleImageUrl('/order/tabs_line.png') }) 100% 100%`"
        lineWidth="64rpx"
        lineHeight="10rpx"
        activeStyle="color: #ff0000;font-weight: 700;"
        inactiveStyle="color: #1a1a1a;font-weight: 400;"
        customStyle="padding-bottom: 20rpx;"
        @change="clickBtn"
      ></uv-tabs>
    </uv-sticky>
    <!--订单列表-->
    <view class="order-list">
      <mallOrderItem
        v-for="item in orderList"
        :key="item.orderId"
        :orderData="item"
        @click="goInfo"
      >
      </mallOrderItem>
    </view>
    <noData
      v-if="orderList.length == 0"
      :config="{ top: 20, content: '暂无数据~' }"
    ></noData>
    <loadMore v-if="orderList.length > 0" :status="status"></loadMore>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import {
  onLoad,
  onShow,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";
import {
  shoporderBusinessPage_Api,
  saleRightsOrderBusinessPage_Api,
} from "@/api/order";

const orderType = ref([
  { name: "待发货" },
  { name: "待收货" },
  { name: "待评价" },
  { name: "已完成" },
  { name: "退款/售后" },
]);

const orderList = ref([]);
const status = ref("more");
const isChange = ref(0);
const currentKey = ref(null);

const parmas = reactive({
  pageNum: 1,
  pageSize: 10,
});

// 获取订单列表数据
const getOrderList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  let objs = { ...parmas };
  switch (isChange.value) {
    case 0:
      objs.transactionStatus = 10;
      break;
    case 1:
      objs.transactionStatus = 20;
      break;
    case 2:
      objs.transactionStatus = 30;
      objs.commentStatus = 0;
      break;
    case 3:
      objs.transactionStatus = 30;
      break;
    default:
      break;
  }
  //   console.log(objs);
  let url = isChange.value == 4 ? saleRightsOrderBusinessPage_Api : shoporderBusinessPage_Api;
  url(objs).then((res) => {
    uni.hideLoading();
    if (res && res.code == 200) {
      uni.stopPullDownRefresh();
      if (parmas.pageNum == 1) {
        orderList.value = [];
      }
      orderList.value = orderList.value.concat(res.rows);
      if (res.total <= orderList.value.length) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

// tab切换
const clickBtn = (e) => {
  console.log(e);
  let index = e.index;
  isChange.value = index;
  if (index == 2 || index == 3 || index == 4) {
    let key = 1;
    if (index == 2) {
      key = 1;
    } else if (index == 3) {
      key = 3;
    } else if (index == 4) {
      key = 5;
    }
    currentKey.value = key;
  }
  status.value = "loading";
  parmas.pageNum = 1;
  getOrderList();
};

// 重置列表请求
const handleReset = () => {
  status.value = "loading";
  parmas.pageNum = 1;
  getOrderList();
};

// // 查看详情
// const goInfo = (item) => {
//   let url = `/pages/order/orderDetails?orderId=${item.orderId}`;
//   if (isChange.value == 5) {
//     url = `/pages/order/orderblackDetails?id=${item.id}`;
//   }
//   uni.navigateTo({
//     url,
//     events: {
//       handleReset: handleReset,
//     },
//   });
// };

onLoad((options) => {
  console.log(options);
  getOrderList();
});

onShow(() => {});

onReachBottom(() => {
  if (status.value == "noMore") return;
  status.value = "loading";
  parmas.pageNum++;
  getOrderList();
});

onPullDownRefresh(() => {
  handleReset();
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  .btn-item,
  .btn-item1 {
    width: 170rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
    font-weight: 700;
  }
  .btn-item {
    border: 1rpx solid #cccccc;
    color: #808080;
  }
  .btn-item1 {
    border: 1rpx solid #e93534;
    color: #e93534;
    margin-left: 20rpx;
  }
}
</style>
