<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" @click="routerTitle(item.titleName)">
				<div class="tableBody2Item" :style="{flex: head[0].flex}">{{ item.depotGrainName }}</div>
				<div class="tableBody2Item" :style="{flex: head[1].flex}">
					<span class="titleName titleName1" v-if="item.titleName=='车辆审批'">{{ item.titleName }}</span>
					<span class="titleName titleName2" v-else-if="item.titleName=='扦样确认'">{{ item.titleName }}</span>
					<span class="titleName titleName3" v-else-if="item.titleName=='放款审批'">{{ item.titleName }}</span>
					<span class="titleName titleName4" v-else-if="item.titleName=='还款审批'">{{ item.titleName }}</span>
					<span class="titleName titleName5" v-else-if="item.titleName=='门锁预约'">{{ item.titleName }}</span>
					<span class="titleName titleName6" v-else-if="item.titleName=='人工补单'">{{ item.titleName }}</span>
					<span class="titleName" v-else>{{ item.titleName }}</span>
				</div>
				<div class="tableBody2Item" :style="{flex: head[2].flex}"><span class="num">{{ item.titleCount }}</span></div>
				<div class="tableBody2Item" :style="{flex: head[3].flex}"><span class="num">{{ item.createTime }}</span></div>
			</div>
		</Vue3SeamlessScroll>

	</div>
</template>

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

export default {
	name: "tableCom",
	components: {Vue3SeamlessScroll},
	props: {
		head: {
			type: Array,
			default() {
				return [{
					title: '粮库',
					flex: 2
				}, {
					title: '分类',
					flex: 0.7
				}, {
					title: '数量',
					flex: 0.7
				}, {
					title: '时间',
					flex: 2
				}];
			}
		},
		list: {
			type: Array,
			default() {
				return [];
			}
		},
	},
	data() {
		return {}
	},
	watch: {},
	mounted() {
	},
	methods: {
		routerTitle(typeName) {
			let routerName = 'index'
			if (typeName === "车辆审批")
				routerName = 'depotTruckBook'
			else if (typeName === "扦样确认")
				routerName = 'depotSampling'
			else if (typeName === "还款申请")
				routerName = 'depotRepayOrder'
			else if (typeName === "放款申请")
				routerName = 'depotLoanGrant'
			else if (typeName === "人工补单")
				routerName = 'depotTruckWeighPlug'
			else if (typeName === "门锁预约")
				routerName = 'depotLockBook'
			router.replace({
				path: routerName
			})
		},
	}
}
</script>

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

	.tableHead {
		width: 100%;
		height: 44px;
		// background: rgba(34, 72, 133, 0.5);
		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(214, 238, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			flex: 1;
		}
	}

	.tableBody {
		position: relative;
		height: calc(100% - 44px);
		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: 12px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				color: #CAD3ED;
				text-shadow: 0px 4px 10px rgba(0, 42, 108, 0.12);
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				flex: 1;

				.num {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: nowrap;
					flex-direction: row;
					align-content: flex-start;
				}

				.time {
					width: 150px
				}

				.titleName1, .titleName {
					color: #4FF5FF;
				}

				.titleName2 {
					color: #5B95FF
				}

				.titleName3 {
					color: #FFF55A
				}

				.titleName4 {
					color: #FFB350
				}

				.titleName5 {
					color: #36FF73;
				}

				.titleName6 {
					color: #F82C2C;
				}
			}
		}

		.tableBody2:nth-child(2n) {
			// background: rgba(34, 72, 133, 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%);
		}
	}
}
</style>
