<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
					>
				</template>
			</div>
			<div class="search-box">
				<el-date-picker
					size="mini"
					v-model="timeRange"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					@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 }}</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">
						<template v-if="item.addr.slice(0,4) == 'http'">
							<img :src="item.addr" @error="errImg" alt />
						</template>
						<template v-else>
							<img :src="'api/' + item.addr" @error="errImg" alt />
						</template>
					</div>
					<div class="photoCtrl">
						<!-- <div @click="handAddFun(item)">
							手动添加
						</div>
						<div @click="handAddDataFun(item)">
							手动统计
						</div> -->
						<div v-if="disc==1" @click="discernFun(item)">
							识别统计
						</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>
	</div>
</template>
<script>
export default {
	data() {
		return {
			loading: false, //识别结果加载
			tltName: '', //弹出层标题名
			id: this.$route.params.id,
			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: ''
			},
			totalNum: 0,
			disc: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.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/cbd_mqtt',
				data: this.qs.stringify({
					req: 'ctrl',
					topicid: this. id,
					cmd: 'ctrl',
					type: 'takephoto',
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('指令下发成功!')
				}
			})
		},
		DateChange() {
			this.queryInfo.page = 1
			if (this.timeRange) {
				this.queryInfo.begin = this.timeRange[0]
				this.queryInfo.end = this.timeRange[1]
			} else {
				this.queryInfo.begin = ''
				this.queryInfo.end = ''
			}
			this.imgListData()
		},

		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.imgListData()
		},


		//识别
		discernFun(data) {
			// this.addFunData = data
			this.discernVisible = true
			this.loading = true
			this.discernFunData(data)
		},

		// 识别数据请求
		discernFunData(data) {
			let that = this
			let postData = that.qs.stringify({
				img_addr: data.addr
			})
			that
				.$axios({
					method: 'post',
					url:
						'/api/pests_identification_new',
					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)
				})
		},


		//图片列表数据请求
		imgListData() {
			let that = this
			let id = that.$route.params.id
			let postData = that.qs.stringify({
				equip_id: id,
				page: that.queryInfo.page,
				time_begin: this.queryInfo.begin, //开始时间（时间戳）
				time_end: this.queryInfo.end //结束时间（时间戳）
			})
			that
				.$axios({
					method: 'post',
					url: '/api/app_cbd_img', //forecast.forecast_system.equip_photo
					data: postData
				})
				.then((res) => {
					if(res.status == 200){
						that.totalNum = res.data.nums
						that.disc = res.data.disc
						if (res.data.nums == 0) {
							that.imgListShow = false
						} else {
							that.imgListShow = true
							that.imgDataList = res.data.img
							this.$message.success('请求最新图片成功！')
						}
					}
					
				})
				.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/cbd_delete_img',
						data: this.qs.stringify({
							imei: this.id,
							addrlist: JSON.stringify(addrlist)
						})
					}).then((res) => {
						if (res.data == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							})
							this.imgListData() //图片列表数据请求
						}else{
							this.$message({
								type: 'error',
								message: '删除失败!'
							})
						}
					})
				})
				.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>
