<template>
	<div class="maintenance-supervision">
		<div class="maintenance-supervision_header">
			<el-input v-model="search" placeholder="请输入建筑名"></el-input>
			<el-select style="width: 140px;" v-model="value" placeholder="选择警情类型">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-select style="width: 100px;" v-model="value1" placeholder="处置状态">
				<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button style="width: 100px; margin: 0;" @click="searchTab">搜索</el-button>
		</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>
			</div>
			<!-- <VueSeamlessScroll :data="list" :class-option="classOption" class="warp" hoverStop> -->
			<div class="" style="height: 100vh;overflow: auto;">
				<ul class="item">
					<div v-for="(item, index) in czztList" :key="index">
						<li class="row" @click="tab(item.id)" :class="item.id === id ? 'selected' : ''">
							<span class="time" style="width: 110px;overflow: hidden;height: 40px;">{{item.zqlx}}</span>
							<span class="person"
								style="width: 110px;overflow: hidden;height: 40px;">{{item.ddmc}}</span>
							<span class="result"
								style="width: 110px;overflow: hidden;height: 40px;">{{item.sszhid }}</span>
							<span class="result1"
								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.ajzt}}</span>
							<span class="result2"
								style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.lasj}}</span>
						</li>
						<div class="bjxxBack" v-if="item.id === id ">
							<div class="bjTetx">报警电话：{{item.bjrlxdh || '-'}}</div>
							<div class="bjTetx">人员被困情况：{{item.bjrsfbk ||'-'}}</div>
							<div class="bjTetx">有无明火：{{item.jqJyqk || '-'}}</div>
						</div>
					</div>
				</ul>
			</div>
			<!-- </VueSeamlessScroll> -->
		</div>
	</div>
</template>
<script>
	import VueSeamlessScroll from "vue-seamless-scroll";
	import {
		getBjxx
	} from '@/api/jqdt.js'
	export default {
		name: "MaintenanceSupervision",
		data() {
			return {
				value: "",
				value1: "",
				search: '',
				id: null,
				options: [{
						value: '火灾扑救',
						label: '火灾扑救'
					},
					{
						value: '抢险救援',
						label: '抢险救援'
					},
					{
						value: '反恐排爆',
						label: '反恐排爆'
					},
					{
						value: '公务执勤',
						label: '公务执勤'
					},
					{
						value: '社会救助',
						label: '社会救助'
					},
					{
						value: '其他出动',
						label: '其他出动'
					},
					{
						value: '拉动演练',
						label: '拉动演练'
					}
				],
				options1: [{
						value: '接警',
						label: '接警'
					},
					{
						value: '下达',
						label: '下达'
					},
					{
						value: '出动',
						label: '出动'
					},
					{
						value: '到场',
						label: '到场'
					},
					{
						value: '展开',
						label: '展开'
					},
					{
						value: '出水',
						label: '出水'
					},
					{
						value: '控制',
						label: '控制'
					},
					{
						value: '熄灭',
						label: '熄灭'
					},
					{
						value: '清理现场',
						label: '清理现场'
					},
					{
						value: '返回',
						label: '返回'
					},
					{
						value: '归队',
						label: '归队'
					},
					{
						value: '结案',
						label: '结案'
					},
					{
						value: '归档',
						label: '归档'
					},
					{
						value: '中返',
						label: '中返'
					},
					{
						value: '停水',
						label: '停水'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				checked: 0,
				newList: "",
				czztList: []
			};
		},
		components: {
			VueSeamlessScroll,
		},
		computed: {
			classOption() {
				return {
					singleHeight: 43,
				};
			},
		},
		props: ['list', 'pId'],
		methods: {
			searchTab() {
				const params = {
					pageSize: 100,
					pageNum: 1,
					ddmc: this.search,
					zqlx: this.value,
					ajzt: this.value1
				}
				getBjxx(params).then(res => {
					console.log(res, '报警信息');
					this.czztList = res.data.rows
				})
			},
			tab(id) {
				this.id = id;
				this.$emit('callback', id);
			},
		},
		created() {
			// 如果pTd存在 就选中pID
			if (this.pId) {
				this.tab(this.pId)
			}
			// 默认选中第一条
			else {
				this.tab(this.list[0].id)
			}
			this.searchTab()
		}
	};
</script>

<style scoped lang="less">
	.selected {
		width: 100%;
		height: 40px;
		background: rgba(0, 194, 255, 0.14) !important;
		box-shadow: 0px 0px 2px 0px #44f1ff !important;
		// background: red !important;
	}

	.el-input {
		width: 120px !important;
	}

	.maintenance-supervision {

		// padding: 10px 10px 0px 20px;
		::v-deep(.el-input__inner) {
			border: none;
			background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
			color: #fff;
		}

		::v-deep(.el-button) {
			border: none;
			background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
			color: #fff;
		}

		.maintenance-supervision_header {
			display: flex;
			justify-content: space-around;
			border-bottom: 1px solid #154956;
			padding-bottom: 2px;
			margin-top: 15px;
			font-size: 12px;
			color: rgb(79, 149, 186);
		}

		.warp {
			margin: 0 auto;
			overflow: hidden;

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

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

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 12px;
			padding-right: 70px;
			box-sizing: border-box;
		}

		.bjxxBack {
			padding: 8px 13px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			width: 100%;
			height: 50px;
			background: url(../../../assets/images/bjxxImg.png) center no-repeat;
			background-size: 100% 50px;
			margin-top: -10px;

			.bjTetx {
				flex-grow: 1;
			}
		}

		li,
		a {
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			font-size: 12px;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}


	/deep/.el-input__inner {
		background-color: #184254;
		// width: 10px;
		height: 30px;
		margin-bottom: 5px;
	}

	/deep/.el-button {
		width: 160px;
		height: 32px;
		font-size: 14px;
		line-height: 2px;
		background: #184254;
		margin: 0 20px 0 30px;
		color: #fff;
		border-radius: 5px;
		border: none;
	}

	// /deep/.el-select-dropdown{

	//     background-color:#184254 !important;
	//     position: fixed;

	//   }
	/deep/.select_btn {
		position: absolute;
		top: 225px;
		right: 320px;
		//下拉框
	}

	// /deep/.el-select-dropdown{
	//      border: none;
	//      background-color: #184254 ;
	//  }
	//输入框
	//  /deep/.el-input__inner{
	//      color:#eee;
	//      border-color: #00fff6;
	//      background-color: rgba(1, 28, 82, 0.8);
	//  }
	//  //聚焦时的样式
	//  /deep/.el-select .el-input.is-focus .el-input__inner{
	//      border-color: #0B61AA;
	//      background-color: rgba(1, 28, 82, 0.8);
	//      color:#00D3E9;
	//  }
	//  //下拉框选中
	//  /deep/.el-select-dropdown__item{
	//      color: #eee;
	//  }
	//  //鼠标经过下拉框
	//  /deep/.el-select-dropdown__item.hover,
	//  /deep/.el-select-dropdown__item:hover{
	//      color:#00D3E9;
	//      background-color: #0F3360;
	//  }
</style>


<style>
	.el-select-dropdown.el-popper {
		background-color: #4167a0;
	}

	.el-popper[x-placement^=bottom] .popper__arrow::after {
		border-bottom-color: #4167a0 !important;
	}

	.el-select-dropdown.el-popper {
		border: 1px solid rgba(0, 213, 255, 0.6) !important;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item span {
		color: #fff;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
		color: #2f7df2;
	}

	.el-select-dropdown.el-popper .el-select-dropdown__item.hover {
		background-color: #2f7df2;
	}

	.el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
		color: #fff !important;
	}
</style>