<template>
	<view class="table-scroll">
		<table cellspacing="0">
			<thead>
				<tr style="background-color: #aebad2;color: #fff;" height='80'>
					<th>排名</th>
					<th>商品名称</th>
					<th>数量</th>
					<th>金额</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in tableList" :key="item.productId">
					<td>{{item.productId}}</td>
					<td>{{item.productName}}</td>
					<td>{{item.productNum}}</td>
					<td>{{item.amount}}</td>
				</tr>
			</tbody>
		</table>
	</view>
</template>

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

	}
</script>

<style>
	.table-scroll {
		overflow-x: scroll;
		white-space: nowrap;
		margin: 0 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;

	}

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

	.table-scroll th,
	td {
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 250rpx;
		border: 2rpx solid #7E9BD4;
	}
</style>