<template>
<div style="height:80vh;overflow-y:scroll;padding-right:32px;">
	<el-form ref="form" size="mini" :model="caseDetail" label-width="120px">
		<el-form-item label="案件编号: ">
			<el-input v-model="caseDetail.case_no" disabled></el-input>
		</el-form-item>
		<el-form-item label="案件类型: ">
			<el-input v-model="caseDetail.typename" disabled></el-input>
		</el-form-item>
		<el-form-item label="案件地址: ">
			<div class="inputdiv">{{caseDetail.countyname + caseDetail.streetname + caseDetail.communityname + caseDetail.address}}</div>
		</el-form-item>
		<el-form-item label="占用土地面积: ">
			<el-input v-model="caseDetail.area" disabled></el-input>
		</el-form-item>
		<el-form-item label="案件描述: ">
			<el-input v-model="caseDetail.case_description" disabled></el-input>
		</el-form-item>
		<el-form-item label="退回原因: " v-if="caseDetail.is_improve == 1">
			<el-input v-model="caseDetail.improve_reason" disabled></el-input>
		</el-form-item>
		<el-form-item label="处理人: ">
			<el-input v-model="caseDetail.deal_username" disabled></el-input>
		</el-form-item>
		<el-form-item label="案件状态: ">
			<el-input v-model="caseDetail.handle_status_name" disabled></el-input>
		</el-form-item>
		<el-form-item label="审核状态: ">
			<el-input v-model="caseDetail.verifystatusname" disabled></el-input>
		</el-form-item>
		<el-form-item label="经纬度: ">
			<div class="inputdiv">{{caseDetail.lng}},{{caseDetail.lat}}</div>
		</el-form-item>
		<el-form-item label="无人机编号: ">
			<el-input v-model="caseDetail.drone_no" disabled></el-input>
		</el-form-item>
		<el-form-item label="上报人: ">
			<el-input v-model="caseDetail.createusername" disabled></el-input>
		</el-form-item>
		<el-form-item label="上报时间: ">
			<el-input v-model="caseDetail.createtime" disabled></el-input>
		</el-form-item>
		<el-form-item label="开始时间: ">
			<el-input v-model="caseDetail.start_time" disabled></el-input>
		</el-form-item>
		<el-form-item label="结束时间: ">
			<el-input v-model="caseDetail.end_time" disabled></el-input>
		</el-form-item>
		<el-form-item label="是否逾期: ">
			<el-input v-model="caseDetail.case_status_name" disabled></el-input>
		</el-form-item>
		<el-form-item label="现场照片: ">
			<div v-for="(src,num) in imageList" :key="num" style="position: relative;">
				<el-image
				  v-if="imageList.length>0"
				  style="width: 300px; height: 150px"
				  :src="src" 
				  :preview-src-list="imageList">
				</el-image>
				<div class="delImg" @click="delImgClick(num)">
					<i class="el-icon-close"></i>
				</div>
			</div>
	
			<el-upload
				ref="upload"
				action="string"
				accept=".png,.jpg,.docx,.xlsx,.xls"
				list-type="picture-card"
				:show-file-list="false"
				:on-preview="handlePictureCardPreview"
				:on-success="handleSuccess"
				:on-exceed="handleExceed"
				:http-request="UploadImage">
			  <i class="el-icon-plus"></i>
			</el-upload>
		</el-form-item>
		<el-form-item label="现场视频: ">
			<div style="margin-top: 10px;width: 300px;height: 150px;" v-for="(item,index) in videoList" :key="index">
				<video width="100%" height="100%" controls>
					<source :src="item" type="video/mp4">
					您的浏览器不支持Video标签。
				</video>
			</div>
		</el-form-item>
	</el-form>

	<div style="width:100%;text-align:right;height:50px;position:absolute;top:80vh;right:12px">
		<!-- <el-button type="primary" size="mini" @click="handlerComparison">地 图</el-button> -->
		<!-- <el-button type="danger" size="mini" @click="handlerCheckCase(0)">退 回</el-button>
		<el-button type="success" size="mini" @click="handlerCheckCase(1)">通 过</el-button> -->
	</div>

	<el-dialog title="案件退回" :visible.sync="showGJ" width="60%" top="60px">
		<el-input
			type="textarea"
			:rows="2"
			placeholder="请输入退回原因"
			v-model="gaijin_reasson">
		</el-input>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showGJ = false">取 消</el-button>
			<el-button type="primary" @click="submitGaiJin">确 定</el-button>
		</div>
	</el-dialog>
	
	<el-dialog title="地图" :visible.sync="showMap" width="60%" top="60px">
		<Map :defaultPosition="latLng" :picSrc="picUrl" :caseId="caseDetail.id"></Map>
	</el-dialog>
  
</div>
</template>
<script>
import {getCaseInfo} from "@/api/forms"
import {getMethodCommon, postMethodCommon } from "@/api/common";
import Map from "./Map"
let BASE_IMAGE_URL = process.env.VUE_APP_BASE_IMG_URL;
export default {
	props:['caseDetail'],
	components:{
		Map
	},
	data(){
		return {
			srcImge:[],
			imageList:[],
			videoList:[],
			showGJ: false,
			gaijin_reasson: null,
			showMap: false,
			latLng: [],
			picUrl: null,
			caseId: null
		}
	},
	watch:{
		"caseDetail":function(e){
			this.loadDetailCaseInfo();
			this.getisChenked()
		}
	},
	mounted(){
		this.loadDetailCaseInfo();
		this.getisChenked()
	},
	methods:{
		getisChenked(){
			let data = {
				id:this.caseDetail.id
			}
			getMethodCommon("/DroneCaseinfo/SetCaseChecked",data).then(res =>{
				
			})
		},
		handleSuccess(response,file,fileList){
			
		},
		handleExceed(files, fileList) {
			this.$message.warning(`只能选择一个文件`);
		},
		handlePictureCardPreview(file) {
			console.log('aaa',file)
		},
		UploadImage(param){
			let formData = new FormData()
			// formData.append('files', param.file)
			// let url = BASE_IMAGE_URL + '/api/Platform/UploadGraph'
			// postMethodCommon(url,formData).then(res =>{
			// 	this.savePic(res.result[0].filePath)
			// })
			formData.append('files', param.file)
			let url = BASE_IMAGE_URL + '/api/Platform/Upload?project=DroneEnforcement'
			postMethodCommon(url,formData).then(res =>{
				this.savePic(res.result[0].filePath)
			})

		},
		savePic(url){
			// let src = 'DroneCaseinfo/AddDroneCasePic?caseid='+this.caseDetail.id+'&path='+url
			postMethodCommon('/DroneCaseinfo/AddDroneCasePic',{caseid:this.caseDetail.id,path:url}).then(res =>{
				this.loadDetailCaseInfo()
			})
		},
		delImgClick(index){
			let imgId = this.srcImge[index].id
			let src = 'DroneCaseinfo/DeleteDroneCasePic?id='+imgId
			this.$confirm('确定删除本张图片?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				postMethodCommon(src).then(res =>{
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.loadDetailCaseInfo()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		loadDetailCaseInfo(){
			this.imageList = [];
			this.latLng = []
			getCaseInfo({id:this.caseDetail.id}).then(res=>{
				if(res.code == 200){
					let data = res.result
					this.latLng.push(res.result.info.lat,res.result.info.lng)
					this.imageList = JSON.parse(JSON.stringify(data.pics));
					this.srcImge = JSON.parse(JSON.stringify(data.pics));
					this.videoList = res.result.video_list
					for(let i=0;i<this.imageList.length;i++){
						this.imageList[i] = BASE_IMAGE_URL  +'/'+ this.imageList[i].path;
					}
					for(let i=0;i<this.videoList.length;i++){
						this.videoList[i] = BASE_IMAGE_URL +'/'+ this.videoList[i];
					}
				}
			})
		},
		handlerCheckCase(code) {
			// code  0 退回  1 通过
			let _this = this;
			if (code === 0) {
				this.showGJ = true
			} else {
				let data = {
					id: this.caseDetail.id
				}
				getMethodCommon('/DroneCaseinfo/VerfiyCaseData',data).then(res => {
					if (res.code === 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
							_this.$emit("caseReturn");
						// this.$emit('closeBack')
					} else {
						this.$message.error(res.message);
					}
				})
			}
		},
		submitGaiJin() {
			let _this = this
			let data = {
				id: this.caseDetail.id,
				drawbackReason: this.gaijin_reasson
			}
			getMethodCommon('DroneCaseinfo/DrawbackCase',data).then(res => {
				if (res.code === 200) {
					this.$message({
						message: res.message,
						type: 'success'
					});
					_this.showGJ = false;
					// 退回成功
					_this.$emit("caseReturn");
				}else{
					this.$message.error(res.message);
				}
			})
		},
		handlerComparison() {
			this.showMap = true
			this.picUrl = this.imageList[0]
		},
	},
}
</script>
<style>
.inputdiv{
	background-color: #f5f7fa;
	border: 1px solid #e4e7ed;
	color: #c0c4cc;
	border-radius: 4px;
	padding: 0 15px;
}	
.dialog-footer{
	position: absolute;
	bottom: 40px;
	right: 40px;
}
.delImg{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	position: absolute;
	left: 270px;
	top: 0;
	cursor: pointer;
	text-align: center;
	line-height: 30px;
	font-size: 20px;
	color: #fff;
	background-color: #ccc;
}
::v-deep .el-image-viewer__wrapper{
  z-index: 3000000000!important;
}
::v-deep .el-dialog__wrapper{
  z-index:2 !important;
}





</style>
<style scoped>
::v-deep .el-form-item{
    margin-bottom: 15px !important;
}
::v-deep .el-form-item__error{
    padding-top: 0 !important;
}
::v-deep .el-form-item__label{
    font-size: 12px !important;
    font-weight: normal !important;
}
</style>