<template>
  <view class="color-333 u-font-28 bg-gray default-box-padding">
    <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>
          <view
            class="constantboxitem"
            v-for="(item, index) in tableList"
            :key="index"
            @click="toDetail(item)"
          >
            <view class="head">{{ item.productName }}</view>
			<view class="head">{{ item.saleCount || 0 }}</view>
			<view class="head">{{ item.saleAmount || 0 }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { onMounted, reactive, ref } from "vue";
import { saleSummaryPage } from "@/http/api/order/summary.js";

let tableList = ref([]);
let props = defineProps({
  day: {
    type: Number,
  },
});
const options = reactive({
  beginDate: "",
  endDate: "",
  rangeType: "",
});
onLoad((opt) => {
	console.log(opt);
  Object.assign(options, opt);
  gettableData();
});

/**
 * 获取销售数据
 */
function gettableData() {
  saleSummaryPage(options).then((res) => {
    tableList.value = res || [];
  });
}
</script>

<style>
.table-scroll {
  overflow-x: scroll;
  white-space: nowrap;
  margin: 32rpx 28rpx;
  margin-right: 30rpx;
  border-radius: 30rpx 30rpx 0 0;
}

.table-scroll table {
  table-layout: fixed;
}

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

.table-scroll tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  width: 100%;
}

.table-scroll th,
td {
  height: 82rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 250rpx;
  border: 0.7rpx solid rgba(126, 155, 212, 0.27);
}
</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>
