<template>
  
  <view class="module-placeholder" />
  <view class="label-box" @click.stop="handleCalendar()">
    <text class="iconfont label-icon">&#xe808;</text>
    <text class="label-name one-row" v-if="startTime || endTime"
      >{{ startTime }} - {{ endTime }}</text
    >
    <text class="iconfont label-next">&#xe671;</text>
  </view>
  <view class="module-placeholder" />
  <DealData
    :Vo="StatisticsVo"
    :businessId="$Props.businessId || businessId"
    @exportExcel="exportExcel"
  />
  <view class="module-placeholder" />
  <template v-for="item in StatisticsList">
    <statistics :Vo="item" />
    <view class="module-placeholder" />
  </template>
  <uni-calendar
    ref="CalendarRef"
    range
    :insert="false"
    @confirm="ConfirmCalendar"
  />

  <!-- <uv-calendar ref="CalendarRef" mode="range" allowSameDay :maxDate="getTimeVal()" @confirm="ConfirmCalendar" /> -->
  <template v-if="LoadStatus">
    <uv-load-more :status="LoadStatus" line />
  </template>


</template>

<script lang="ts" setup>
import { ref, unref, watch } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import DealData from "./DealData.vue";
import statistics from "./Statistics.vue";
import { getTimeVal } from "@/util/tools.ts";
import { fileDownload } from "@/util/fileDownload";

import {
  getStatisticsApi,
  getStatisticsPageApi,
  getPartnerPageApi,
} from "@/api/ShopContent";
const $Props = defineProps({
  businessId: {
    type: Number,
    default: null,
  },
  businessType: {
    type: Number,
    default: null,
  },
});
const businessId = ref(null);
//
const startTime = ref(getTimeVal({ format: "YYYYMMDD" })); // 开始时间
const endTime = ref(getTimeVal({ format: "YYYYMMDD" })); // 结束时间
const CalendarRef = ref();
const handleCalendar = () => {
  CalendarRef.value?.open();
};
const ConfirmCalendar = (e) => {
  console.log("ConfirmCalendar = ", e);
  const { data } = e.range;
  let list = [...data];
  if (data.length == 1) {
    list = [data[0], data[0]];
  }
  if (list && list.length >= 2) {
    startTime.value = list[0] || getTimeVal({ format: "YYYYMMDD" });
    endTime.value = list[list.length - 1] || getTimeVal({ format: "YYYYMMDD" });
    initData();
  }
};

const StatisticsVo = ref({});
const getStatistics = async () => {
  try {
    const Parmas = {
      businessId: unref(businessId)
        ? unref(businessId)
        : unref($Props.businessId),
      startTime: unref(startTime),
      endTime: unref(endTime),
      type: "all",
    };
    const { data } = await getStatisticsApi(Parmas);
    StatisticsVo.value = data || {};
  } catch (error) {
    //TODO handle the exception
  }
};

const StatisticsList = ref([]); // 单日统计数据
const Pages = ref({
  pageSize: 10,
  pageNum: 0,
});
const LoadStatus = ref<"loadmore" | "loading" | "nomore">(""); // 加载状态
const getStatisticsPage = async () => {
  if (LoadStatus.value === "loading") return;
  try {
    Pages.value.pageNum += 1;
    LoadStatus.value = "loading";
    const Parmas = {
      ...unref(Pages),
      businessId: unref(businessId)
        ? unref(businessId)
        : unref($Props.businessId),
      startTime: unref(startTime),
      endTime: unref(endTime),
    };
    const { rows, total } = await getStatisticsPageApi(Parmas);
    StatisticsList.value = StatisticsList.value.concat(rows || []);
    // console.log('unref(StatisticsList).length = ', unref(StatisticsList).length)
    if (unref(StatisticsList).length < total) {
      LoadStatus.value = "loadmore";
    } else {
      LoadStatus.value = "nomore";
    }
  } catch (error) {
    //TODO handle the exception
  }
};


// 导出Excel数据
const exportExcel = (businessId) => {
  fileDownload(
    `/businessDayBill/businessDayBill/export?businessId=${businessId}&startTime=${
      startTime.value || ""
    }&endTime=${endTime.value || ""}`,
    "经营数据_" + new Date().getTime() + ".xlsx"
  );
};


onReachBottom(() => {
  if (LoadStatus.value === "loadmore") getStatisticsPage();
  // console.log("----------------");
});

const initData = () => {
  if (!$Props.businessId) return;
  Pages.value.pageNum = 0;
  StatisticsList.value = [];
  getStatistics();
  getStatisticsPage();
};


watch(
  () => $Props.businessId,
  () => {
    initData();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
$pad_lr: 30rpx;

.module-placeholder {
  width: 100%;
  height: 20rpx;
}

.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  box-sizing: border-box;

  .label-icon {
    font-size: 38rpx;
    color: #eb5153;
  }

  .label-name {
    flex: 1;
    padding: 0 12rpx;
    color: #1a1a1a;
  }

  .label-text {
    color: #666666;
    padding-right: 10rpx;
  }

  .label-next {
    color: #000000;
  }
}

</style>
