<template>
	<div class="maintenance-supervision">
		<div class="plate">
			<div>{{zlxx}}</div>
		</div>
		<div>
			<div class="row header">
				<span class="time">车牌号</span>
				<span class="person">车辆类型</span>
				<span class="result">车速</span>
				<span class="result1">状态</span>
				<span class="result2">预计到场时间</span>
				<span class="result3">实际到时间</span>
			</div>
			<VueSeamlessScroll :data="list" :class-option="classOption" class="warp">
				<ul class="item">
					<li class="row" v-for="(item, index) in list" :key="index">
						<span class="time">{{item.jdchphm}}</span>
						<span class="person" style="height: 20px;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{ item.zbmc }}</span>
						<span class="result" :class="item.ss >= 60 ? 'rescs':'' ">{{ item.ss || '-'}}</span>
						<span class="result1">{{ item.zt || '-'}}</span>
						<span class="result2" style="overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{ item.yjddsj || '-'}}</span>
						<span class="result3">{{ item.sjddsj  || '-'}}</span>
					</li>
				</ul>
			</VueSeamlessScroll>
		</div>
		<div class="btn">火场文书</div>
		<div class="writ">
			<div class="writTab">
				<div class="wenshuTxt">最新文书</div>
				<img src="../../../assets/images/img14.png" />
			</div>
			<div class="content">
				<div>
					<div style="" v-if="hcws1">
						<div class="contFlex" style="margin: 5px 0;">
							<div class="contType">{{hcws1.jqzt}}</div>
							<div class="conTime">{{hcws1.gxsj}}</div>
						</div>
						<div class="contBox" style="margin: 1px 0 ;">{{hcws1.wsnrJyqk}}</div>
						<div class="contText">{{hcws1.fkjgDwmc}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="writ on">
			<div class="writTab">
				<div class="wenshuTxt">历史文书</div>
				<img src="../../../assets/images/img14.png" />
			</div>
			<div class="content on">
				<div v-for="(item,index) in hcws" :key="index">
					<div>
						<div class="contFlex">
							<div class="contType">{{item.jqzt}}</div>
							<div class="conTime">{{item.gxsj}}</div>
						</div>
						<div class="contBox">{{item.wsnrJyqk}}</div>
						<div class="contText">{{item.fkjgDwmc}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import VueSeamlessScroll from "vue-seamless-scroll";
	import moment from "moment";
	export default {
		name: 'MaintenanceSupervision',
		data() {
			return {
				checked: 0,
			}
		},
		props: ['list', 'zlxx', 'hcws', 'hcws1'],
		// props: {
		// 	list: {
		// 		type: Array,
		// 		default: []
		// 	},
		// 	zlxx: {
		// 		type: Object,
		// 		default: {}
		// 	},
		// 	hcws: {
		// 		type: Array,
		// 		default: []
		// 	}
		// },
		components: {
			VueSeamlessScroll
		},
		computed: {
			classOption() {
				return {
					singleHeight: 43,
				};
			},
		},
		methods: {
			change(idx) {
				this.checked = idx
				console.log("切换索引", idx)
			},
			resultType(text) {
				return {
					"合格": "#23f59d",
					"不合格": "#df575b",
					"是": "#23f59d",
					"否": "#df575b"
				} [text]
			}
		},
	}
</script>

<style scoped lang='less'>
	.rescs{
		color: #DB5555;
	}
	::-webkit-scrollbar {
		border-radius: 3px;
		width: 8px;
		height: 8px;
		background: rgba(0, 213, 255, 0.3);
	}

	::-webkit-scrollbar-thumb {
		background: rgba(0, 213, 255, 0.3);
	}

	.writ {
		width: 521px;
	}

	.writTab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #00599B;
		opacity: 0.6;
		padding: 2px 12px;
		box-sizing: border-box;
	}

	.wenshuTxt {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
	}

	.content {
		padding: 6px 12px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
	}

	.content.on {
		height: 110px;
		overflow: auto;
	}

	.contFlex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
	}

	.contType {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
	}

	.conTime {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
	}

	.contTxt {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		margin-top: 4px;
	}

	.contBox {
		margin: 6px 0;
		overflow: auto;
		line-height: 20px;
	}

	.contText {
		text-align: right;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 12px;
		line-height: 20px;
	}

	.btn {
		font-size: 14px;
		margin-bottom: 3px;
		text-align: center;
		line-height: 28px;
		width: 101px;
		height: 28px;
		border-radius: 4px;
		background: linear-gradient(180deg, rgba(0, 148, 255, 0.5) 0%, rgba(0, 148, 255, 0) 100%);
	}

	.plate {
		text-indent: 20px;
		line-height: 18px;
		font-size: 12px;
		height: 79px;
		padding: 12px 15px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
	}

	.maintenance-supervision {
		padding: 10px 10px 0px 10px;
        background: linear-gradient(180deg, rgba(49, 121, 173, 0.5) 0%, rgba(43, 101, 142, 0.245) 100%);
		.maintenance-supervision_header {
			border-bottom: 1px solid #154956;
			padding-bottom: 2px;
		}

		.warp {
			height: 140px;
			margin: 0 auto;
			overflow: hidden;

			.item {
				list-style: none;
				padding: 0;
				margin: 0 auto;
				cursor: pointer;
			}
			&:hover {
				overflow: auto;
			}
		}

		.header {
			color: #fff;
			height: 33px !important;
			line-height: 33px !important;
			background-color: rgba(0, 163, 255, 0.3) !important;
			color: #61DBFF;
			margin-top: 3px;
			margin-bottom: 6px;
		}

		.row,
		li,
		a {
			display: block;
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			background-color: rgba(0, 0, 0, 0.2);

			.time,
			.person,
			.result {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result1 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result2 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.result3 {
				flex: 0.33;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
