<template>
	<div v-loading="pageLoading">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>虫情测报</el-breadcrumb-item>
		</el-breadcrumb>
		<search-bar @fun="getDisplayType" @fun2="getIDName" @fun3="getIsOnline"></search-bar>
		<div v-loading="tableLoading">
			<template v-if="displayType==1">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="item in equipList" :key="item.imei">
						<el-card class="box-card">
							<equip-item :is_online="item.device_status">
								
								<span slot="title">虫情测报</span>
								<div slot="content" class="content">
									<p>
										<i class="iconfont icon-yonghu"></i>
										设备ID：{{item.device_id}}
									</p>
									<p>
										<i class="iconfont icon-biaoqian"></i>
										设备名称：{{item.device_name==""?"无":item.device_name}}
									</p>
									<p>
										<i class="iconfont icon-diannao"></i>在线状态：
										<span
											:class="{red:item.device_status==0,green:item.device_status==1}"
										>{{item.device_status==0?"离线":"在线"}}</span>
									</p>
									<p>
										<i class="iconfont icon-shijian"></i>
										最新上报时间 : {{item.status_time}}
									</p>
									<p>
										<i class="iconfont icon-dizhi"></i>
										地址 : {{item.address || "无"}}
									</p>
									<p class="btns">
										<i class="iconfont icon-yemiancaozuo"></i>
										<el-button size="mini" type="info" @click="viewPhotoDialog(item.device_id,item.d_id)">查看图片</el-button>
										<el-button size="mini" type="warning" @click="EquipControl(item.device_id)">设备控制</el-button>
										<!-- <el-button size="mini" type="success" v-if="item.disc==1" @click="showTimeControlDialog(item.device_id)">害虫统计</el-button> -->
										<el-button size="mini" type="success" @click="showTimeControlDialog(item.device_id,item.device_name,item.address)">害虫统计</el-button>
										<el-button size="mini" type="danger" @click="dataDetails(item.device_id,item.device_name,item.address)">数据详情</el-button>
									</p>
								</div>
							</equip-item>
						</el-card>
					</el-col>
				</el-row>
			</template>
			<template v-if="displayType==2">
				<el-card class="box-card" >
					<el-table :data="equipList" stripe style="width: 100%">
						<el-table-column prop="device_id" label="设备ID" width="180">
							<template slot-scope="scope">{{scope.row.device_id}}</template>
						</el-table-column>
						<el-table-column prop="device_name" label="设备名称" width="180">
							<template slot-scope="scope">{{scope.row.device_name==""?"无":scope.row.device_name}}</template>
						</el-table-column>
						<el-table-column prop="device_status" label="在线状态">
							<template slot-scope="scope">
								<p style="color:#17bb89" v-if="scope.row.device_status==1">在线</p>
								<p style="color:#eb6765" v-if="scope.row.device_status==0">离线</p>
							</template>
						</el-table-column>
						<el-table-column prop="address" label="地址"></el-table-column>
						<el-table-column prop="status_time" label="最新上报时间">
							<template slot-scope="scope">{{scope.row.status_time}}</template>
						</el-table-column>
						<el-table-column label="操作" width="400">
							<template slot-scope="scope">
								<el-button size="mini" type="info" @click="viewPhotoDialog(scope.row.device_id,scope.row.d_id)">查看图片</el-button>
								<el-button size="mini" type="warning" @click="EquipControl(scope.row.d_id)">设备控制</el-button>
								<el-button
									size="mini"
									type="success"
									@click="showTimeControlDialog(scope.row.device_id,scope.row.device_name,scope.row.address)"
								>害虫统计</el-button>
								<el-button
									size="mini"
									type="danger"
									@click="dataDetails(scope.row.device_id,scope.row.device_name,scope.row.address)"
								>数据详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</template>
			<!-- 暂无数据 -->
			<div class="expertDiagnosis_referral_units_not" v-if="equipList.length<=0 && displayType==1">
				<img
					src="@/assets/images/zanwu.png"
					alt
					class="expertDiagnosis_referral_units_notImg"
				/>
			</div>
		</div>
		
		
		<el-pagination
			v-if="equipList.length>0"
			background
			:page-size="8"
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="queryInfo.page"
			@current-change="changePage"
		></el-pagination>
		<!-- 设备控制对话框 -->
		<el-dialog
			title="设备控制"
			:visible.sync="equipControlDialogVisible"
			@close="resetEquipControlDialogClosed"
			width="600px"
		>
			<div class="handAddForm">
				<el-form
					ref="equipContrlRef"
					:model="equipContrlForm"
					label-position="right"
					label-width="120px"
				>
					<el-form-item label="工作模式：" prop="ws">
						<el-select v-model="ws" placeholder="请选择害虫名称" @change="wsChange()">
							<el-option label="节能" :value="0"></el-option>
							<el-option label="常规" :value="1"></el-option>
							<el-option label="加强" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="定时模式：" prop="ts">
						<el-select v-model="equipContrlForm.ts" placeholder="请选择害虫名称">
							<el-option label="光控" :value="0"></el-option>
							<el-option label="时控" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="equipContrlForm.ts==1" label="开始结束时间：" prop="st">
						<el-col :span="11">
							<el-time-select
								placeholder="起始时间"
								v-model="equipContrlForm.st"
								:picker-options="{
								start: '00:00',
								step: '01:00',
								end: '24:00'
								}"
							></el-time-select>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-select
								placeholder="结束时间"
								v-model="equipContrlForm.et"
								:picker-options="{
								start: '00:00',
								step: '01:00',
								end: '24:00',
								}"
							></el-time-select>
						</el-col>
					</el-form-item>
					<el-form-item  v-if="equipContrlForm.ts!=1" label="定时时长：" prop="tt">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.tt" show-input :min="1" :max="10"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="落虫时间：" prop="collt">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.collt" show-input :min="1" :max="20"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热时间：" prop="htim">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.htim" show-input :min="1" :max="20"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="加热温度：" prop="hst">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.hst" show-input :min="75" :max="120"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="高温保护阈值:" prop="tph">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.tph" show-input :min="50" :max="70"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="低温保护阈值：" prop="tpl">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.tpl" show-input :min="1" :max="10"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="数据上传间隔：" prop="datt">
						<div class="sliderParent">
							<div class="block">
								<el-slider v-model="equipContrlForm.datt" :step="10" show-input :min="10" :max="60"></el-slider>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="图片分辨率：" prop="imgres">
						<el-select v-model="equipContrlForm.imgres" placeholder="请选择害虫名称">
							<el-option label="高" :value="0"></el-option>
							<el-option label="中" :value="1"></el-option>
							<el-option label="低" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" size="mini" @click="equipControlSubm()">确定</el-button>
						<el-button size="mini" @click="equipControlDialogVisible = false">取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		<!-- 管理员操作弹框 -->
		<el-dialog title="信息" :visible.sync="operationDialogVisible" width="30%">
			<el-divider content-position="left">强制操作</el-divider>
			<el-row>
				<el-button type="primary" size="mini" @click="equipBtnControl('takephoto')">拍照</el-button>
				<el-button type="primary" size="mini" @click="equipBtnControl('update')">升级</el-button>
				<el-button type="primary" size="mini" @click="equipBtnControl('reboot')">重启</el-button>
				<el-button type="primary" size="mini" @click="equipBtnControl('open_shake')">震动开启</el-button>
				<el-button type="primary" size="mini" @click="equipBtnControl('close_shake')">震动关闭</el-button>
			</el-row>
			<el-divider content-position="left">板子设置</el-divider>
			<el-row>
				<el-button type="primary" size="mini">查看原始imei</el-button>
				<el-button type="primary" size="mini">更改imei</el-button>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import EquipItem from '@/components/EquipItem'
export default {
	data() {
		return {
			//图表和表格切换
			displayType: '1',
			//设备列表
			equipList: [],
			// 设备加载loading
			tableLoading : false,
			pageLoading:false,
			device_id: '',
			currid:'',//选中配置设备id
			ws: 0, //工作模式
			equipContrlForm: {
				st: '',
				et: '',
				ts: 0,
				tt: null,
				collt: null,
				htim: null,
				hst: null,
				tph: null,
				tpl: null,
				datt: null,
				imgres: 0
			},
			//参数
			queryInfo: {
				page: 1,
				is_online: '',
				f_id: '',
				ename: ''
			},
			totalNum: 0,
			//设备控制对话框
			equipControlDialogVisible: false,
			operationDialogVisible: false
		}
	},
	mounted() {
		this.getEquipList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	methods: {
		getIsOnline(data) {
			this.queryInfo.is_online = data
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getIDName(data) {
			this.queryInfo.f_id = data.f_id
			this.queryInfo.ename = data.ename
			this.queryInfo.page = 1
			this.getEquipList()
		},
		getDisplayType(data) {
			this.displayType = data
		},
		//获取设备列表
		getEquipList() {
			this.tableLoading = true;
			this.$axios({
				method: 'POST',
				url: '/api/equipmanage_cbd',
				data: this.qs.stringify({
					req: 'filter',
					page: this.queryInfo.page,
					is_online: this.queryInfo.is_online,
					ename: this.queryInfo.ename,
					f_id: this.queryInfo.f_id,
					dver: this.queryInfo.dver,
				})
			}).then((res) => {
				this.tableLoading = false;
				if (res.status == 200) {
					var dataArr = [];
					var dat = res.data.dat;
					for(var i = 0;i<dat.length;i++){
						dataArr.push({
							address: dat[i].locat,
							device_id: dat[i].equip_id,
							device_name: dat[i].equip_name,
							device_status: parseInt(dat[i].is_online),
							status_time: dat[i].upl_time,
						})
					}
					this.equipList = dataArr
					this.totalNum = res.data.nums
				}
			},error =>{
				this.dataloading = false
				this.$message.error('获取失败')
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getEquipList()
		},
		// 数据详情
		dataDetails(e_id, name,address) {
			this.device_id = e_id
			this.$router.push({path:`/index/cbdDataDetails`,query:{id:e_id,name,address}})
		},
		// 查看图片
		viewPhotoDialog(id,d_id) {
			this.device_id = id
			this.$router.push({path:`/index/cbdDataPhotos/${id}`,query: {d_id:d_id}})
		},
		//设备控制
		EquipControl(id) {
			this.currid = id;
			this.pageLoading = true;
			this.$axios({
				method: 'POST',
				url:
					'/api/cbd_mqtt',
				data: this.qs.stringify({ 
					req: 'read',
					topicid: id,
					kind: 'paramconf',
				})
			}).then((res) => {
				if(res.data == 0){
					setTimeout(() => {
						this.$axios({
							method: 'POST',
							url:
								'/api/equipmanage_cbd',
							data: this.qs.stringify({
								req: 'paramconf',
								id: id,
							})
						}).then((res) => {
							this.pageLoading = false;
							if(res.data.paramconf){
								this.equipContrlForm =  eval('('+res.data.paramconf+')')
							}else{
								this.equipContrlForm = {
									collt: 10,
									datt: 20,
									et: 6,
									hst: 85,
									htim: 10,
									shake: 0,
									shake_sec: 1,
									st: 20,
									tph: 70,
									tpl: 5,
									ts: 1,
									tt: 8,
									imgres:1
								 }
							}
							this.equipControlDialogVisible = true
							
						},error => {
							this.pageLoading = false;
							this.$message({
								type: 'error',
								message: '请求失败'
							})
						})
						
					},3000)
				}
			},error => {
				this.pageLoading = false;
				this.$message({
					type: 'error',
					message: '请求失败'
				})
			})
		},
		//设备控制提交
		equipControlSubm() {
			var dat = {
				dropTime:this.equipContrlForm.collt,
				dataUpTime:this.equipContrlForm.datt,
				end:this.equipContrlForm.et,
				calefactionTemperature:this.equipContrlForm.hst,
				calefactionTime:this.equipContrlForm.htim,
				begin:this.equipContrlForm.st,
				highLimit:this.equipContrlForm.tph,
				lowLimit:this.equipContrlForm.tpl,
				timing:this.equipContrlForm.ts,
				timingLength:this.equipContrlForm.tt,
				imgres:this.equipContrlForm.imgres,
				id:this.currid,
				req:'set'
			}
			this.$axios({
				method: 'POST',
				url: '/api/cbd_mqtt',
				data: this.qs.stringify(dat)
			}).then((res) => {
				if (res.data==0) {
					this.$message.success('设备控制修改成功')
					this.equipControlDialogVisible = false
				} else {
					this.$message.error('设备控制修改失败')
				}
			})
		},
		resetEquipControlDialogClosed() {
			this.$refs.equipContrlRef.resetFields()
			this.ws = 0
		},
		//害虫统计
		showTimeControlDialog(id,name,address) {
			this.device_id = id
			console.log(name)
			console.log(address)
			this.$router.push({path:'/index/pestsStats/',query:{id:id,name:name,address:address}})
		},
		//设备控制->工作模式切换
		wsChange() {
			this.$confirm('确定修改工作模式?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=forecast.send_control.device_control',
						data: this.qs.stringify({
							device_type_id: 3,
							d_id: this.d_id,
							work_type: this.ws
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '修改成功!'
							})
						} else {
							this.$message({
								type: 'error',
								message: res.data.message
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消修改'
					})
				})
		},
		equipOperation(d_id) {
			this.d_id = d_id
			this.operationDialogVisible = true
		},
		equipBtnControl(cmd) {
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=forecast.send_control.admin_device_control',
				data: this.qs.stringify({
					cmd,
					device_type_id: 3,
					d_id: this.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},
	},
	components: {
		SearchBar,
		EquipItem
	}
}
</script>
<style lang="less" scoped>
.handAddForm {
	/deep/.el-form-item {
		margin-bottom: 8px;
	}
	.handAddFormBtn {
		text-align: right;
	}
}
.sliderParent {
	display: flex;
	.block {
		flex: 1;
		margin-right: 10px;
		/deep/.el-slider__runway,
		/deep/.el-slider__bar {
			height: 10px;
		}
	}
	> span {
		width: 40px;
	}
}
.swi-box {
	text-align: center;
	padding: 10px 0;
	label {
		color: #333;
		margin-right: 8px;
		font-size: 14px;
	}
	i.el-icon-edit {
		margin-right: 8px;
	}
}

.real-time {
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 20px 0;
	.left {
		margin-right: 10px;
		.icon-box {
			border-radius: 50%;
			width: 46px;
			height: 46px;
			padding: 5px;
			box-sizing: border-box;
			margin-bottom: 3px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.aisle {
			text-align: center;
			font-size: 14px;
			color: #666;
		}
	}
	.right {
		color: #333;
		.num {
			font-weight: 600;
			font-size: 20px;
			margin-bottom: 3px;
		}
		.unit {
			font-size: 14px;
			color: #666;
		}
	}
}
.checkData {
	text-align: right;
	font-size: 14px;
	span {
		cursor: pointer;
	}
}
.red {
	color: rgb(235, 103, 101);
}
.green {
	color: rgb(23, 187, 137);
}
.el-date-editor--time-select {
	width: 100% !important;
}
.el-form .line {
	text-align: center;
}
.el-select {
	width: 100%;
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>
