<template>
  <view class="time-wrapper">
    <view v-for="(v, i) in timeList" :key="i" class="timelistbox">
      <view
        class="time-item"
        @tap="changeTime(v.value)"
        :class="[v.value == selected ? 'time-selected' : '']"
      >
        {{ v.label }}
      </view>
      <view class="xian" v-if="v.value == selected"> </view>
    </view>
  </view>

  <view class="table-scroll">
    <view class="color-333 u-font-28 bg-gray">
      <scroll-view :scroll-x="true" class="bg-fff table u-text-center">
        <view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
          <view class="constantbox">
            <view class="constantboxitem">
              <view class="head">区域名称</view>
              <view class="head">台桌号</view>
              <view class="head">订单数量</view>
              <view class="head">订单金额</view>
            </view>
            <view
              class="constantboxitem"
              v-for="(item, index) in tableList"
              :key="index"
              @click="toDetail(item)"
            >
              <view class="head" style="padding-left: 16rpx">
                <image
                  v-if="index == 0"
                  src="../pageTable/index/images/1.png"
                  style="width: 22rpx; height: 30rpx"
                  mode=""
                ></image>
                <image
                  v-else-if="index == 1"
                  src="../pageTable/index/images/2.png"
                  style="width: 22rpx; height: 30rpx"
                  mode=""
                ></image>
                <image
                  v-else-if="index == 2"
                  src="../pageTable/index/images/3.png"
                  style="width: 22rpx; height: 30rpx"
                  mode=""
                ></image>
                &nbsp;&nbsp;{{ item.areaName }}
              </view>
              <view class="head">{{ item.tableName || "" }}</view>
              <view class="head">{{ item.orderCount || 0 }}</view>
              <view class="head">{{ item.orderAmount || 0 }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

  <view style="height: 80rpx;"></view>
  <!-- <view class="bottombtn" @tap="toUrl">
    更多 <uni-icons type="right" size="16"></uni-icons>
  </view> -->
  <datePickerview
    @confirm="datePickerConfirm"
    ref="datePicker"
  ></datePickerview>
</template>

<script setup>
import { onMounted, ref } from "vue";
import datePickerview from "./components/my-date-pickerview.vue";
import dayjs from "dayjs"; //时间格式库
import go from "@/commons/utils/go.js";
import { getTrade, productSaleDate } from "@/http/api/summary.js";
import { timeList } from "@/data/index.js";
import { tableSummaryList } from "@/http/api/order/summary.js";

const datePicker = ref();

let selected = ref("today");
let list = ref({});
let tableList = ref([]);
let day = ref(1);
onMounted(() => {
  gettableData();
});



/**
 * 获取销售数据
 */
function gettableData(start, end) {
    let beginDate, endDate;
  if (selected.value == "custom") {
    beginDate = start.substring(0, start.indexOf(" "));
    endDate = end.substring(0, end.indexOf(" "));
  } else {
    beginDate = timeList.find((item) => item.value == selected.value).beginDate;
    endDate = timeList.find((item) => item.value == selected.value).endDate;
  }
  tableSummaryList({
    beginDate: beginDate,
    endDate: endDate,
    rangeType: selected.value,
  }).then((res) => {
    tableList.value = res || [];
  });
}

/**
 * 获取当前时间
 */
function getdate() {
  const dt = new Date();
  const y = dt.getFullYear();
  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
  const d = (dt.getDate() + "").padStart(2, "0");
  const hh = (dt.getHours() + "").padStart(2, "0");
  const mm = (dt.getMinutes() + "").padStart(2, "0");
  const ss = (dt.getSeconds() + "").padStart(2, "0");
  return `${y}-${m}-${d}`;
}



/**
 * 时间切换
 * @param {Object} e
 */
function changeTime(e) {
  selected.value = e;
  if (e == "custom") {
    datePicker.value.toggle();
  } else {
    gettableData();
  }
}

/**
 * 自定义确认
 * @param {Object} e
 */
function datePickerConfirm(e) {
  console.log(e);
  gettableData(e.start, e.end);
}

/**
 * 更多
 */
function toUrl() {
  go.to("PAGES_PRODUCT_SALES_RANKING", {
    day: day.value,
  });
}
</script>
<style>
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.fixed-top {
  padding: 32rpx 28rpx;
  z-index: 100;
}

.bottom {
  background-color: transparent;
  bottom: 84rpx;
  left: 28rpx;
  right: 28rpx;
}

.table {
  border-radius: 12rpx 12rpx 0rpx 0rpx;
  overflow: hidden;
  font-size: 24rpx;

  .constantbox {
    .constantboxitem {
      display: flex;

      .head {
        width: 220rpx;
        padding: 32rpx 24rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }

      .head:nth-child(4) {
        width: 300rpx;
      }

      .head:nth-child(5) {
        width: 300rpx;
      }
    }

    .constantboxitem:nth-child(even) {
      background: #fff;
    }

    .constantboxitem:nth-child(odd) {
      background: #f7f6fb;
    }

    .constantboxitem:nth-child(1) {
      background: #aebad2;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .item:nth-of-type(2n + 1) {
    background-color: rgb(249, 249, 249);
  }
}
</style>

<style scoped lang="less">
.time-wrapper {
  display: flex;
  justify-content: space-around;
  padding-bottom: 16rpx;
  padding-top: 16rpx;
  background-color: #fff;

  .timelistbox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .time-item {
      font-size: 28rpx;
      text-align: center;
      padding-bottom: 10rpx;
    }

    .xian {
      width: 40rpx;
      height: 3rpx;
      background-color: #318afe;
      // position: absolute;
      // left: 16rpx;
      // bottom: 0;
    }
  }

  .time-selected {
    color: #318afe;
    font-size: 32rpx !important;
  }
}

.pageSalesSummaryContent {
  height: 320rpx;
  margin: 20rpx 28rpx;
  background-image: url("./svg/bgimg.svg");
  background-size: 694rpx 320rpx;
  padding: 48rpx 28rpx;
  .df;
  justify-content: space-between;
  flex-wrap: wrap;

  > view {
    padding-right: 52rpx;
    color: #fff;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
  }
}

// 表格
.table-scroll {
  // width: calc(100% - 5px);
  overflow-x: scroll;
  white-space: nowrap;
  margin: 32rpx 28rpx;
  margin-right: 30rpx;
  border-radius: 30rpx 30rpx 0 0;
}

.table-scroll .table {
  table-layout: fixed;
  // width: calc(100% - 10rpx);
}

.table-scroll .thead {
  display: table-row;
  background-color: bisque;
  font-size: 24rpx;
}

.table-scroll .tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  // width: 1040rpx;
  width: 100%;
  // width: calc(100% );
}

// .table-scroll th,
// td {
// 	height: 82rpx;
// 	overflow: hidden;
// 	text-overflow: ellipsis;
// 	width: 250rpx;
// 	// border: 0.7rpx solid red;
// 	border: 0.7rpx solid rgba(126, 155, 212, 0.27);
// }

.bottombtn {
  width: 694rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  margin: 0rpx auto;
  background: #f1f1f1;
  font-size: 24rpx;
  border-radius: 0rpx 0rpx 28rpx 28rpx;
}

.df() {
  display: flex;
  align-items: center;
}
</style>
<style>
.min-page {
  height: 20vh;
}
</style>
