<template>
  <view class="app-container">
    <uv-sticky customNavHeight="0">
      <view class="head">
        <view class="search-bar">
          <uv-search
            placeholder="可输入订单号搜索"
            v-model="orderNo"
            :showAction="false"
            bgColor="#ffffff"
            height="80rpx"
            placeholderColor="#b3b3b3"
            @search="handleReset"
            @blur="handleReset"
          >
            <template v-slot:prefix>
              <image
                class="search-icon"
                :src="$handleImageUrl('/order/icon_search.png')"
                alt=""
              />
            </template>
          </uv-search>
        </view>
        <view class="tab-bar">
          <uv-tabs
            :list="tabList"
            :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;"
            @change="tabChange"
          ></uv-tabs>
        </view>
      </view>
    </uv-sticky>
    <view class="order-list">
      <view
        class="list-item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="goDetails(item)"
      >
        <view class="item-title u-flex-center-sb">
          <view class="item-shop u-flex-center" v-if="pageType == '1'">
            <image
              class="shop-icon"
              :src="$handleImageUrl('/order/icon_shop.png')"
              alt=""
            />
            <view class="shop-name">{{ item.businessName }}</view>
          </view>
          <view class="item-shop u-flex-center" v-if="pageType == '2'">
            <view class="shop-name">订单号：{{ item.orderNo }}</view>
          </view>
          <view class="item-status">
            <text v-if="item.orderStatus == 0" style="color: #ff0000"
              >待付款</text
            >
            <text v-else-if="item.orderStatus == 10">已付款</text>
            <text v-else-if="item.orderStatus == 70">退款中</text>
            <text v-else-if="item.orderStatus == 80">已退款</text>
            <text v-else-if="item.orderStatus == 100">已取消</text>
          </view>
        </view>
        <view class="item-content">
          <view class="item-view u-flex-center-sb" v-if="pageType == '1'">
            <text class="item-label">订单号：</text>
            <text class="item-value">{{ item.orderNo || "--" }}</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">金额：</text>
            <text class="item-num">￥{{ item.payAmount || 0 }}</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">支付方式：</text>
            <text class="item-value" v-if="item.payType == 0">微信</text>
            <text class="item-value" v-else-if="item.payType == 1">支付宝</text>
            <text class="item-value" v-else-if="item.payType == 10"
              >微信</text
            >
            <text class="item-value" v-else-if="item.payType == 11"
              >支付宝</text
            >
            <text class="item-value" v-else>--</text>
          </view>
          <view class="item-view u-flex-center-sb">
            <text class="item-label">下单时间：</text>
            <text class="item-value">{{ item.createTime || "--" }}</text>
          </view>
          <view class="item-view u-flex-center-sb" v-if="item.orderStatus == 0">
            <text class="item-label">待付款：</text>
            <view class="item-value">
              <uv-count-down
                :time="handleTime(item.expireTime)"
                format="mm:ss"
              ></uv-count-down>
            </view>
          </view>
          <view
            class="item-view u-flex-center-sb"
            v-if="item.orderStatus != 0 && item.orderStatus != 100"
          >
            <text class="item-label">支付时间：</text>
            <text class="item-value">{{ item.payTime || "--" }}</text>
          </view>

          <template v-if="pageType == '2'">
            <view class="item-view u-flex-center-sb">
              <text class="item-label">下单用户：</text>
              <text class="item-value"
                >{{ item.userName }}（{{ item.userMobile }}）</text
              >
            </view>
            <view
              class="item-view u-flex-center-sb"
              v-if="item.orderStatus != 0 && item.orderStatus != 100"
            >
              <text class="item-label">让利金额：</text>
              <text class="item-value"
                >￥{{ item.businessShouldSubsidy || 0 }}</text
              >
            </view>
          </template>
          <template v-if="item.orderStatus == 80">
            <view class="item-view u-flex-center-sb">
              <text class="item-label">退款时间：</text>
              <text class="item-value">{{
                item.refundTime || '--'
              }}</text>
            </view>
          </template>
        </view>
      </view>

      <noData
        v-if="dataList.length == 0"
        :config="{ top: 5, content: '暂无数据~' }"
      ></noData>
      <loadMore v-if="dataList.length > 0" :status="status"></loadMore>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import {
  onlineorderPage_Api,
  onlineorderBusinessPage_Api,
} from "@/api/order.js";

const pageType = ref("1"); // 1：用户查看在线订单页面，2：商户查看在线订单页面
const orderNo = ref("");
const tabList = ref([
  { name: "全部" },
  { name: "待付款" },
  { name: "已付款" },
  { name: "退款中" },
  { name: "已退款" },
  { name: "已取消" },
]);

const dataList = ref([]);
const status = ref("more");
const isChange = ref(0);

const parmas = reactive({
  pageNum: 1,
  pageSize: 10,
});
// tab切换
const tabChange = (e) => {
  // console.log(e);
  isChange.value = e.index;
  handleReset();
};
// 请求列表数据
const getList = async () => {
  uni.showLoading({ title: "加载中...", mask: true });
  let objs = { ...parmas, orderNo: orderNo.value };
  // orderStatus 0:全部 1:待付款 2:已付款 3:退款中 4:已退款 5:已取消
  switch (isChange.value) {
    case 0:
      break;
    case 1:
      objs.orderStatus = 0;
      break;
    case 2:
      objs.orderStatus = 10;
      break;
    case 3:
      objs.orderStatus = 70;
      break;
    case 4:
      objs.orderStatus = 80;
      break;
    case 5:
      objs.orderStatus = 100;
      break;
    default:
      break;
  }

  let url =
    pageType.value == 1 ? onlineorderPage_Api : onlineorderBusinessPage_Api;
  await url(objs)
    .then((res) => {
      if (res && res.code == 200) {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        if (parmas.pageNum == 1) {
          dataList.value = res.rows;
        } else {
          dataList.value = dataList.value.concat(res.rows);
        }
        if (res.total <= dataList.value.length) {
          status.value = "noMore";
        } else {
          status.value = "more";
        }
      }
    })
    .catch((err) => {
      console.log(err);
      // uni.hideLoading();
    });
};

// 重置
const handleReset = () => {
  status.value = "loading";
  parmas.pageNum = 1;
  dataList.value = [];
  getList();
};

const handleTime = (time = "") => {
  if (!time) return 0;
  let endTime = new Date(time).getTime();
  let startTime = new Date().getTime();
  let num = endTime - startTime;
  return num > 0 ? num : 0;
};

// 跳转详情
const goDetails = (item) => {
  // console.log(item);
  uni.navigateTo({
    url: `/pages/order/onlineOrder/details?id=${item.orderId}&pageType=${pageType.value}`,
  });
};

onLoad((options) => {
  if (options.pageType) pageType.value = options.pageType;
  getList();
});

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

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

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background-color: #f7f7f7;
  box-sizing: border-box;
  padding-bottom: 30rpx;
  .head {
    background-color: #f7f7f7;
    padding: 30rpx;
    .search-bar {
      padding-bottom: 15rpx;
      .search-icon {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }

  .order-list {
    .list-item {
      background-color: #ffffff;
      border-radius: 24rpx;
      padding: 20rpx 0;
      margin-bottom: 30rpx;
      .item-title {
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        .item-shop {
          font-size: 32rpx;
          font-weight: 700;
          color: #1a1a1a;
          flex: 1;
          margin-right: 1;
          .shop-icon {
            width: 36rpx;
            height: 34rpx;
            margin-right: 10rpx;
          }
          .shop-name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
        .item-status {
          font-size: 26rpx;
        }
      }

      .item-content {
        padding-top: 10rpx;
        .item-view {
          padding: 20rpx 30rpx;
          font-size: 28rpx;
          text-align: right;
          .item-label {
            flex-shrink: 0;
          }
          .item-value {
            color: #808080;
            &:deep(.uv-count-down__text) {
              color: #808080;
              font-size: 28rpx;
            }
          }
          .item-num {
            color: #da4f4f;
          }
        }
      }
    }
  }
}
</style>
