<template>
	<div style="cursor: default">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>售后模块</el-breadcrumb-item>
			<el-breadcrumb-item>报修记录</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-select
					size="small"
					v-model="queryInfo.device_type_id"
					clearable
					placeholder="请选择设备类型"
					@change="searchChange()"
				>
					<el-option label="杀虫灯" value="2"></el-option>
					<el-option label="测报灯" value="3"></el-option>
					<el-option label="智能性诱" value="4"></el-option>
					<el-option label="环境监测" value="5"></el-option>
					<el-option label="监控设备" value="6"></el-option>
					<el-option label="孢子仪" value="7"></el-option>
					<el-option label="性诱设备" value="8"></el-option>
					<el-option label="糖醋测报" value="9"></el-option>
				</el-select>
				<el-input
					style="cursor: pointer"
					size="small"
					clearable
					@change="searchChange()"
					placeholder="请输入设备ID"
					v-model="queryInfo.f_id"
				>
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
		</div>
		<template>
			<el-table :data="dataList" stripe>
				<el-table-column
					v-for="(item, index) in tableHeadTxt"
					:key="index"
					:prop="item[1]"
					:label="item[0]"
				>
				</el-table-column>
				 <el-table-column
					label="操作"
					width="200">
					<template slot-scope="scope">
						<el-button size='mini' @click="photoshow(scope.$index)" :class="[dataList[scope.$index].errorimg.length>3?'photoseebtn':'']">故障图片</el-button>
						<el-button size='mini' @click="videoshow(scope.$index)" :class="[dataList[scope.$index].errorvideo?'videoseebtn':'']" >故障视频</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<el-pagination
			v-if="dataList.length > 0"
			background
			:current-page='page'
			layout="prev, pager, next"
			:page-size="12"
			:total="totalNum"
			@current-change="changePage"
		></el-pagination>
		<!-- 查看大图 -->
		<viewer	
			v-show="imageListtstatus"
			:images="imageListtData"
			@inited="inited"
		>
			<img v-for="(src, index) in imageListtData" :src="src" :key="index" />
		</viewer>
		<!-- 查看视频 -->
		<el-dialog
			title="故障视频"
			:visible.sync="videodialogVisible"
			width="35%"
			:before-close="videohandleClose">
			<div>
				<video width="100%" :src="DOMIN+videosrc" controls autoplay></video>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {

		return {
			// 动态表头
			tableHeadTxt: [
				['设备id','device_id'],
				['设备类型','device_type'],
				['位置','addr'],
				['联系人','user'],
				['联系电话','userphone'],
				['故障原因','errordesc'],
				['上报时间','uptime'],
			],
			dataList: [],
			totalNum: 0,
			page:1,
			queryInfo:{
				device_type_id:'',
				f_id:''
			},
			imageListtstatus:false,
			imageListtData:[],
			videodialogVisible:false,
			videosrc:''
		}
	},
	mounted() {
		this.getList()
	},
	beforeMount() {},
	methods: {
		getList(){
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=after_sale.after_sale_manage.aftersale_info',
				data: this.qs.stringify({
					device_type_id:this.queryInfo.device_type_id,
					f_id:this.queryInfo.f_id,
					page:this.page
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.dataList = []
					res.data.data.data.forEach((item) => {
						item.device_type = this.equipType(item.device_type)
						item.addr = item.addr || '--'
						item.errorimg = item.errorimg || ''
						item.uptime = new Date(parseInt(item.uptime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' '); 
						this.dataList.push(item)
					});
					// this.dataList = res.data.data.data 
					this.totalNum = res.data.data.counts
				}
			})
		},
		changePage(val){
			this.page = val;
			this.getList();
		},
		equipType(value) {
			switch (value) {
				case '2':
					return '杀虫灯'
					break
				case '3':
					return '虫情测报'
					break
				case '7':
					return '孢子仪'
					break
				case '6':
					return '监控'
					break
				case '4':
					return '性诱设备'
					break
				case '5':
					return '环境监测'
					break
				case '9':
					return '糖醋测报'
					break
				default:
					return '--'
			}
		},
		searchChange(){
			this.getList()
		},
		photoshow(index){
			if(this.dataList[index].errorimg && this.dataList[index].errorimg.length>2){
				this.imageListtData = JSON.parse(this.dataList[index].errorimg)
				this.$viewer.show()
			}else{
				this.$message({
					type:'error',
					message:'暂无图片'
				})
			}
		},
		videoshow(index){
			if(this.dataList[index].errorvideo){
				this.videodialogVisible = true;
				this.videosrc = this.dataList[index].errorvideo;
			}else{
				this.$message({
					type:'error',
					message:'暂无视频'
				})
			}
		},
		inited(viewer) {
			this.$viewer = viewer
		},
		videohandleClose(){
			this.videodialogVisible = false;
			this.videosrc = ''
		}
	},
}
</script>

<style lang='less' scoped>
	.search-box{
		margin-bottom: 20px;
		.el-input{
			width: 200px;
		}
	}
	.photoseebtn{
		color: #2acdfe;
		border-color: #2acdfe;
		outline: none;
		&:hover{
			color: #2acdfe;
			border-color: #2acdfe;
			outline: none;
    		background-color: rgba(42,205,254,.07);
		}
	}
	.videoseebtn{
		color: #fbb40a;
		border-color: #fbb40a;
		outline: none;
		&:hover{
			color: #fbb40a;
			border-color: #fbb40a;
			outline: none;
    		background-color: rgba(251,180,10,.07);
		}
	}
</style>