<template>
	<!-- <view class="table-scroll">
		<table cellspacing="0">
			<thead>
				<tr style="background-color: #aebad2;color: #fff;" height='41'>
					<th>商品名称</th>
					<th>数量</th>
					<th>金额</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in tableList" :key="item.productId">
					<td style="padding-left: 16rpx;">{{item.productName}}</td>
					<td style="padding-left: 16rpx;">{{item.num}}</td>
					<td style="padding-left: 16rpx;">{{item.salesAmount}}</td>
				</tr>
			</tbody>
		</table>
	</view> -->
	<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.num}}</view>
							<view class="head">{{item.salesAmount || '无'}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view style="height: 100px;"></view> -->
		</view>
	</template>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		summaryTrade,
		dateProduct
	} from '@/http/yskApi/requestAll.js';
	let tableList = ref([])
	let props = defineProps({
		day: {
			type: Number
		}
	})
	onMounted(() => {
		gettableData()
	})
	// 获取表格数据
	function gettableData() {
		dateProduct({
			shopId: uni.getStorageSync('shopId'),
			day: props.day,
			page: 0,
			size: 50
		}).then((res) => {
			tableList.value = res.productList.content
		})

	}
</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>
