<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/xycb' }">性诱测报</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>
			</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="photoList.length>0">
			<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="item in photoList" :key="item.addr">
				<div class="photoItem">
					<div class="photoInfo" 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>
					</div>
					<div class="photoImg">
						<img :src="'/api/'+item.addr" />
					</div>
					<div class="photoCtrl">
						<span>{{item.addtime*1000 | formatTime}}</span>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div style="text-align:center" v-else>
			<img src="@/assets/images/zanwu.png" alt />
		</div>
		<el-pagination
			v-if="photoList.length>0"
			background
			layout="prev, pager, next"
			:total="totalNum"
			:current-page="queryInfo.page"
			@current-change="changePage"
		></el-pagination>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//在线状态按钮切换
			equipStatus: '0',
			totalNum: 0,
			timeRange: [],
			delBtnState: true,
			id: this.$route.params.id,
			photoList: [],
			queryInfo: {
				begin: '',
				end: '',
				page: 1
			},
			addrlist: []
		}
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	mounted() {
		this.getPhoteList()
	},
	methods: {
		equipStatusCheck(flag) {
			this.active = flag
			if (flag == 0) {
				//拍照
				this.equipBtnControl('takephoto')
			}
			if (flag == 1) {
				//刷新
				this.getPhoteList()
			}
			if (flag == 2) {
				this.delBtnState = false
			}
			if (flag == 3) {
				this.addrlist = this.photoList
					.filter((item) => {
						return item.checked == true
					})
					.map((item) => {
						return item.addr
					})
				if (this.addrlist.length == 0) {
					this.$message.warning('请选择要删除的设备！')
				} else {
					this.delImgFun(this.addrlist)
				}
			}
			if (flag == 4) {
				this.photoList.map((item) => {
					item.checked = false
				})
				this.delBtnState = true
			}
			if (flag == 5) {
				this.delImgFun('')
			}
		},
		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: 4,
					d_id: this.$route.query.d_id
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('指令下发成功!')
				}
			})
		},
		getPhoteList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=forecast.forecast_system.equip_photo',
				data: this.qs.stringify({
					device_id: this.id,
					ret: 'list',
					page: this.queryInfo.page,
					time_begin: this.queryInfo.begin,
					time_end: this.queryInfo.end
				})
			}).then((res) => {
				if (res.data.message == '') {
					let data = res.data.data.data
					this.photoList = data.map((item) => {
						item.checked = false
						return item
					})
					this.totalNum = res.data.data.num
					this.$message.success('请求最新图片成功！')
				}
			})
		},
		//改变page
		changePage(val) {
			this.queryInfo.page = val
			this.getPhoteList()
		},
		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.getPhoteList()
		},
		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.getPhoteList()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},
		delectImg(addr) {
			this.delImgFun([addr])
		}
	}
}
</script>
<style lang="less" scoped>
.check-btns {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	align-items: center;
}
.photoItem {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	&:hover {
		.photoInfo i {
			display: block;
		}
	}
	.photoInfo {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 999;
		span {
			color: #fff;
		}
		i {
			display: none;
			cursor: pointer;
			color: red;
		}
	}
	.photoImg {
		height: 250px;
		cursor: pointer;
		position: relative;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.photoCtrl {
		background-color: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		div {
			flex: 1;
			border-right: 1px solid #d8d8d8;
			margin-bottom: 0;
			cursor: pointer;
			&:hover {
				color: #14a478;
			}
		}
		.el-col:last-child {
			border-right: none;
		}
	}
}
</style>
