<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/cbd' }"
				>虫情测报</el-breadcrumb-item
			>
			<el-breadcrumb-item>查看图片</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="check-btns">
			<div class="type-check">
				<el-button type="primary" size="mini" @click="equipStatusCheck('0')"
					>拍照</el-button
				>
				<el-button type="primary" size="mini" @click="equipStatusCheck('1')"
					>刷新</el-button
				>
				<template v-if="userType == 1">
					<el-button
						v-if="delBtnState"
						type="primary"
						size="mini"
						@click="equipStatusCheck('2')"
						>批量删除</el-button
					>
					<el-button
						v-if="!delBtnState"
						type="primary"
						size="mini"
						@click="equipStatusCheck('3')"
						>删除</el-button
					>
					<el-button
						v-if="!delBtnState"
						size="mini"
						@click="equipStatusCheck('4')"
						>取消</el-button
					>
					<el-button type="primary" size="mini" @click="equipStatusCheck('5')"
						>一键删除</el-button
					>
				</template>
				<el-button type="primary" size="mini" @click="equipStatusCheck('6')"
					>短信预警</el-button
				>
			</div>
			<div class="search-box">
				<el-date-picker
					size="mini"
					v-model="timeRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="DateChange"
				></el-date-picker>
			</div>
		</div>
		<el-row :gutter="30" id="viewerDom" v-viewer v-if="imgListShow">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="8"
				:xl="6"
				v-for="(item, index) in imgDataList"
				:key="index"
			>
				<div class="photoItem">
					<div class="photoInfo">
						<span>{{ item.addtime | formatTime }}</span>
						<template v-if="userType == 1">
							<i
								class="iconfont icon-shanchu"
								v-show="delBtnState"
								@click="delectImg(item.addr)"
							></i>
							<el-checkbox
								v-show="!delBtnState"
								v-model="item.checked"
							></el-checkbox>
						</template>
					</div>
					<div class="photoImg">
						<img :src="'api/' + item.addr" @error="errImg" alt />
					</div>
					<div class="photoCtrl">
						<div @click="handAddFun(item)">
							<i class="icon-zhuti_tiaosepan_o iconfont"></i>
							手动添加
						</div>
						<div @click="handAddDataFun(item)">
							<i class="icon-zhuti_tiaosepan_o iconfont"></i>
							手动统计
						</div>
						<div @click="discernFun(item)">
							<i class="icon-zhuti_tiaosepan_o iconfont"></i>
							识别统计
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div class="expertDiagnosis_referral_units_not" v-else>
			<img
				src="@/assets/images/zanwu.png"
				alt
				class="expertDiagnosis_referral_units_notImg"
			/>
		</div>
		<el-pagination
			v-if="imgListShow"
			background
			layout="prev, pager, next"
			:total="totalNum"
			@current-change="changePage"
			:current-page="queryInfo.page"
			:page-size="12"
		></el-pagination>

		<!-- 自动识别对话框 -->
		<el-dialog title="识别结果" :visible.sync="discernVisible" width="30%">
			<div v-loading="loading">
				<!-- <img :src="this.recognitionImage" width="100%" alt /> -->
				<img
					:src="this.recognitionImage"
					style="width: 536px; height: 302px"
					alt
				/>
			</div>
			<div>
				<div
					class="discernResult"
					v-for="(item, index) in this.recognitionData"
					:key="index"
				>
					<div class="name">
						<i class="icon-zhuti_tiaosepan_o"></i>
						害虫名称
						<span>{{ item.result_list }}（序号：23）</span>
					</div>
					<div class="number">
						害虫个数：
						<span>{{ item.nums }}</span>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 手动添加对话框 -->
		<el-dialog :title="this.tltName" :visible.sync="handAddVisible" width="30%">
			<div class="handAddBtn" v-show="handAddState == 1">
				<!-- <i class="iconfont icon-zhuti_tiaosepan_o" @click="handAddState=2"></i>
				<i class="iconfont icon-zhuti_tiaosepan_o" @click="handAddState=3"></i>-->
				<i
					class="iconfont el-icon-circle-plus-outline"
					@click="handAddState = 2"
				></i>
				<i
					class="iconfont el-icon-remove-outline"
					@click="handAddState = 3"
				></i>
			</div>
			<div class="handAddForm" v-show="handAddState == 1">
				<el-form ref="ruleForm" :model="form" label-width="80px">
					<el-form-item label="害虫名称">
						<!-- <el-select v-model="form.region" placeholder="请选择害虫名称"> -->
						<el-select v-model="form.pest_name" placeholder="请选择害虫名称">
							<el-option
								v-for="(item, index) in this.reInsectList"
								:key="item.pest_name"
								:label="item.pest_name"
								:value="item.pest_name"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="害虫数量">
						<!-- <el-input type="number" v-model="form.name"></el-input> -->
						<!-- <el-input type="number" v-model="form.nums"></el-input> -->
						<el-input type="number" v-model="form.pest_num"></el-input>
					</el-form-item>
					<el-form-item label="作物种类">
						<!-- <el-input v-model="form.name"></el-input> -->
						<!-- <el-input v-model="form.type"></el-input> -->
						<el-input v-model="form.crop_name"></el-input>
					</el-form-item>
					<el-form-item label="虫害阶段">
						<!-- <el-input v-model="form.name"></el-input> -->
						<el-input v-model="form.pest_case"></el-input>
					</el-form-item>
					<el-form-item class="handAddFormBtn">
						<el-button type="primary" @click="onSubmit">确定</el-button>
						<el-button
							@click=";(handAddVisible = false), resetField('ruleForm')"
							>取消</el-button
						>
					</el-form-item>
				</el-form>
			</div>
			<div v-show="handAddState == 2">
				<el-page-header
					@back=";(handAddState = 1), getBack()"
					content
				></el-page-header>
				<div class="handAddWormName">
					<label>害虫名称：</label>
					<el-input
						placeholder="请输入新增的害虫名称"
						v-model="selectItem"
						clearable
					></el-input>
				</div>
				<div class="handAddWormNameBtn">
					<el-button size="small" type="primary" @click="addInsectName()"
						>确定</el-button
					>
					<el-button size="small" @click="handAddVisible = false"
						>取消</el-button
					>
				</div>
			</div>
			<div v-show="handAddState == 3">
				<el-page-header @back="handAddState = 1" content></el-page-header>
				<div class="handDelWormName">
					<el-checkbox-group v-model="checkList">
						<el-checkbox
							v-for="(item, index) in this.reInsectList"
							:key="index"
							:label="item.pest_name"
						></el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="handDelWormNameBtn">
					<el-button size="small" type="primary" @click="delInsect()"
						>确定</el-button
					>
					<el-button size="small" @click="handAddVisible = false"
						>取消</el-button
					>
				</div>
			</div>
		</el-dialog>
		<!-- 手动统计对话框 -->
		<el-dialog title="手动统计" :visible.sync="handAddDataVisible" width="40%">
			<el-table
				:data="threshold"
				stripe
				style="width: 100%"
				ref="multipleTable"
				@row-click="handleEdit"
			>
				<el-table-column prop="pest_name" label="害虫名称"></el-table-column>
				<el-table-column prop="pest_num" label="数量"></el-table-column>
				<el-table-column prop="crop_name" label="作物种类"></el-table-column>
				<el-table-column prop="pest_case" label="虫害阶段"></el-table-column>
				<el-table-column label="操作" width="150">
					T
					<template slot-scope="scope">
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="mini"
							@click="showThresholdEditDialog()"
						></el-button>
						<el-button
							icon="el-icon-delete"
							size="mini"
							@click="showThresholdEditDel(scope.row)"
						></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 设置阈值信息弹框 -->
		<el-dialog
			title="阈值设置"
			:visible.sync="thresholdSetDialogVisible"
			width="30%"
		>
			<el-form label-width="62px" :model="thresholdSetData">
				<el-form-item label="最大值">
					<el-input v-model="thresholdSetData.max"></el-input>
				</el-form-item>
				<el-form-item label="最小值">
					<el-input v-model="thresholdSetData.min"></el-input>
				</el-form-item>
				<el-form-item label="规则">
					<el-radio-group v-model="thresholdSetData.rule">
						<el-radio label="1">程序一</el-radio>
						<el-radio label="2">程序二</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="thresholdSetDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="thresholdSetDialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 定时控制对话框 -->
		<el-dialog
			title="定时控制"
			:visible.sync="timeControlDialogVisible"
			width="40%"
		>
			<el-table :data="timeControl" stripe style="width: 100%">
				<el-table-column prop="name" label="开关"></el-table-column>
				<el-table-column prop="num" label="通道号"></el-table-column>
				<el-table-column prop="time" label="起始时间"></el-table-column>
				<el-table-column prop="duration" label="工作时长"></el-table-column>
				<el-table-column label="状态" width="100">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.state"
							active-color="#17BB89"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="mini"
							@click="showTimeControlEditDialog(scope.row.id)"
						></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 定时控制设置对话框 -->
		<el-dialog
			title="定时设置"
			:visible.sync="timeControlSetDialogVisible"
			width="40%"
		>
			<el-form
				label-width="100px"
				:model="thresholdSetData"
				class="demo-dynamic"
			>
				<el-form-item label="起始时间">
					<el-input
						v-model="thresholdSetData.max"
						placeholder="请输入起始时间"
					></el-input>
					<span>时间范围(0-23)</span>
				</el-form-item>
				<el-form-item label="工作时长">
					<el-input
						v-model="thresholdSetData.min"
						placeholder="请输入工作时长"
					></el-input>
					<span>时间范围(1-24)</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="thresholdSetDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="thresholdSetDialogVisible = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			loading: false, //识别结果加载
			tltName: '', //弹出层标题名
			id: this.$route.params.id,
			//在线状态按钮切换
			equipStatus: '0',
			//设备列表
			equipList: [
				{
					imei: 8656506557,
					equip_name: '',
					is_online: '1',
					dver: 1,
					upl_time: '2020-04-15 13:19:05',
					position: '福建省'
				},
				{
					imei: 8656500443634,
					equip_name: '',
					is_online: '1',
					dver: 2,
					upl_time: '2020-04-15 13:19:05',
					position: '福建省'
				},
				{
					imei: 8656500426546,
					equip_name: 'cbd',
					is_online: '0',
					dver: 3,
					upl_time: '2020-04-15 13:19:05',
					position: '福建省'
				},
				{
					imei: 8656500424252,
					equip_name: 'cbd',
					is_online: '0',
					dver: 1,
					upl_time: '2020-04-15 13:19:05',
					position: '福建省'
				}
			],
			delBtnState: true,
			handAddState: 1,
			checkList: [],
			//参数
			f_id: '',
			ename: '',
			page: 1,
			timeRange: '',
			dver: '',
			// 设备点击高亮
			highlight: '',
			currImei: '',

			itemId: '',
			selectItem: '', //1设备号，2用户名
			searchVal: '',
			form: {
				// name: '',
				pest_num: '', //害虫数量
				crop_name: '', //作物种类
				pest_case: '', //虫害阶段
				pest_name: '' //害虫名称
				// date1: '',
				// date2: '',
				// delivery: false,
				// type: [],
				// resource: '',
				// desc: ''
			},

			//设备列表

			queryInfo: {
				begin: '',
				end: '',
				page: 1,
				is_online: '',
				dver: ''
			},
			// queryInfo:{
			//     page:1,
			//     searchId:'',
			// },
			totalNum: 0,
			//自动识别对话框
			discernVisible: false,
			//手动添加对话框
			handAddVisible: false,
			//手动统计添加对话框
			handAddDataVisible: false,
			//手动控制开关
			value: false,
			//手动控制数据
			handControlSwitch: [],
			// 手动控制-获取到当前点击行的数据
			handleEditData: '',
			//阈值控制对话框
			thresholdDialogVisible: false,
			//编辑阈值信息对话框
			thresholdSetDialogVisible: false,
			thresholdSetData: {
				max: '',
				min: '',
				rule: '1'
			},
			//定时控制对话框
			timeControlDialogVisible: false,
			//定时控制设置对话框
			timeControlSetDialogVisible: false,
			// 实时状态数据
			reaTimeStatusList: [],
			//手动统计数据
			threshold: [],
			//定时控制
			timeControl: [
				{
					id: 1,
					name: '开关一',
					num: 'e1',
					time: '2020',
					duration: 2,
					state: true
				}
			],
			// 实时状态背景色
			bgColor: ['#61b2f0', '#e86a84', '#50c05d', '#f3b00f', '#b97ec0'],
			imgDataList: [], //图片列表数据
			imgListShow: true, //图片列表数据是否显示
			reInsectList: [], //手动添加害虫名称列表数据
			addFunData: {}, //点击获取到的当前图片数据
			recognitionData: [], //识别出的数据
			recognitionImage: '', //识别出的图片
			addrlist: [],
			timeRange: [] //筛选时间数据
		}
	},
	mounted() {
		// this.getEquipList();
		// this.getList()
		// this.magnifyPhoto();

		this.imgListData() //图片列表数据请求
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	watch: {
		// 手动添加弹出层监测
		handAddVisible(val) {
			if (val == false) {
				this.handAddState = 1 //显示手动添加首页
				this.selectItem = '' //清空害虫名称添加input中的数据
				this.checkList = [] //清空害虫名称删除多选中的数据
				this.form.pest_num = ''
				this.form.crop_name = ''
				this.form.pest_case = ''
				this.form.pest_name = ''
			}
		},

		// 识别结果弹出层监测
		discernVisible(val) {
			if (val == false) {
				this.recognitionData = []
				this.recognitionImage = ''
			}
		},

		// 批量刷新监测
		delBtnState(val) {
			if (val == true) {
				this.addrlist = []
			}
		}
	},
	methods: {
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/noData.jpg')
		},

		//在线状态选择
		equipStatusCheck(flag) {
			this.active = flag
			// this.getEquipList();
			if (flag == 0) {
				//拍照
				this.equipBtnControl('takephoto')
			}
			if (flag == 1) {
				this.imgListData() //图片列表数据请求
			}
			if (flag == 2) {
				this.delBtnState = false
			}
			// if (flag == 3 || flag == 4) {
			// 	this.delBtnState = true
			// 	this.addrlist = this.imgDataList
			// 		.filter((item) => {
			// 			return item.checked == true
			// 		})
			// 		.map((item) => {
			// 			return item.addr
			// 		})
			// 	if (this.addrlist.length == 0) {
			// 		console.log(this.addrlist.length)
			// 		this.$message.warning('请选择要删除的设备！')
			// 	} else {
			// 		console.log(this.addrlist.length)
			// 		this.delImgFun(this.addrlist)
			// 	}
			// }

			if (flag == 3) {
				this.delBtnState = true
				this.addrlist = this.imgDataList
					.filter((item) => {
						return item.checked == true
					})
					.map((item) => {
						return item.addr
					})
				if (this.addrlist.length == 0) {
					console.log(this.addrlist.length)
					this.$message.warning('请选择要删除的设备！')
				} else {
					console.log(this.addrlist.length)
					this.delImgFun(this.addrlist)
				}
			}

			if (flag == 4) {
				this.imgDataList.map((item) => {
					item.checked = false
				})
				this.delBtnState = true
				// this.$message({
				// 	type: 'info',
				// 	message: '已取消删除'
				// })
			}

			if (flag == 5) {
				this.delImgFun('')
			}
			if (flag == 6) {
				this.$router.push(`/index/messageWarn/${this.id}`)
			}
		},
		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.$route.query.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},
		DateChange() {
			this.queryInfo.page = 1
			if (this.timeRange) {
				this.queryInfo.begin = parseInt(
					new Date(this.timeRange[0]).getTime() / 1000
				)
				this.queryInfo.end = parseInt(
					new Date(this.timeRange[1]).getTime() / 1000
				)
			} else {
				this.queryInfo.begin = ''
				this.queryInfo.end = ''
			}
			this.imgListData()
		},

		//改变page
		changePage(val) {
			this.queryInfo.page = val
			// this.imgListData(val)
			this.imgListData()
		},
		// 搜索组合数据
		searchEquipList() {
			if (this.selectItem == 1) {
				this.f_id = this.searchVal
			} else if (this.selectItem == 2) {
				this.ename = this.searchVal
			}
			// this.getEquipList();
		},
		// 数据详情
		dataDetails(id) {
			this.highlight = 0
			this.currImei = id
			this.$router.push(`/cbdDataDetails/${id}`)
		},
		// 图片放大
		magnifyPhoto() {
			//具体需要哪些配置可参照下表
			const ViewerDom = document.querySelector('#viewerDom')
			this.viewer = new Viewer(ViewerDom, {
				initialViewIndex: 0,
				button: true, //右上角关闭按钮
				navbar: 2,
				title: 0,
				toolbar: 0,
				keyboard: false,
				ready: function (e) {
					console.log(e.type)
				},
				show: function (e) {
					console.log(e.type)
				},
				shown: function (e) {
					console.log(e.type)
				},
				hide: function (e) {
					console.log(e.type)
				},
				hidden: function (e) {
					console.log(e.type)
				},
				view: function (e) {
					console.log(e.type)
				},
				viewed: function (e) {
					console.log(e.type)
				},
				zoom: function (e) {
					console.log(e.type)
				},
				zoomed: function (e) {
					console.log(e.type)
				}
			})
		},
		//手动添加
		handAddFun(data) {
			this.handAddVisible = true
			this.addFunData = data
			this.tltName = '手动添加'
			this.InsectListData() //手动添加弹框中害虫名称列表数据
		},
		// 手动统计
		handAddDataFun(data) {
			this.handAddDataVisible = true
			this.addFunData = data
			this.statisticsData(data.addr) //请求图片描述
		},
		//识别
		discernFun(data) {
			// this.addFunData = data
			this.discernVisible = true
			this.loading = true
			this.discernFunData(data)
		},

		// 识别数据请求
		discernFunData(data) {
			let that = this
			let postData = that.qs.stringify({
				addr: data.addr
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/api_gateway?method=forecast.forecast_system.equip_photo_discern',
					data: postData
				})
				.then((res) => {
					that.loading = false
					if (res.data.message == '') {
						//识别成功
						that.recognitionData = res.data.data.result //数组数据
						that.recognitionImage = res.data.data.image //图片
					} else {
						//识别失败
						this.$message({
							showClose: true,
							message: res.data.message,
							type: 'error'
						})
						this.discernVisible = false
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 处理数据进行渲染
		disposeData(data) {},
		//获取手动控制开关数据
		handControlSwitchList(id) {
			this.$axios({
				method: 'POST',
				url: '/qxz_status',
				data: this.qs.stringify({ e_id: id })
			})
				.then((res) => {
					if (
						res.data.qxz_switch &&
						eval('(' + res.data.qxz_switch + ')').length > 0
					) {
						let qxz_switch = eval('(' + res.data.qxz_switch + ')')
						let arr = new Array()
						for (let item1 of qxz_switch) {
							let obj = {}
							if (
								res.data.switch_name &&
								eval('(' + res.data.switch_name + ')').length > 0
							) {
								let switch_name = eval('(' + res.data.switch_name + ')')
								for (let item2 of switch_name) {
									if (item1.JK == item2.JK) {
										if (item2.name) {
											obj.name = item2.name
										} else {
											obj.name = `开关${Number(item1.JK) + 1}`
										}
										obj.status = item1.status
									}
								}
							} else {
								obj.name = `开关${Number(item1.JK) + 1}`
								obj.status = item1.status
							}
							arr.push({
								name: obj.name,
								status: obj.status
							})
						}
						this.handControlSwitch = arr
					} else {
						this.handControlSwitch = []
					}
				})
				.catch(() => {
					this.$message.error('获取数据失败!')
				})
		},
		//获取实时状态列表
		getReaTimeStatusList(id) {
			// this.queryInfo.serachId=id;
			this.$axios({
				method: 'POST',
				url: '/qxz_status',
				data: this.qs.stringify({ e_id: id })
			})
				.then((res) => {
					if (res.data) {
						let arr = new Array()
						for (let i1 in res.data.conf) {
							if (res.data.conf[i1]) {
								let arr2 = res.data.conf[i1].split('#')
								let obj = {}
								obj.e = '通道' + i1.slice(1)
								obj.name = arr2[0]
								obj.unit = arr2[1]
								for (let i2 in res.data.dat) {
									if (i1 == i2) {
										let arr3 = res.data.dat[i2].split('#')
										obj.num = arr3[0]
										obj.icon = arr3[1]
										arr.push({
											e: obj.e,
											icon: obj.icon,
											name: obj.name,
											num: obj.num,
											unit: obj.unit
										})
									}
								}
							}
						}
						this.reaTimeStatusList = arr
					}
				})
				.catch(() => {
					this.$message.error('获取数据失败！')
				})
		},
		//设备信息数据
		getList(id) {
			this.$axios({
				method: 'POST',
				url: 'qxz_base_view',
				data: { imei: id }
			}).then((res) => {})
		},
		modifyName() {},

		// 手动控制弹框
		lookPhoto(id) {
			this.highlight = 1
			this.currImei = id
			this.$router.push(`/cbdDataDetails/${id}`)
		},
		//阈值控制
		showThresholdDialog(id) {
			this.highlight = 3
			this.currImei = id
			this.thresholdDialogVisible = true
		},
		//获取到当前点击行的数据
		handleEdit(row) {
			this.handleEditData = row
		},
		//编辑手动统计害虫信息
		showThresholdEditDialog() {
			let that = this
			that.tltName = '编辑'
			that.handAddVisible = true
			var timer = setTimeout(() => {
				that.form.pest_name = that.handleEditData.pest_name //害虫名称
				that.form.pest_num = that.handleEditData.pest_num //害虫数量
				that.form.crop_name = that.handleEditData.crop_name //作物种类
				that.form.pest_case = that.handleEditData.pest_case //虫害阶段
				that.InsectListData() //获取害虫列表数据
			}, 1000)
		},
		// 删除手动统计害虫信息
		showThresholdEditDel() {
			let that = this
			that
				.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					let postData = that.qs.stringify({
						ret: 'del_desc',
						img_name: that.addFunData.addr, //图片链接
						photo_time: that.addFunData.addtime, //图片时间
						describe: JSON.stringify(that.handleEditData), //图片描述
						device_id: that.addFunData.device_id, //设备号
						id: that.handleEditData.id
					})
					that
						.$axios({
							method: 'post',
							url:
								'/api/api_gateway?method=forecast.forecast_system.equip_photo_describe',
							data: postData
						})
						.then((res) => {
							var data = res.data.data
							if (data == true && res.data.message == '') {
								//成功
								this.$message({
									message: '删除成功',
									type: 'success',
									duration: 1500
								})
								// that.resetField('ruleForm')
								that.statisticsData(that.addFunData.addr)
							} else if (data == null && res.data.message !== '') {
								//失败
								this.$message.error({
									message: res.data.message,
									duration: 1500
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
				})
				.catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},

		//编辑定时控制信息
		showTimeControlEditDialog(id) {
			this.highlight = 3
			this.currImei = id
			this.timeControlSetDialogVisible = true
		},
		//定时控制弹框
		showTimeControlDialog(id) {
			this.highlight = 2
			this.currImei = id
			this.timeControlDialogVisible = true
		},
		//跳转到历史数据页面
		goHistoryData(id) {
			this.highlight = 4
			this.currImei = id
			// this.$router.push(`/historyData/${id}`);
		},
		//手动控制自定义名称
		handControlModifyName(id) {
			this.$prompt('', '自定义名称', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {
					this.$message({
						type: 'success',
						message: '自定义名称是: ' + value
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		//查看24小时数据
		check24Data(id) {
			this.$router.push(`/data24/${this.itemId}`)
		},

		//图片列表数据请求
		imgListData() {
			let that = this
			let id = that.$route.params.id
			let postData = that.qs.stringify({
				device_id: id,
				// device_id: '300142',
				page: that.queryInfo.page,
				ret: 'list',
				time_begin: this.queryInfo.begin, //开始时间（时间戳）
				time_end: this.queryInfo.end //结束时间（时间戳）
			})
			that
				.$axios({
					method: 'post',
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo', //forecast.forecast_system.equip_photo
					data: postData
				})
				.then((res) => {
					var nums = res.data.data.num
					that.totalNum = nums
					if (nums == 0) {
						that.imgListShow = false
					} else if (nums !== 0) {
						that.imgListShow = true
						that.imgDataList = res.data.data.data
						this.$message.success('请求最新图片成功！')
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		//手动添加弹框确定事件
		onSubmit() {
			let that = this
			if (that.tltName == '编辑') {
				let postData = that.qs.stringify({
					ret: 'change_dsec',
					img_name: that.addFunData.addr, //图片链接
					photo_time: that.addFunData.addtime, //图片时间
					describe: JSON.stringify(that.form), //图片描述
					device_id: that.addFunData.device_id, //设备号
					id: that.handleEditData.id
				})
				that
					.$axios({
						method: 'post',
						url:
							'/api/api_gateway?method=forecast.forecast_system.equip_photo_describe',
						data: postData
					})
					.then((res) => {
						var data = res.data.data
						if (data == true && res.data.message == '') {
							//成功
							this.$message({
								message: '修改成功',
								type: 'success',
								duration: 1500
							})
							that.handAddVisible = false
							// that.resetField('ruleForm')
							that.statisticsData(that.addFunData.addr)
						} else if (data == null && res.data.message !== '') {
							//失败
							this.$message.error({
								message: res.data.message,
								duration: 1500
							})
						}
					})
					.catch((err) => {
						console.log(err)
					})
			} else if (that.tltName == '手动添加') {
				let postData = that.qs.stringify({
					ret: 'add_desc',
					img_name: that.addFunData.addr, //图片链接
					photo_time: that.addFunData.addtime, //图片时间
					describe: JSON.stringify(that.form), //图片描述
					device_id: that.addFunData.device_id //设备号
				})
				that
					.$axios({
						method: 'post',
						url:
							'/api/api_gateway?method=forecast.forecast_system.equip_photo_describe',
						data: postData
					})
					.then((res) => {
						var data = res.data.data
						if (data == true && res.data.message == '') {
							//成功
							this.$message({
								message: '添加成功',
								type: 'success',
								duration: 1500
							})
							that.handAddVisible = false
							that.resetField('ruleForm')
						} else if (data == null && res.data.message !== '') {
							//失败
							this.$message.error({
								message: res.data.message,
								duration: 1500
							})
						}
					})
					.catch((err) => {
						console.log(err)
					})
			}
		},

		// 手动添加重置、
		resetField(formName) {
			this.$refs[formName].resetFields()
		},

		// 手动添加弹框害虫名称添加事件
		addInsectName() {
			let that = this
			//判断值是否为空
			if (that.selectItem == '') {
				this.$message.error({
					message: '害虫名称不能为空！！',
					duration: 1500
				})
			} else if (that.selectItem !== '') {
				let postData = that.qs.stringify({
					ret: 'add_pest',
					pest: this.selectItem, //害虫名称
					addr: '' //图片链接
				})
				that
					.$axios({
						method: 'post',
						url:
							'/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
						data: postData
					})
					.then((res) => {
						var data = res.data.data
						if (data !== null && res.data.message == '') {
							that.selectItem = ''
							this.$message({
								message: '添加成功',
								type: 'success',
								duration: 1500
							})
						} else if (data == null && res.data.message !== '') {
							this.$message.error({
								message: res.data.message,
								duration: 1500
							})
						}
					})
					.catch((err) => {
						console.log(err)
					})
			}
		},

		// 获取害虫名称列表数据接口
		InsectListData() {
			let that = this
			let postData = that.qs.stringify({
				ret: 'pest_list',
				pest: '',
				addr: ''
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: postData
				})
				.then((res) => {
					that.reInsectList = res.data.data
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 手动添加害虫名称删除接口
		delInsect() {
			let that = this
			let postData = that.qs.stringify({
				ret: 'del_pest',
				pest: JSON.stringify(that.checkList),
				addr: ''
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: postData
				})
				.then((res) => {
					var data = res.data.data
					if (data && res.data.message == '') {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						})
						that.handAddState = 1
						that.getBack() //重新请求害虫名称数据
					} else if (data == null && res.data.message == '删除失败') {
						this.$message.error({
							message: '删除失败',
							duration: 1500
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 手动添加害虫名称点击返回事件
		getBack() {
			this.InsectListData()
		},

		// 手动统计
		statisticsData(img) {
			let that = this
			let postData = that.qs.stringify({
				ret: 'photo_desc',
				pest: '',
				addr: img
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: postData
				})
				.then((res) => {
					if (res.data.data.length !== '') {
						that.threshold = res.data.data
					} else {
						console.log('暂无数据')
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 单个删除列表数据
		delectImg(addr) {
			this.delImgFun([addr])
		},

		// 批量或单个删除
		delImgFun(addrlist) {
			this.$confirm('此操作将永久删除该设备图片, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url:
							'/api/api_gateway?method=forecast.forecast_system.equip_photo_del',
						data: this.qs.stringify({
							device_id: this.id,
							addrlist: JSON.stringify(addrlist)
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.imgListData() //图片列表数据请求
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		}

		// 短信预警
	},
	filters: {
		unitFormat(value) {
			return `(${value})`
		}
	}
}
</script>
<style lang="less" scoped>
.check-btns {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	align-items: center;
	.el-select {
		width: 90px;
	}
}
.photoItem {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	&:hover {
		.photoInfo {
			i {
				display: block;
			}
		}
	}
	.photoInfo {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: flex;
		justify-content: space-between;
		span {
			color: #fff;
		}
		i {
			cursor: pointer;
			color: red;
			display: none;
		}
	}
	.photoImg {
		height: 250px;
		cursor: pointer;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.photoCtrl {
		background-color: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		div {
			flex: 1;
			border-right: 1px solid #d8d8d8;
			margin-bottom: 0;
			cursor: pointer;
			&:hover {
				color: #14a478;
			}
		}
		.el-col:last-child {
			border-right: none;
		}
	}
}
.handAddBtn {
	position: absolute;
	right: 6%;
	top: 21%;
	i {
		font-size: 28px;
		cursor: pointer;
	}
}
.handAddForm {
	.el-form {
		width: 83%;
	}
	.el-select {
		width: 100%;
	}
	.handAddFormBtn {
		text-align: right;
	}
}
.discernResult {
	display: flex;
	justify-content: space-between;
	line-height: 30px;
	padding: 3px 37px;
	.name {
		font-size: 14px;
		i {
			font-size: 20px;
			font-weight: bold;
		}
		i,
		span {
			color: #14a478;
		}
	}
	.number {
		span {
			color: #14a478;
		}
	}
}
.handAddWormName {
	display: flex;
	align-items: center;
	margin: 20px 0 20px;
	label {
		width: 100px;
	}
}
.handAddWormNameBtn,
.handDelWormNameBtn {
	text-align: right;
}
.handDelWormName {
	margin: 20px 0 20px;
	.el-checkbox {
		width: 26%;
		margin-bottom: 10px;
	}
}

// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
	.expertDiagnosis_referral_units_notImg {
	}
}

// elementui加载样式
</style>
