<script>
	import {
		getGcjztjUnit
	} from "@/api/index.js";
	import {
		getZhxf
	} from "@/api/iot.js";
	import {
		area
	} from "@/api/area";
	import punishmentMixin from "@/mixin/unit.js";
	export default {
		name: "BasicInfoModalContent",
		mixins: [punishmentMixin],
		data() {
			return {
				gjzt:'',
				zjjc:'',
				options: [],
				options1: [{
						value: '火灾报警主机检测',
						label: '火灾报警主机检测'
					},
					{
						value: '物联网类型',
						label: '物联网类型'
					}
				],
				options2: [{
						value: '在线',
						label: '在线'
					},
					{
						value: '离线',
						label: '离线'
					}
				],
				fxdjList: [],
				tableData: [],
				unitList: [],
				value: "全市",
				params: {
					pageSize: 10,
					pageNum: 1,
				},
				total: 0,
				search: "",
			};
		},
		props: {
			qy: String,
		},
		watch: {
			qy: {
				handler(val) {
					this.value = val;
					this.funUnitList();
					this.handUnitList();
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			rowClickHandler(val) {
				// this.$router.push(`/detail?id=${val.id}`);
			},
			funUnitList() {
				getZhxf({
					qx: this.value === "重庆市" ? "" : this.value,
					gcjzmc: this.search,
					zt:this.gjzt,
					sblx:this.zjjc,
					...this.params,
					
				}).then((res) => {
					this.options = res.data.rows;
					this.total = res.data.total;
				});
			},
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.funUnitList();
			},
			handleCurrentChange(val) {
				this.params.pageNum = val;
				this.funUnitList();
			},
			handUnitList() {
				getZhxf({
					...this.params,
					qy: this.value === "重庆市" ? "" : this.value,
				}).then((res) => {
					const list = res.data.rows[0];
					// this.unitList = [{
					// 		title: "高层建筑总数(栋)",
					// 		unitNum: list.ggjz + list.gyjz + list.zzjz,
					// 	},
					// 	{
					// 		title: "超高层建筑总数(栋)",
					// 		unitNum: list.cggjz,
					// 	},
					// 	{
					// 		title: "老旧高层建筑总数(栋)",
					// 		unitNum: list.ljzzgc,
					// 	},
					// 	{
					// 		title: "公共建筑总数(栋)",
					// 		unitNum: list.ggjz,
					// 	},
					// 	{
					// 		title: "住宅建筑总数(栋)",
					// 		unitNum: list.zzjz,
					// 	},
					// ];
				});
			},
			resetForm() {
				this.value = "";
				this.search = "";
				this.zjjc = '',
				this.zt ='',
				this.params = {
						pageSize: 10,
						pageNum: 1,
					},
					this.params.jcj  = "";
				this.funUnitList();
			},
		},
		created() {
			this.funUnitList();
			this.handUnitList();
			area({
				pageNum: 1,
				pageSize: 100,
			}).then((res) => {
				this.options = res.data.rows;
			});
		},
	};
</script>

<template>
	<div>
		<!-- 搜索 -->
		<div class="maintenance-supervision">
			<div class="maintenance-supervision_header">
				<div class="select-item">
					<el-select v-model="value" placeholder="请选择">
						<el-option :value="item.qx" :label="item.qx" v-for="(item, index) in options"
							:key="index">
						</el-option>
					</el-select>
				</div>
				<div class="inp">
					<el-input v-model="search" placeholder="请输入建筑名称"></el-input>
				</div>
				<div>
					<el-select v-model="zjjc" placeholder="火灾报警主机检测">
						<el-option :value="item.value" :label="item.label" v-for="(item, index) in options1"
							:key="index">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-select v-model="gjzt" placeholder="告警状态">
						<el-option :value="item.value" :label="item.lable" v-for="(item, index) in options2"
							:key="index">
						</el-option>
					</el-select>
				</div>
				<div class="btn-item">
					<el-button @click="funUnitList">搜索</el-button>
					<el-button @click="resetForm">重置</el-button>
				</div>
			</div>
		</div>

		<basic-table :data="options" @row-click="rowClickHandler" style="text-align: center">
			<el-table-column type="index" label="序号"> </el-table-column>
			<el-table-column prop="qx" label="区域" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="gcjzmc" label="建筑名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="sblx" label="设备类型" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="sbmc" label="设备名称" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="wz" label="安装位置" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="zt" label="设备状态"> </el-table-column>
			<el-table-column prop="ywzt" label="告警状态" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="cztt" label="处置状态" show-overflow-tooltip>
			</el-table-column>
		</basic-table>
		<br />
		<basic-pagination layout="->,prev, pager, next, sizes,jumper" :page-sizes="[10, 20, 50, 100]"
			:page-size="params.pageSize" :current-page="params.PageNum" :total="total" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<style scoped lang="less">
	.maintenance-supervision {

		// padding: 10px 10px 0px 20px;
		::v-deep(.el-input__inner) {
			border: none;
			background: linear-gradient(360deg,
					rgba(0, 148, 255, 0.5) 0%,
					rgba(0, 148, 255, 0.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;
			flex-wrap: wrap;
			justify-content: space-around;
			// border-bottom: 1px solid #154956;
			padding-bottom: 10px;
			font-size: 12px;
			color: rgb(79, 149, 186);
			// .select-item{
			//   margin-right: 20px;
			// }
		}

		.btn-item {
			margin-bottom: 10px;
		}

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

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

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

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

		/deep/.el-button:hover {
			color: rgb(80, 147, 224);
		}

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

		/deep/.el-input {
			width: 150px;
			// margin-left: 20px;
		}

		.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,
		li,
		a {
			display: block;
			height: 39px;
			line-height: 39px;
			margin-bottom: 4px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			background-color: rgba(0, 0, 0, 0.2);

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

			.num {
				flex: 0.15;
			}
		}

		.inp {
			margin-left: 20px;
		}
	}

	.unit-bulid {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
		font-size: 18px;
	}

	.unit-num {
		width: 200px;
		height: 109px;
		border: 1px solid #0463a7;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-items: center;
		line-height: 59px;
	}
</style>