<template>
  <view class="container">
    <view class="topview" :style="{ top: tabTop + 'px' }">
      <!--订单类型选择-->
      <scroll-view scroll-x="true" class="scrollbox">
        <view class="order-type u-flex-center">
          <view
            class="type-name u-font26 u-181818"
            :class="{ active: isChange == index }"
            v-for="(item, index) in orderType"
            :key="index"
            @click="clickBtn(index)"
          >
            {{ item }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="plrbottom">
      <!--订单列表-->
      <view class="order-list" v-for="item in RowsList" :key="item.id">
        <view class="u-bg-fff order-item" @click="goGbOrderDetails(item)">
          <view class="u-shop-teile-pd">
            <view class="u-text1 viewWidthTitle">
              <text class="iconfont u-font34 u-bold" style="color: #fa6138"
                >&#xe71b;</text
              >
              <text class="u-1A1A1A u-font30 u-ml15">{{ item.businessName }}</text>
              <text class="u-CCC right-icon iconfont">&#xe671;</text>
            </view>

            <text class="u-FF0000 u-font28" v-if="item.payStatus == 0"
              >待付款</text
            >

            <text
              class="u-FF0000 u-font28"
              v-if="
                item.payStatus == 5 && (item.status == 0 || item.status == 1)
              "
              >待成团</text
            >
            <text
              class="u-FF0000 u-font28"
              v-if="item.payStatus == 5 && item.status == 2"
              >组团成功</text
            >
            <text
              class="u-FF0000 u-font28"
              v-if="item.status == 3 || item.status == 4"
              >组团失败</text
            >
          </view>

          <view class="u-border-one-one"></view>
          <view v-if="RowsList.length > 0">
            <!-- <ldgoods :value="item" :isGroup="true" @click.native="goProductDetails(item)"></ldgoods> -->

            <view class="details-top">
              <view class="details-left">
                <image
                  :src="`${item.productCover}?x-oss-process=style/w_350`"
                  v-if="item.productCover"
                  class="u-goods200 u-ml15"
                  mode=""
                ></image>
                <image
                  :src="`${item.productImg}?x-oss-process=style/w_350`"
                  v-if="item.productImg"
                  class="u-goods200 u-ml15"
                  mode=""
                ></image>
              </view>
              <view class="details-right">
                <view class="right-top">
                  {{ item.productTitle }}
                </view>
                <view class="specifications">
                  规格：{{ item.skuSetName }}
                </view>
                <view class="amount-of-money">
                  <view
                    style="font-size: 26rpx"
                    v-if="item.realPrice % 1 === 0"
                  >
                    ￥{{ item.realPrice }}
                  </view>
                  <view style="font-size: 26rpx" v-else>
                    ￥{{ item.realPrice }}
                  </view>
                  <text class="group">{{ item.memberInfos ? item.memberInfos.length || 0 : 0 }}人拼</text>
                </view>
              </view>
            </view>

            <view class="u-text-right u-plr30 u-mt20">
              <view class="u-flex" style="justify-content: flex-end">
                <view class="u-text-right">
                  共{{ item.number }}件商品, 总金额
                </view>
                <view class="u-FF0000">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.totalAmount)"
                  ></rich-text>
                </view>
                <text v-if="item.totalPoint > 0"
                  >，总积分：{{ item.totalPoint }}</text
                >
              </view>

              <view class="u-mt10">含运费￥{{ item.realFreight || 0 }}</view>
              <view class="u-flex-column-end u-mt30">
                <view class="u-flex">
                  <!--去付款-->
                  <view class="u-flex-center">
                    <view v-if="item.payStatus == 0">
                      <text class="iconfont">&#xe681;</text> 支付剩余（{{
                        item | dateFilter
                      }})
                    </view>
                    <view
                      class="btn-item u-text-center u-FF0000 br-FF0000"
                      v-if="item.payStatus == 0"
                      @click.stop="goGbOrderDetails(item)"
                      >去付款</view
                    >
                    <view
                      class="btn-item u-text-center u-060606 br-999"
                      v-if="item.payStatus != 0"
                      @click.stop="goGbOrderDetails(item)"
                      >查看详情</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <loadMore v-if="RowsList.length > 0" :status="LoadStatus"></loadMore>
      <noData v-else :config="{ top: 15, content: '暂无订单~' }"></noData>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import {
  onLoad,
  onUnload
} from "@dcloudio/uni-app";
import { groupbuyingTeamMy_Api } from "@/api/groupbuy";

import { usePageData } from "@/hooks/usePageData.ts";

const { RowsList, LoadStatus, initData } = usePageData(groupbuyingTeamMy_Api);
const isChange = ref(0);
const timeCount = ref(0);
const timer = ref(null);
const orderType = ref(["全部订单", "待付款", "待成团", "组团成功", "组团失败"]);

const tabTop = ref(0);

// 页面生命周期
onLoad((options) => {

  timer.value = setInterval(() => {
    timeCount.value++;
  }, 1000);

  tabTop.value = uni.getSystemInfoSync().statusBarHeight + 44;

  if (options.keys) {
    // 处理选项
  }
  initData();
});

onUnload(() => {
  //   console.log(66666666);
  clearInterval(timer.value);
});

// 过滤器函数
const dateFilter = (item) => {
  return ''
  // let time = item.pay_expire_time - item.now_millis - timeCount.value * 1000;
  // let str = $mUtil.countDownClock(time);
  // return str;
};



// 方法定义
const goGbOrderDetails = (item) => {
  if (item.payStatus == 0) {
    uni.navigateTo({
      url: `/pages/groupBuying/myGbOrder/details?id=${item.payOrderId}&status=waitpay`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/groupBuying/myGbOrder/details?id=${item.orderId}&groupId=${item.id}&status=pay`,
    });
  }
};

const clickBtn = (index) => {
  isChange.value = index;
  initData({ status: index > 0 ? index : undefined });
};

</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.u-border-one-one {
  border-top: 3rpx solid #e7e7e7;
  margin-bottom: 30rpx;
}

.right-icon {
  font-size: 25rpx;
}

.details-top {
  display: flex;

  .details-right {
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .right-top {
      font-size: 28rpx;
      color: #1a1a1a;
      font-weight: 400;
    }

    .specifications {
      font-size: 22rpx;
      color: #999999;
      font-weight: 400;
      margin-top: 40rpx;
      margin-left: 2rpx;
    }

    .amount-of-money {
      display: flex;
      font-size: 26rpx;
      color: #1a1a1a;
      font-weight: 400;

      .group {
        margin-left: 20rpx;
        color: #999999;
        font-weight: 400;
        font-size: 26rpx;
      }
    }
  }
}

.shop-icon {
  font-size: 40rpx;
  color: #0b844a;
}

.order-list {
  margin-bottom: 30rpx;
}

.order-list .order-item {
  padding-bottom: 20px;
}

.u-shop-teile-pd {
  display: flex;
  justify-content: space-between;
}

.plrbottom {
  padding: 110rpx 30rpx 0;
}

.topview {
  background-color: #f5f5f5;
  height: 110rpx;
  width: 100%;
  position: fixed;
  left: 0;
  box-sizing: border-box;
  padding: 0 30rpx;
  z-index: 66;
}

.scrollbox {
  white-space: nowrap;
}

.pt-pb {
  padding: 30rpx;
}

.pt15-pb24 {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}

.br-FF0000 {
  border: 1px solid #ff0000;
}

.br-999 {
  border: 1px solid #999999;
}

.order-type {
  margin-top: 30rpx;
  margin-bottom: 26rpx;
  display: inline-block;

  .active {
    background: #fa6138;
    color: #ffffff;
  }

  .type-name {
    border-radius: 30px;
    padding: 12rpx 18rpx;
    display: inline-block;
  }
}

.listImg {
  padding: 20rpx 0 0 16rpx;
}

.listimgGroup {
  width: 200rpx;
  height: 200rpx;
  margin: 0 25rpx 25rpx 0;
}

.order-item {
  .btn-type {
    padding-bottom: 25rpx;

    .pay-time {
      line-height: 70rpx;
      margin-left: auto;
    }
  }

  .btn-item {
    width: 200rpx;
    height: 70rpx;
    line-height: 68rpx;
    border-radius: 35px;
    margin-left: 22rpx;
  }
}

.childBox {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}
</style>