<template>
	<el-container>
		<el-main>
			<div class="boxmain">
				<div
					class="wrapper"
					:id="'scrollWrapper' + refValue"
					@mouseover="mouseOver"
					@mouseout="mouseOut"
				>
					<table class="totall">
						<tr class="title">
							<th v-for="itemx in titleData" :key="itemx">
								{{ itemx }}
							</th>
						</tr>
					</table>
					<div
						:id="refValue"
						:ref="`${refValue}`"
						class="scrollTableBody"
					>
						<div :id="'scrollBody' + refValue">
							<table :class="{ marquee_top: animate }">
								<tr
									v-for="(itemy, index) in rowData"
									class="rollData"
									ref="con1"
									:key="itemy"
								>
									<td v-if="!noIndex">{{ index + 1 }}</td>
									<td v-for="itemz in itemy" :key="itemz">
										<el-progress
											v-if="itemz.elType == 'progress'"
											:text-inside="true"
											:stroke-width="14"
											:percentage="itemz.value"
											:status="getStatus(itemz.value)"
										/>
										<el-tag
											v-else-if="itemz.elType == 'tag'"
											:type="getTagType(itemz.value)"
											>{{
												stateOption[itemz.value]
											}}</el-tag
										>
										<span v-else>{{ itemz.value }}</span>
									</td>
								</tr>
							</table>
							<table
								:class="{ marquee_top: animate }"
								v-show="scrollVivible"
							>
								<tr
									v-for="(itemy, index) in rowData"
									class="rollData"
									ref="con1"
									:key="itemy"
								>
									<td v-if="!noIndex">{{ index + 1 }}</td>
									<td v-for="itemz in itemy" :key="itemz">
										<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
                                        :status="getStatus(itemz.value)"/> -->
										<el-progress
											v-if="itemz.elType == 'progress'"
											:text-inside="true"
											:stroke-width="16"
											:percentage="itemz.value"
											:status="getStatus(itemz.value)"
										>
											<span>{{ itemz.value }}</span>
										</el-progress>
										<el-tag
											v-else-if="itemz.elType == 'tag'"
											:type="getTagType(itemz.value)"
											>{{
												stateOption[itemz.value]
											}}</el-tag
										>
										<span v-else>{{ itemz.value }}</span>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</el-main>
	</el-container>
</template>
<script>
export default {
	props: {
		noIndex: {
			type: Boolean,
			default: false,
		},
		rowData: {
			type: Array,
			default() {
				return [];
			},
		},
		titleData: {
			type: Array,
			default() {
				return [];
			},
		},
		tableHeight: {
			type: Number,
			default() {
				return 100;
			},
		},
		refValue: {
			type: String,
			default() {
				return "";
			},
		},
	},
	data() {
		return {
			speed: 2000,
			myScroll: null,
			iliHeight: 30,
			time: null,
			delay: 20,
			scrollVivible: true,
			stateOption: {
				10: "创建中",
				14: "已分解",
				20: "已下达",
				30: "生产中",
				34: "已停止",
				40: "已完成",
				q10: "完好",
				q20: "限用",
				q30: "在修",
				q40: "禁用",
				normal: "正常",
				late: "迟到",
				未到岗: "未到岗",
			},
		};
	},
	mounted() {
		let that = this;
		this.$nextTick(() => {
			let Container = that.tableHeight;
			let tableHeight = Container - 40;
			let idName = "scrollWrapper" + that.refValue;
			let idName2 = that.refValue;
			document.getElementById(idName).style.height = Container + "px";
			document.getElementById(idName2).style.height = tableHeight + "px";
			// let scrollBody = "scrollBody" + this.refValue;
			let scrollHeight = that.$refs[`${that.refValue}`].clientHeight / 2;
			console.log("scrollHeight", scrollHeight);
			if (tableHeight > scrollHeight) {
				that.scrollVivible = false;
			} else {
				that.scrollVivible = true;
				that.myScroll = setInterval(() => {
					that.scrollUp();
				}, that.speed);
			}
		});
	},
	methods: {
		getTagType(type) {
			if (type == 30 || type == 10 || type == 14 || type == 20) {
				return "";
			} else if (type == 40) {
				return "success";
			} else if (type == "normal") {
				return "success";
			} else if (type == "late") {
				return "warning";
			} else if (type == "未到岗") {
				return "danger";
			}
		},
		getStatus(status) {
			if (status == 100) {
				return "success";
			} else if (status >= 80) {
				return "primary";
			} else if (status >= 60) {
				return "warning";
			} else {
				return "exception";
			}
		},

		scrollUp() {
			if (
				this.$refs[`${this.refValue}`] &&
				this.$refs[`${this.refValue}`].scrollTop
			) {
				let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
				let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
				if (scrollTop >= scrollHeight / 2) {
					//判断条件是否达到临界
					this.$refs[`${this.refValue}`].scrollTop = 0;
				} else {
					this.$refs[`${this.refValue}`].scrollTop = scrollTop + 40;
				}
			}
		},
		// 鼠标滑过暂停滚动
		mouseOver() {
			clearInterval(this.myScroll);
		},
		//鼠标移开重新滚动
		mouseOut() {
			this.myScroll = setInterval(() => {
				this.scrollUp();
			}, this.speed);
		},
	},
	beforeUnmount() {
		let that = this;
		clearInterval(that.myScroll1);
		that.myScroll1 = null;
	},
	beforeDestoryed() {
		let that = this;
		clearInterval(that.myScroll1);
		that.myScroll1 = null;
	},
};
</script>
<style scoped>
.boxmain {
	height: calc(100% - 40px);
}

@media screen and (max-width: 800px) {
	.boxmain {
		height: 200px;
	}
}

table {
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}

.title {
	height: 40px;
	line-height: 40px;
	text-align: center;
}

table th {
	font-size: 14px;
	background: rgba(0, 0, 0, 0.1);
}

table td {
	font-size: 14px;
	height: 40px;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

table th,
table td {
	padding: 0.1rem 0;
	border-bottom: none !important;
	background: none !important;
}

.marquee_top {
	transition: all 0.5s ease-in-out;
	margin-top: -26px;
}

.totall {
	color: #fff;
	background-color: rgb(10, 63, 68);
}

.rollData {
	background-color: rgb(10, 39, 50);
}

.rollData:nth-of-type(2n + 1) {
	background-color: rgb(0, 59, 81);
}
.scrollTableBody {
	/* overflow: scroll;
	overflow-x: scroll; */
	overflow-y: scroll;
}
.scrollTableBody::-webkit-scrollbar {
	width: 1px;
}
/* 
.scrollTableBody::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
	border-radius: 5px;
}

.scrollTableBody::-webkit-scrollbar-track {
	background-color: #ddd;
	border: 1px solid #ccc;
}

.scrollTableBody::-webkit-scrollbar-button {
	background-color: #4d7fff;
	border-radius: 5px;
} */

/* .scrollTableBody::-webkit-scrollbar-button:hover {
	background-color: #999999;
} */
</style>
