<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>测报系统</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/index/bzy' }">孢子仪</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>
		<el-row :gutter="30" 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">
						<span>{{item.upl_time}}</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 >
							{{item.upl_time}}
						</div>
					</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-change="changePage"
		></el-pagination>
	</div>
</template>
<script>
export default {
	data() {
		return {
			totalNum: 0,
			timeRange: [],
			delBtnState: true,
			id: this.$route.params.id,
			photoList: [],
			queryInfo: {
				begin: '',
				end: '',
				page: 1
			},
			addrlist: [], //删除图片的地址数组
			photoDescDialogVisible: false
		}
	},
	mounted() {
		this.getPhoteList()
	},
	computed: {
		userType: function () {
			//获取用户类型
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	methods: {
		// 列表图片加载失败
		errImg(e) {
			e.target.src = require('@/assets/images/noData.jpg')
		},
		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/bzy_mqtt',
				data: this.qs.stringify({
					req: 'ctrl',
					topicid: this.$route.query.d_id,
					cmd: 'ctrl',
					type: 'takephoto',
				})
			}).then((res) => {
				if (res.data == 0) {
					this.$message.success('指令下发成功!')
				}
			})
		},
		getPhoteList() {
			this.$axios({
				method: 'POST',
				url: '/api/app_bzy_img',
				data: this.qs.stringify({
					equip_id: this.id,
					page: this.queryInfo.page,
				})
			}).then((res) => {
				if (res.status == 200) {
					let data = res.data.img
					console.log(this.photoList)
					this.photoList = data.map((item) => {
						item.checked = false
						return item
					})
					this.totalNum = res.data.nums
				}
			})
		},
		//改变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()
		},
		viewDes() {
			this.$prompt('图片描述', '添加详情', {
				confirmButtonText: '保存',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		delImgFun(addrlist) {
			this.$confirm('此操作将永久删除该设备图片, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url:
							'/api/bzy_delete_img',
						data: this.qs.stringify({
							imei: '300142',
							addr: addrlist[0]
						})
					}).then((res) => {
						if (res.data  == 0) {
							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;
	.el-select {
		width: 90px;
	}
}

.photoItem {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	.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: 14px;
		color: #666;
		display: flex;
		justify-content: center;
		position: relative;
		cursor: pointer;
		.el-checkbox {
			position: absolute;
			right: 10px;
		}
	}
}
.photoItem:hover {
	.photoInfo i {
		display: block;
	}
}
</style>