<template>
	<div class="middleCockpit">
		<!-- <div class="middle-top">
      <div class="left-img">
        <el-image :src="require('@/assets/images/cockpitCardTitle.png')" style="width: 30px;height: 30px;margin-right: 16px;vertical-align: middle" />
      </div>
      <div class="middle-title">{{ title }}</div>
      <div class="left-img">
        <el-image :src="require('@/assets/images/cockpitCardTitle.png')" style="width: 30px;height: 30px;margin-left:16px;vertical-align: middle;transform: rotate(180deg)" />
      </div>

    </div> -->
		<div :key="compKey" class="count-flop">
			<div v-for="(item, index) in value" :key="index" :class="item!='.'?'count-flop-box':'count-flop-point'">
				<div v-if="item!='.'" class="count-flop-content" :class="['rolling_' + item]">
					<div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{ item2 }}</div>
				</div>
				<div v-else class="count-flop-content">.</div>
			</div>
		</div>
	</div>

</template>
<script>
	export default {
		name: 'MiddleCockpit',
		props: {
			lightNum: {
				type: Number,
				default: 0
			},
			title: {
				type: String,
				default: '上报数量'
			}
		},
		data() {
			return {
				value: [],
				numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
				compKey: 0
			}
		},
		watch: {
			lightNum() {
				this.value = this.lightNum.toString().split('')
				this.compKey += 1
			}
		},
		created() {
			this.value = this.lightNum.toString().split('')
		}
	}
</script>
<style scoped lang="scss">
	.middleCockpit {
		margin-top: 60px;

		.middle-top {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.middle-title {
			font-size: 16px;
			font-family: PingFang SC, PingFang SC-Semibold;
			font-weight: 600;
			text-align: LEFT;
			color: rgba(255, 255, 255, 0.80);
			line-height: 16px;
			text-shadow: 0px 2px 7px 0px #0d65cd;
		}
	}

	.count-flop {
		display: flex;
		/* 可更改 */
		height: 80px;
		margin-top: 16px;
		font-size: 60px;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 600;
		line-height: 80px;
		text-shadow: 0px 2px 5px 0px #2b51a5;
		justify-content: center;
	}

	.count-flop>div {
		position: relative;
		display: inline-block;
		overflow: hidden;
		height: 100%;
	}

	.count-flop-box {
		/* 可更改 */
		width: 66px;
		height: 76px;
		// background: rgba(18,27,53,0.30);
		// border: 1px solid;
		margin-right: 16px;
		// border-image: linear-gradient(166deg, rgba(0,99,255,0.00) 0%, #9ab6e3 100%, rgba(4,75,189,0.00) 100%) 1 1;
	}

	.count-flop-point {
		/* 可更改 */
		margin-right: 5px;
		width: 10px;
	}

	.count-flop-content {
		font-family: MicrosoftYaHei-Bold;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		animation-fill-mode: forwards !important;

		.count-flop-num {
			background-image: url('~@/assets/lightBox.png');
			background-size: 100% 100%;
		}
	}

	.rolling_0 {
		animation: rolling_0 2.1s ease;
	}

	@keyframes rolling_0 {
		from {
			transform: translateY(-90%);
		}

		to {
			transform: translateY(0);
		}
	}

	.rolling_1 {
		animation: rolling_1 3s ease;
	}

	@keyframes rolling_1 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-10%);
		}
	}

	.rolling_2 {
		animation: rolling_2 2.1s ease;
	}

	@keyframes rolling_2 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-20%);
		}
	}

	.rolling_3 {
		animation: rolling_3 3s ease;
	}

	@keyframes rolling_3 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-30%);
		}
	}

	.rolling_4 {
		animation: rolling_4 2.1s ease;
	}

	@keyframes rolling_4 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-40%);
		}
	}

	.rolling_5 {
		animation: rolling_5 3s ease;
	}

	@keyframes rolling_5 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-50%);
		}
	}

	.rolling_6 {
		animation: rolling_6 2.1s ease;
	}

	@keyframes rolling_6 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-60%);
		}
	}

	.rolling_7 {
		animation: rolling_7 3.1s ease;
	}

	@keyframes rolling_7 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-70%);
		}
	}

	.rolling_8 {
		animation: rolling_8 2.1s ease;
	}

	@keyframes rolling_8 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-80%);
		}
	}

	.rolling_9 {
		animation: rolling_9 3.6s ease;
	}

	@keyframes rolling_9 {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-90%);
		}
	}
</style>