<template>
	<div class="tableCom">
		<div class="tableHead">
			<div class="tableHeadItem" v-for="(item,index) in head" :key="index" :style="{flex:item.flex}">{{ item.title }}
			</div>
		</div>
		<Vue3SeamlessScroll :step="0.5" :wheel="true" :hover="true" :list="list" class="tableBody">
			<div class="tableBody2" v-for="(item,index) in list" :key="index">
				<!-- <div class="tableBody2Item" :style="{flex: head[0].flex}">
				  <div class="index1" v-if="index==0">
					<img src="./assets/ranking1.png" alt="">
				  </div>
				  <div class="index1" v-else-if="index==1">
					<img src="./assets/ranking2.png" alt="">
				  </div>
				  <div class="index1" v-else-if="index==2">
					<img src="./assets/ranking3.png" alt="">
				  </div>
				  <div class="index1" v-else>{{ index + 1 }}</div>
				</div> -->
				<div class="tableBody2Item" :style="{flex: head[0].flex}">
					<span class="num">{{ item.zoneName }}</span>
				</div>
				<div class="tableBody2Item" :style="{flex: head[1].flex}">
					<span class="num">{{ item.grainGroup }}</span>
				</div>
				<div class="tableBody2Item" :style="{flex: head[2].flex}" style="text-align: right">
					<span class="num">{{ item.zonePrice.toFixed(2) }}</span>
				</div>
<!--				<div class="tableBody2Item" :style="{flex: head[3].flex}">
					<span class="time2">{{ item.updateTime }}</span>
					&lt;!&ndash; <span class="time1" v-if="index<3">{{ item.time }}</span>
					<span class="time2" v-else>{{ item.time }}</span> &ndash;&gt;
				</div>-->
			</div>
		</Vue3SeamlessScroll>
	</div>
</template>

<script>
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";

export default {
	name: "tableCom",
	components: {Vue3SeamlessScroll},
	props: {
		head: {
			type: Array,
			default() {
				return [{
					title: '地区',
					flex: 0.8
				}, {
					title: '粮食种类',
					flex: 0.9
				}, {
					title: '价格(元/吨)',
					flex: 1.3
				}];
			}
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
	},
	data() {
		return {}
	},
	watch: {},
	mounted() {
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
.tableCom {
	width: calc(100% - 0px);
	margin-left: 0px;
	position: relative;
	height: 100%;
	overflow: hidden;

	.tableHead {
		width: 100%;
		height: 39px;
		//background: rgba(48, 142, 255, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		.tableHeadItem {
			font-size: 14px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			padding-left: 15px;
			flex: 1;
		}
	}

	.tableBody {
		position: relative;
		height: calc(100% - 34px);
		overflow: hidden;

		.tableBody2 {
			min-height: 34px;
			padding-top: 5px;
			padding-bottom: 5px;
			background: rgba(#308EFF, 0);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;

			.tableBody2Item {
				font-size: 14px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				color: #F9FBFF;
				text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				padding-left: 15px;
				flex: 1;

				.num {
					width: calc(100% - 15px);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.tableBody2:nth-child(2n) {
			// background: rgba(48, 142, 255, 0.2);
			background: linear-gradient(90deg, rgba(100, 224, 255, 0) 0%, rgba(33, 122, 255, .2) 34%, rgba(33, 122, 255, .2) 70%, rgba(97, 246, 255, 0) 100%);
		}

		.index1 {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			width: 100%;
			font-size: 14px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #F9FBFF;
			margin-left: -18px;
			width: 60px;

			img {
				width: 30px;
				height: 30px;
			}
		}
	}
}

.time1 {
	font-size: 14px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #46FFF4;
}

.time2 {
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #F9FBFF;
}
</style>
