
<template>
	<div style="cursor: default">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>预警</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 主内容 -->
		<div class="systemmanger_Warning_main" :style="'height:' + fullHeight + 'px'">
			<!-- 搜索、筛选 -->
			<div class="systemmanger_Warning_main_searchBox">
				<!-- 搜索 -->
				<div class="systemmanger_Warning_units_search">
					<el-input size="mini" placeholder="请输入设备ID" v-model="input1" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchData()"></el-button>
					</el-input>
				</div>

				<!-- 下拉框1 -->
				<div class="systemmanger_Warning_units_pullDown1">
					<el-dropdown @command="handleCommand1">
						<el-button size="mini" type="primary">
							{{this.dropdownData1}}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command>全部</el-dropdown-item>
							<el-dropdown-item command="offline">offline</el-dropdown-item>
							<el-dropdown-item command="rtu">rtu</el-dropdown-item>
							<el-dropdown-item command="down_motor">down_motor</el-dropdown-item>
							<el-dropdown-item command="up_motor">up_motor</el-dropdown-item>
							<el-dropdown-item command="turn_motor">turn_motor</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>

				<!-- 下拉框2 -->
				<div class="systemmanger_Warning_units_pullDown2">
					<el-dropdown @command="handleCommand2">
						<el-button size="mini" type="primary">
							{{this.dropdownData2}}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command>请选择</el-dropdown-item>
							<el-dropdown-item command="offline">离线次数查看</el-dropdown-item>
							<el-dropdown-item command="relink">重连次数查看</el-dropdown-item>
							<el-dropdown-item command="cbdoffline">测报灯离线次数查看</el-dropdown-item>
							<el-dropdown-item command="cbdrelink">测报灯重连次数查看</el-dropdown-item>
							<el-dropdown-item command="qxofflin">气象站离线次数查看</el-dropdown-item>
							<el-dropdown-item command="qxzrelink">气象站重连次数查看</el-dropdown-item>
							<el-dropdown-item command="scdoffline">杀虫灯离线次数查看</el-dropdown-item>
							<el-dropdown-item command="xyoffline">性诱离线次数查看</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>

			<!-- 列表内容 -->
			<div class="systemmanger_Warning_main_ul">
				<el-table :data="tableData" stripe style="width: 100%" empty-text="暂无数据">
					<el-table-column :prop="this.val1" :label="this.nameData1" width="650px"></el-table-column>
					<el-table-column :prop="this.val2" :label="this.nameData2" width="650px"></el-table-column>
					<el-table-column :prop="this.val3" :label="this.nameData3"></el-table-column>
				</el-table>

				<!-- 分页 -->
				<el-pagination
					background
					@current-change="pageData($event)"
					layout="prev, pager, next"
					:total="this.nums"
					:current-page="page"
					:page-size="5"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import '@/plugin/flexible.js'
export default {
	data() {
		return {
			input1: '', //搜索
			fullHeight: document.documentElement.clientHeight, //自适应高度
			dropdownData1: '请选择类型', //下拉框1
			dropdownData2: '请选择', //下拉框1
			// 表格测试数据
			tableData: [],
			nums: 0, //分页总数
			nameData1: '设备ID',
			nameData2: '预警描述',
			nameData3: '预警时间',
			val1: 'equip_id',
			val2: 'alarm_desc',
			val3: 'alarm_time',
			req: '', //重连离线
			type: '', //类型
			page: 1,
		}
	},
	watch: {
		fullHeight(val) {
			//监控浏览器高度变化
			if (!this.timer) {
				this.fullHeight = val
				this.timer = true
				let that = this
				setTimeout(function () {
					//防止过度调用监测事件，导致卡顿
					that.timer = false
				}, 400)
			}
		}
	},
	methods: {
		//动态获取浏览器高度
		get_boderHeight() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight - 128
					console.log(that.fullHeight)
				})()
			}
		},

		//下拉框1
		handleCommand1(command) {
			this.dropdownData2 = '请选择'
			if (command == '') {
				this.dropdownData1 = '全部'
			} else {
				this.dropdownData1 = command
			}
			this.onOffLineData('', '', '', '', command, 1)
		},
		//下拉框2
		handleCommand2(command) {
			this.dropdownData1 = '请选择类型'
			if (command == '') {
				this.dropdownData2 = '请选择'
			} else if (command == 'offline') {
				this.dropdownData2 = '离线次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '离线次数', '', 1)
			} else if (command == 'relink') {
				this.dropdownData2 = '重连次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '重连次数', '', 1)
			} else if (command == 'cbdoffline') {
				this.dropdownData2 = '测报灯离线次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '离线次数', '', 1)
			} else if (command == 'cbdrelink') {
				this.dropdownData2 = '测报灯重连次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '重连次数', '', 1)
			} else if (command == 'qxofflin') {
				this.dropdownData2 = '气象站离线次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '离线次数', '', 1)
			} else if (command == 'qxzrelink') {
				this.dropdownData2 = '气象站重连次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '重连次数', '', 1)
			} else if (command == 'scdoffline') {
				this.dropdownData2 = '杀虫灯离线次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '离线次数', '', 1)
			} else if (command == 'xyoffline') {
				this.dropdownData2 = '性诱离线次数查看'
				this.onOffLineData(command, '设备ID', '设备类型', '离线次数', '', 1)
			}
		},

		//分页点击
		pageData(e) {
			let that = this
			var val = that.val2
			if (val == 'alarm_desc') {
				//类型
				that.onOffLineData('', '', '', '', that.type, e, that.input1)
			} else if (val == 'etype') {
				//离线重连
				that.onOffLineData(
					that.req,
					that.nameData1,
					that.nameData2,
					that.nameData3,
					'',
					e,
					that.input1
				)
			}
		},

		// 请求预警列表数据
		listData(req) {
			let that = this
			let postData = that.qs.stringify({
				req: req, //
				page: that.page, //
				equip_id: '', //
				equip_type: '' //
			})
			that
				.$axios({
					method: 'post',
					url:
						'api/api_gateway?method=pest.warning_record.equip_warning_list',
					data: postData
				})
				.then((res) => {
					if (res.data.data.nums == 0) {
					} else {
						that.tableData = res.data.data.data
					}
					console.log(res.data.data)
					var num = res.data.data.nums
					that.nums = num
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//请求预警列表重连离线次数筛选
		onOffLineData(req, name1, name2, name3, type, page, inpt) {
			let that = this
			let postData = that.qs.stringify({
				req: req, //
				page: page, //
				equip_id: inpt, //
				equip_type: type //
			})
			if (req !== '') {
				that.req = req
			}
			if (type != '') {
				that.type = type
			}
			that
				.$axios({
					method: 'post',
					url:
						'api/api_gateway?method=pest.warning_record.equip_warning_list',
					data: postData
				})
				.then((res) => {
					if (res.data.data.nums == 0) {
						if (name1 && name2 && name3) {
							that.nameData1 = name1
							that.nameData2 = name2
							that.nameData3 = name3
							// 值
							that.val1 = 'equip_id'
							that.val2 = 'etype'
							that.val3 = 'nums'
						} else {
							that.nameData1 = '设备ID'
							that.nameData2 = '预警描述'
							that.nameData3 = '预警时间'
							// 值
							that.val1 = 'equip_id'
							that.val2 = 'alarm_desc'
							that.val3 = 'alarm_time'
						}
						that.tableData = res.data.data.data
					} else {
						if (name1 && name2 && name3) {
							that.nameData1 = name1
							that.nameData2 = name2
							that.nameData3 = name3
							// 值
							that.val1 = 'equip_id'
							that.val2 = 'etype'
							that.val3 = 'nums'
							var data = res.data.data.data
							var redata = []
							for (var i = 0; i < data.length; i++) {
								var dataA = data[i]
								if (data[i].etype == 2) {
									dataA['etype'] = '杀虫灯'
								} else if (data[i].etype == 3) {
									dataA['etype'] = '测报灯'
								} else if (data[i].etype == 5) {
									dataA['etype'] = '气象站'
								} else if (data[i].etype == 8) {
									dataA['etype'] = '性诱器'
								}
								redata.push(dataA)
							}
						} else {
							that.nameData1 = '设备ID'
							that.nameData2 = '预警描述'
							that.nameData3 = '预警时间'
							// 值
							that.val1 = 'equip_id'
							that.val2 = 'alarm_desc'
							that.val3 = 'alarm_time'
						}
						that.tableData = res.data.data.data
					}
					var num = res.data.data.nums
					that.nums = num
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//搜索筛选数据请求
		searchData() {
			let that = this
			if (that.req !== '') {
				//重连离线
				that.onOffLineData(
					that.req,
					that.nameData1,
					that.nameData2,
					that.nameData3,
					'',
					that.page,
					that.input1
				)
			} else if (that.type !== '') {
				//类型
				that.onOffLineData('', '', '', '', that.type, that.page, that.input1)
			}
		}
	},
	created() {},
	mounted() {
		this.get_boderHeight() //自适应
		this.listData('') //请求预警列表数据
	}
}
</script>

<style lang='less' scoped>
// 主内容
.systemmanger_Warning_main {
	// border: 1px solid #000;

	// 搜索、筛选
	.systemmanger_Warning_main_searchBox {
		// border: 1px solid #000;
		display: flex;
		.systemmanger_Warning_units_search,
		.systemmanger_Warning_units_pullDown1,
		.systemmanger_Warning_units_pullDown2 {
			margin: 0 0 0 15px;
		}
	}

	// 列表内容
	.systemmanger_Warning_main_ul {
		border: 1px solid #fff;
		margin: 25px 0 0 0;
		border-radius: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		padding: 15px;
	}
}
</style>