<template>
	<view class="emergencyDisposal">
		<headers class="fixedheader" :showBack="true">
			<view class="headerName">
				处置详情
			</view>
		</headers>
		<view class="disposal-detail" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
			<view class="rescue">
				<view class="title">
					基本信息
				</view>
				<view class="rescue-detail">
					<view>
						<text>报警人员姓名：</text>
						<text>{{emergencyDetail.alarmPersonName}}</text>
					</view>
					<view>
						<text>所属企业：</text>
						<text>{{emergencyDetail.enterpriseName}}</text>
					</view>
					<view>
						<text>应急类型：</text>
						<text>{{emergencyDetail.emergencyTypeName}}</text>
					</view>
					<view>
						<text>所属班组/部门：</text>
						<text>{{emergencyDetail.teamName}}</text>
					</view>
					<view class="detail">
						<text>应急详情：</text>
						<text
							style="word-wrap:break-word; word-break:break-all;">{{emergencyDetail.emergencyDetail}}</text>
					</view>
					<view>
						<text>救援状态：</text>
						<text v-if="emergencyDetail.dispositionStatus === 1"
							style="color:#f56c6c;font-weight:bold;">待救援</text>
						<text v-if="emergencyDetail.dispositionStatus === 2"
							style="color:#5181f6;font-weight:bold;">救援中</text>
						<text v-if="emergencyDetail.dispositionStatus === 3"
							style="color:#008000;font-weight:bold;">已救援</text>
						<!-- <text class="color-ea3">
							{{emergencyDetail.dispositionStatus == 1 ? '待救援' : emergencyDetail.dispositionStatus == 2 ? '救援中' :'已救援' }}
						</text> -->
					</view>
					<view>
						<text>现场情况视频：</text>
						<view class="imgBox flex2"
							v-for="(item,index) in emergencyDetail.liveVideoSituation && JSON.parse(emergencyDetail.livePicture).length>0 && JSON.parse(emergencyDetail.liveVideoSituation)"
							:key="index">
							<view style="color: #4181FE;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
								@click="playVideo(url_config+'image/'+item.url,'video')">
								{{item.name}}
							</view>
						</view>
						<!-- url_config+'image/'+ -->
						<!-- <text class="color-518">
							{{emergencyDetail.liveVideoSituation}}
						</text> -->
					</view>
					<view>
						<text>报警时间：</text>
						<text>{{emergencyDetail.alarmTime}}</text>
					</view>
					<view>
						<text>经纬度：</text>
						<text>{{emergencyDetail.longitude}}<text
								v-if="emergencyDetail.longitude && emergencyDetail.latitude">,</text>{{emergencyDetail.latitude}}</text>
					</view>
					<view>
						<text>现场情况图片：</text>
						<view class="uni-form-input imgBox_wrap">
							<view class="imgBox"
								v-for="(item,index) in emergencyDetail.livePicture && JSON.parse(emergencyDetail.livePicture).length>0 && JSON.parse(emergencyDetail.livePicture)"
								:key="index">
								<image :src="url_config+'image/'+item.url" style="width: 75px;height: 50px;" class="img"
									@click="previewImage(item.url)">
								</image>
							</view>
						</view>
						<!-- 	<text>
							<image class="image" :src="emergencyDetail.livePicture"></image>
						</text> -->
					</view>
					</div>
				</view>
			</view>
			<view class="rescue" v-if="emergencyInfo.emergencyTypeId != -1">
				<view class="title">
					救援资料
				</view>
				<view class="rescue-detail data">
					<view>
						<text>处置资料：</text>
						<text v-if="emergencyInfo.disposalInformation" style="cursor: pointer;" class="color-518"
							@click="downloadReport(emergencyInfo.disposalInformation)">
							{{ JSON.parse(emergencyInfo.disposalInformation).map(item => item.name).join("、") }}
						</text>
					</view>
					<view>
						<text>指导文件：</text>
						<text v-if="emergencyInfo.guidanceDocument" style="cursor: pointer;" class="color-518"
							@click="downloadReport(emergencyInfo.guidanceDocument)">
							{{ JSON.parse(emergencyInfo.guidanceDocument).map(item => item.name).join("、") }}
						</text>
					</view>
				</view>
			</view>
			<view class="rescue">
				<view class="title">
					救援情况
					<text class="color-518" v-if="emergencyDetail.incidentClosedStatus == 2">事故已关闭</text>
				</view>
				<view class="rescue-detail">
					<view class="rescue-item" v-for="item in emergencyDetail.situations" :key="item.id">
						<!-- <view class="rescue-detail data condition">
						</view> -->
						<view>
							<text>处置人：</text>
							<text>{{item.disposalPersonName}}</text>
						</view>
						<view>
							<text>现场情况视频：</text>
							<view v-if="item.liveVideoSituation && JSON.parse(item.liveVideoSituation).length>0"
								class="imgBox flex2" v-for="(ele,index) in JSON.parse(item.liveVideoSituation)"
								:key="index">
								<view
									style="color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
									@click="playVideo(ele.url,'video')">
									{{ele.name}}
								</view>
							</view>
							<!-- <text class="color-518">4654.mp4</text> -->
						</view>
						<view>
							<text>处置说明：</text>
							<text>{{item.disposalSpecification}}</text>
						</view>
						<view>
							<text>现场图片：</text>
							<view class="uni-form-input imgBox_wrap" v-show="item.livePicture.length>0">
								<view class="imgBox" v-for="(item,index) in JSON.parse(item.livePicture)" :key="index">
									<!-- url_config+'image/'+ -->
									<image :src="item.url" class="image" @click="previewImage(item.url)">
									</image>
								</view>
							</view>
							<!-- <text>
								<image class="image" src="/static/aqjy.png"></image>
							</text> -->
						</view>
						<view>
							<text>处理完成时间：</text>
							<text>{{item.disposalCompletionTime}}</text>
						</view>
					</view>
					<view class="addSaveBtn" v-if="emergencyDetail.incidentClosedStatus == 1"
						@click="getnavigateTo(`./ImmediateRescue?id=${emergencyDetail.id}`)">
						立即救援
					</view>
				</view>
			</view>
			<view class="rescue" v-if="emergencyDetail.incidentClosedStatus == 2">
				<view class="title">
					处置报告
				</view>
				<view v-if="emergencyDetail.dispositionStatus != 3">
					<view class="rescue-report">
						<uni-file-picker limit="1" @select="canversList" file-mediatype="all" title="最多选择1个文件">
							<!-- <image src="/static/icon-add.png" class="icon-add"></image> -->
							<uni-icons2 type="plusempty" :size="19"></uni-icons2>
							选择文件
						</uni-file-picker>
						<view></view>
						<view v-for="(item,index) in imgList" :key="index">
							<view>文件名称</view>
							<view>
								<text>{{item.name}}</text>
								<uni-icons2 type="close" :size="26" @click="deleteImgList(index)"></uni-icons2>
							</view>
						</view>
					</view>
					<view class="addSaveBtn" @click="addSaveBtn">提交</view>
				</view>
				<view v-if="emergencyDetail.dispositionStatus == 3"
					style="color: #5181f6; cursor: pointer; height: 88rpx; justify-content: center; align-items: center;display: flex;"
					@click="downloadReport(imgList)">
					下载处置报告
				</view>
			</view>
			<view class="lable-absolute" @click="goMaps()">
				<image src="/static/emergencywz.png"></image>
				<text>应急物资</text>
			</view>
		</view>

	</view>
</template>

<script>
	import headers from "../../../components/headers/headers.vue"
	var _self;
	export default {
		data() {
			return {
				projectSn: "",
				id: "",
				emergencyDetail: {},
				imageValue: [],
				imgList: [],
				emergencyTypeList: [],
				emergencyInfo: {},
				statusBarHeight: "",
			}
		},
		mounted() {

		},
		onLoad(options) {
			this.id = options.id;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			console.log(options);

		},
		onShow() {
			this.getEmergencyTypeList();
			this.getEmergencyRecordQueryById();
		},
		methods: {
			downloadReport(row) {
				const url = row && row != "null" && row[0].url;
				const fileName = row && row != "null" && row[0].name;
				if (!url) {
					uni.showToast({
						title: "暂无下载文件！",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "保存中..."
				})
				uni.downloadFile({
					url: url, //网络路径，下载下来  
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, //下载后的临时路径  
								success: res => { //下载完成后在相册里压根找不到  
									uni.hideLoading()
									uni.showToast({
										title: "保存成功！"
									})
								}
							})
						}
					}
				});

				// fetch(url)
				// 	.then(response => response.blob())
				// 	.then(blob => {
				// 		const link = document.createElement('a');
				// 		link.href = URL.createObjectURL(blob);
				// 		link.download = fileName;
				// 		link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
				// 		link.click();
				// 	});
			},
			addSaveBtn() {
				if (this.imgList == null||this.imgList.length == 0) {
					uni.showToast({
						title: "请提交处置报告",
						icon: "none"
					})
					return
				}
				this.sendRequest({
					url: 'xmgl/xzEmergencyRecord/edit',
					method: 'post',
					data: {
						projectSn: this.projectSn,
						id: this.emergencyDetail.id,
						dispositionStatus: 3,
						situations: this.emergencyDetail.situations,
						disposalReport: JSON.stringify(this.imgList)
					},
					success: res => {
						console.log(res.result)
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
							})
							uni.navigateBack()
						}
					}
				})
			},
			deleteImgList(eIndex) {
				this.imgList.splice(eIndex, 1);
			},
			canversList(e) {
				const that = this;
				console.log(e);
				that.imgList = that.imgList == null ? [] : that.imgList;
				uni.uploadFile({
					url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
					filePath: e.tempFilePaths[0],
					name: 'files',
					success: (uploadFileRes) => {
						let data = {
							name: JSON.parse(uploadFileRes.data).data[0].filename,
							url: that.url_config + 'image/' + JSON.parse(uploadFileRes
								.data).data[0].imageUrl
						};
						that.imgList.push(data)
						console.log('传过去啦', this.imgList)
					}
				});
				// this.imgList = {
				// 	imgUrl: e.tempFiles[0].image.location,
				// 	imgWidth: e.tempFiles[0].image.width,
				// 	imgHeight: e.tempFiles[0].image.height,
				// 	team: this.teamList[this.teamindex].teamName,
				// 	name: this.teamList[this.teamindex].leaderName
				// }

			},
			getEmergencyTypeList() {
				let that = this;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/xzEmergencyType/list',
					method: 'get',
					data: {
						projectSn: this.projectSn,
					},
					success: res => {
						console.log(res);
						that.emergencyTypeList = res.result;
					}
				})
			},
			//获取记录
			getEmergencyRecordQueryById() {
				let that = this;
				//获取我整改的巡查记录数量
				this.sendRequest({
					url: 'xmgl/xzEmergencyRecord/queryById',
					method: 'get',
					data: {
						projectSn: this.projectSn,
						id: this.id,
					},
					success: res => {
						console.log(res);
						that.emergencyDetail = res.result;
						const find = that.emergencyTypeList.find(item => item.id == res.result
							.emergencyTypeId);
						that.emergencyInfo = find ? find : {};
						this.imgList = (res.result.disposalReport && res.result.disposalReport != null) ? JSON.parse(res.result.disposalReport) : [];
					}
				})
			},
			getnavigateTo(url) {
				uni.navigateTo({
					url,
				})
			},
			goMaps() {
				uni.navigateTo({
					url: `./mymaps?latitude=${this.emergencyDetail.latitude}&longitude=${this.emergencyDetail.longitude}`
				})
			},
			//查看视频
			playVideo(url, type) {
				uni.navigateTo({
					url: '../carWashManage/mediaPlay?url=' + url + '&type=' + type
				})
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-file-picker__lists {
		display: none;
	}

	.emergencyDisposal {
		height: 100%;
	}

	.addSaveBtn {
		width: 496rpx;
		height: 80rpx;
		background: #5181F6;
		box-shadow: 0 8rpx 18rpx 0 rgba(81, 129, 246, 0.37);
		border-radius: 148rpx;
		color: #fff;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 70rpx auto;
	}

	.rescue-report {
		view:last-child {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	/deep/ .uni-file-picker__files {
		width: 220rpx;
		height: 80rpx;
		background-color: #5181F6;
		color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 24rpx 0;

		.files-button {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.icon-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}

		text {
			color: white !important;
		}
	}



	.color-ea3 {
		color: #EA3941;
	}

	.color-518 {
		color: #5181F6;
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/.headerBox {
			background: #2b8df3;
			color: #fff;
		}
	}

	.image {
		width: 148rpx;
		height: 90rpx;
	}

	.disposal-detail {
		// margin: 88rpx 0;
		padding: 0 30rpx 30rpx;
		position: relative;

		.rescue {
			.title {
				font-weight: bold;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
			}

			.rescue-item {
				flex-direction: column;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(198, 220, 255, 0.2) 100%);
				box-shadow: 0px 8rpx 32rpx -8rpx rgba(42, 60, 106, 0.24);
				border-radius: 34rpx;
				padding: 24rpx 24rpx;

				// view {
				// 	margin: 6rpx 0 !important;
				// }
			}

			.rescue-item>view:last-child {
				font-size: 10px;
				color: rgba(0, 0, 0, 0.5);
				justify-content: flex-end;

				text:last-child {
					flex: initial,
				}
			}

			.rescue-detail {
				// margin-top: 15%;
				font-size: 14px;
				color: #000000;
				padding: 0 8rpx 30rpx;

				view {
					display: flex;
					line-height: 50rpx;
					margin: 20rpx 0;

					text:last-child {
						flex: 1,
					}
				}

				.detail {
					flex-direction: column;

					text:last-child {
						padding: 0 26rpx;
					}
				}

				.rescue-data {
					border: 1px solid #BBBBBB;
					background-color: #F5F5F5;
					justify-content: center;
				}

				.addSaveBtn {
					margin: 60rpx auto;
					color: #fff;
					// width: 60%;
					// padding: 20rpx 0;
					align-items: center;
					justify-content: center;
					// background-color: #4181FE;

					// font-size: 34rpx;
					// border-radius: 30px;
					// letter-spacing: 2px;
					width: 252px;
					height: 40px;
					background: #5181F6;
					box-shadow: 0px 4px 9px 0px rgba(81, 129, 246, 0.37);
					border-radius: 74px 74px 74px 74px;
				}

				.addSaveBtn:active {
					background-color: rgba(65, 129, 254, 0.8);
				}
			}

			.data {
				margin-left: 46rpx;
				color: #272D45;
			}

			.condition {
				flex-wrap: wrap;
				justify-content: space-between;
			}
		}

		.lable-absolute {
			// background-color: #fcebec;
			// color: #ea3941;
			padding: 4rpx 24rpx;
			border-radius: 20rpx;
			position: absolute;
			top: 32rpx;
			right: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 68rpx;
				height: 74rpx;
			}
		}
	}

	.imgBox_wrap,
	.imgBox {
		margin: 0 !important;

		view {
			margin: 0 !important;
		}
	}
</style>