<template>
  <view>
    <view class="return-list pad30" v-if="orderList.length">
      <view
        class="goodWrapper borRadius14"
        v-for="(item, index) in orderList"
        :key="index"
        @click="goOrderDetails(item.orderId)"
      >
        <view
          class="iconfont icon-tuikuanzhong powder"
          v-if="item.refundStatus == 1 || item.refundStatus == 3"
        ></view>
        <view
          class="iconfont icon-yituikuan"
          v-if="item.refundStatus == 2"
        ></view>
        <view class="orderNum">订单号：{{ item.orderId }}</view>
        <view
          class="item acea-row row-between-wrapper"
          v-for="(items, idx) in item.orderInfoList"
          :key="idx"
        >
          <view class="pictrue">
            <image :src="items.image"></image>
          </view>
          <view class="text">
            <view class="acea-row row-between-wrapper">
              <view class="name line1">{{ items.storeName }}</view>
              <view class="num">x {{ items.cartNum }}</view>
            </view>
            <view class="attr line1" v-if="items.suk">{{ items.suk }}</view>
            <view class="attr line1" v-else>{{ items.storeName }}</view>
            <view class="last-row" v-if="mallType === 0">
              <view class="mony">￥{{ items.price }}</view>
              <view class="status-msg">{{ item.orderStatus }}</view>
            </view>
          </view>
        </view>
        <view class="totalSum">
          共{{ item.totalNum || 0 }}件商品，总金额
          <text class="font-color price" v-if="mallType === 0">￥{{ item.payPrice }}</text>
          <text class="font-color price" v-else>{{ item.useIntegral }}贝币</text>
        </view>
      </view>
    </view>
    <view
      class="loadingicon acea-row row-center-wrapper"
      v-if="orderList.length"
    >
      <text
        class="loading iconfont icon-jiazai"
        :hidden="loading == false"
      ></text
      >{{ loadTitle }}
    </view>
    <view v-if="orderList.length == 0">
      <emptyPage title="暂无订单~"></emptyPage>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import emptyPage from "@/components/emptyPage.vue";
import { getOrderList } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { useAppStore } from "@/stores/app";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

const appStore = useAppStore();
const loading = ref(false);
const loadend = ref(false);
const loadTitle = ref("加载更多");
const orderList = ref([]);
const orderStatus = ref(-3);
const page = ref(1);
const limit = ref(20);
const isShowAuth = ref(false);
const mallType = ref(0)

watch(() => appStore.isLogin, (newV) => {
  if (newV) {
    console.log('watch')
    getOrderListFn();
  }
});

onLoad((options) => {
  if (appStore.isLogin) {
    mallType.value = options.mallType ? options.mallType : 0;
    getOrderListFn();
  } else {
    toLogin();
  }
});

onReachBottom(() => {
  getOrderListFn();
});

function onLoadFun() {
  getOrderListFn();
}

// 授权关闭
function authColse(e) {
  isShowAuth.value = e;
}

/**
 * 去订单详情
 */
function goOrderDetails(order_id) {
  if (!order_id) return uni.$u.toast("缺少订单号无法查看订单详情");
  uni.navigateTo({
    url: "/pages/order_details/index?order_id=" + order_id + "&isReturen=1",
  });
}

/**
 * 获取订单列表
 */
function getOrderListFn() {
  if (loadend.value) return;
  if (loading.value) return;
  loading.value = true;
  loadTitle.value = "";
  getOrderList({
    mallType: mallType.value, // 只有水贝商城有退货订单
    type: orderStatus.value,
    page: page.value,
    limit: limit.value,
  })
    .then((res) => {
      let list = res.data.list || [];
      let isLoadend = list.length < limit.value;
      orderList.value = uni.$u.deepMerge(orderList.value, list);
      loadend.value = isLoadend;
      loading.value = false;
      loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
      page.value = page.value + 1;
    })
    .catch(() => {
      loading.value = false;
      loadTitle.value = "加载更多";
    });
}
</script>

<style scoped lang="scss">
.return-list {
  .goodWrapper {
    background-color: #fff;
    margin-top: 20rpx;
    position: relative;
    padding: 0rpx 24rpx;

    .orderNum {
      border-bottom: 1px solid #eee;
      height: 87rpx;
      line-height: 87rpx;
      font-size: 30rpx;
      color: #333333;
    }

    .item {
      border-bottom: 0;
      .last-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .status-msg {
          font-size: 26rpx;
          color: #999;
        }
      }
    }

    .totalSum {
      padding: 0 30rpx 32rpx 30rpx;
      text-align: right;
      font-size: 26rpx;
      color: #282828;
      border-bottom: 1px solid #eee;

      .price {
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .iconfont {
      position: absolute;
      font-size: 109rpx;
      top: 7rpx;
      right: 22rpx;
      color: #ccc;

      &.powder {
        color: #f8c1bd;
      }
    }
  }
}
</style>
