<template>
	<view class="emergencyDisposal">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					立即救援
				</view>
			</headers>
		</view>
		<!-- 新增问题 -->
		<view class="immediate-rescue" :style="{ 'margin-top': (statusBarHeight+52) * 1.5 + 'rpx' }">
			<view class="content">
				<!-- <view class="type flex">
					<view class="name"><text class="star">*</text>是否处理完毕：</view>
					<radio-group class="radio-group" @change="radioChange">
						<label class="radio" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view> -->

				<view class="rescue-item" v-for="(item,eIndex) in rescueList" :key="eIndex">
					<view class="type flex">
						<view class="name">
							<!-- <text class="star">*</text> -->
							处置人：
						</view>
						<!-- <picker class="picker">
							<view class="uni-input uni-select cl" v-if="issueName==''">
								请输入
							</view>
							<view class="uni-input uni-select" v-else>{{issueName}}
							</view>
						</picker> -->
						<view>
							{{item.disposalPersonName}}
						</view>
					</view>
					<view class="type flex">
						<view class="name">
							<!-- <text class="star">*</text> -->
							处理完成时间：
						</view>
						<dateTimePiccker :placeholder="'请选择'" :start="startTime2" fields="minute"
							:default-value="item.changeLimitTime" @change="bindPickerChange($event,'startTime2',eIndex)"
							class="dateTimePiccker">
						</dateTimePiccker>
					</view>
					<view class="type flex3">
						<view class="name">现场照片：</view>
						<view class="uni-form-input imgBox_wrap"
							v-show="item.videoFileList && item.imgFileList.length>0">
							<view class="imgBox" v-for="(item,index) in item.imgFileList" :key="index">
								<image :src="item.url" class="img" @click="previewImage(item.url)">
								</image>
								<view @click="deleteImg(item,1,eIndex,index)" style="margin: 10rpx;" class="deleteImg">×
								</view>
							</view>
						</view>
						<view class="addImgBox" @click="uploadImg(1,eIndex)" v-if="item.imgFileList.length<1">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>

					<view class="type flex3">
						<view class="name">现场视频：</view>
						<view v-if="item.videoFileList && item.videoFileList.length>0">
							<view class="imgBox flex2 imgBoxVideo" v-for="(item,index) in item.videoFileList"
								:key="index">
								<view
									style="color: #4181FE;width: 100%;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
									@click="playVideo(item.url,'video')">
									{{item.name}}
									<!-- url_config+'image/'+ -->
								</view>
								<view @click="deleteImg(item,2,eIndex,index)" style="margin: 10rpx;color: gray;"
									class="deleteImg">×
								</view>
							</view>
						</view>

						<view class="addImgBox" @click="uploadVideo(eIndex)" v-if="item.videoFileList.length<=0">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>
					<view class="type flex3">
						<view class="name">处置说明：</view>
						<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
							v-model="item.addedDescription" placeholder="请输入"></textarea>
					</view>
					<view class="rescue-item_delete" @click="deleteRescue(eIndex)">
						X
					</view>
				</view>
				<view class="rescue-item_add" @click="addRescue()">
					<image src="/static/icon-add.png" class="icon-add"></image> 新增救援记录
				</view>
				<view class="addSaveBtn" @click="addSaveBtn" v-if="btnAuth">提交保存</view>
			</view>
		</view>
	</view>
</template>
<script>
	import headers from "../../../components/headers/headers.vue"
	import dateTimePiccker from '@/components/dateTimePicker/index.vue'
	import {
		dateformat
	} from "@/utils/tool.js"
	export default {
		components: {
			dateTimePiccker
		},
		data() {
			return {
				rescueList: [{
					changeLimitTime: "",
					imgFileList: [],
					videoFileList: [],
					addedDescription: "",
				}],

				isShowPicker: true,
				startTime: this.getDate({
					format: true,
				}),
				startTime2: this.getDate({
					format: true,
				}),
				imgList: {},
				openImg: false,
				base64Image: '',
				imgIndex: -1,
				pointList: [],

				pageTitle: '新增检查',
				projectSn: '',
				checkType: 1, //分包商类型   1专业分包  6劳务分包
				videoFileList: [],
				imgFileList: [],
				mapImgList: [],
				basicInfo: {},
				selectIndex: null,
				userInfo: '',
				current: 0,

				id: "",
				emergencyDetail: {},
				btnAuth: true,
			}
		},
		onLoad(option) {
			this.btnAuth = this.checkBtnPermission({
				key: 'emergencyDisposal_add',
				menuPath: '/project/emergencyDisposal/emergencyDisposal'
			})
			this.id = option.id;
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
			this.pageTitle = option.type == 'add' ? '新增检查' : '编辑检查';
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.log('111111', this.userInfo);

			console.log(dateformat(new Date()), 777888)
			this.getEmergencyRecordQueryById();
		},
		onShow() {

		},
		methods: {
			//获取记录
			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;
						this.rescueList = res.result.situations.map(item => {
							return {
								disposalPersonId: item.disposalPersonId,
								disposalPersonName: item.disposalPersonName,
								changeLimitTime: item.disposalCompletionTime,
								imgFileList: item.livePicture ? JSON.parse(item.livePicture) : [],
								videoFileList: item.liveVideoSituation ? JSON.parse(item
									.liveVideoSituation) : [],
								addedDescription: item.disposalSpecification,
							}
						});
					}
				})

			},
			// 添加
			addRescue() {
				this.rescueList.push({
					disposalPersonId: this.userInfo.userId,
					disposalPersonName: this.userInfo.realName,
					changeLimitTime: "",
					imgFileList: [],
					videoFileList: [],
					addedDescription: "",
				});
				console.log(this.rescueList, 888999)
			},
			// 删除
			deleteRescue(index) {
				this.rescueList.splice(index, 1);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//图片上传请求的接口
			imgUpload(baseImg) {
				console.log('进入----------图片上传请求的接口');
				let that = this
				let cuDate = new Date().getTime();
				let arr = []
				that.base64Image = baseImg
				let parmars = {
					base64Image: that.base64Image
				}

				this.sendRequest({
					url: 'xmgl/upload/uploadBase64',
					method: 'post',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					data: parmars,
					success: (res) => {
						console.log('转换后的地址----------', res.data.imageUrl);
						console.log('阶段代码  imgUpload 耗时2 ：' + (new Date().getTime() - cuDate))
						that.imgFileList[that.imgFileList.length - 1].url = res.data.imageUrl
					}
				})
			},
			//下拉选择回显
			bindPickerChange(e, type, eIndex) {
				console.log(e)
				//type ==1 问题等级;2紧急情况;3检查人;4 检查时间;5整改时限; 6整改人; 7复查人; 8核验人;
				if (type == 'startTime2') {
					// this.form.changeLimitTime = e.f3;
					this.rescueList[eIndex].changeLimitTime = e.f3;
				}
			},
			//上传附件
			uploadImg(type, rowIndex) {
				var that = this
				if (type == 1) {
					uni.chooseImage({
						count: 1,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							console.log(res.tempFilePaths);
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: 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
									};
									console.log(rowIndex, 777888)
									console.log(that.rescueList, 777888)
									that.rescueList[rowIndex].imgFileList.push(data)
									uni.getImageInfo({
										src: tempFilePaths[0],
										success: (resInfo) => {
											console.log('传过去啦 resInfo', resInfo)
											that.imgList = {
												imgUrl: tempFilePaths[0],
												imgWidth: resInfo.width,
												imgHeight: resInfo.height,
												// team:'班组人员',
												// name: '张三'
											}
											that.openImg = true
										}
									})
									that.openImg = false

								}
							});
						}
					})
				} else if (type == 2) {
					uni.chooseImage({
						count: 1,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									if (that.imgDialogUrl.length >= 1) {
										that.imgDialogUrl[0].url = data.url
										that.imgDialogUrl[0].name = data.name

									} else {
										that.imgDialogUrl.push(data)
									}
									console.log("上传图片的信息：", that.imgDialogUrl)
								}
							});
						}
					})
				} else {
					uni.chooseImage({
						count: 1 - that.mapImgList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.mapImgList.push(data)
								}
							});
						}
					})

				}


			},
			//删除附件
			deleteImg(val, type, rowIndex, eIndex) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.rescueList[rowIndex]
									.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.rescueList[rowIndex].imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.rescueList[rowIndex]
									.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.rescueList[rowIndex].videoFileList = fileArr;
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//上传视频
			uploadVideo(eIndex) {
				var that = this;

				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					compressed: false,
					success: function(res) {
						let url = res.tempFilePath;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: url,
							name: 'files',
							success: (uploadFileRes) => {
								let obj = {
									name: JSON.parse(uploadFileRes.data).data[0].fileInfo
										.originalFilename,
									url: that.url_config + 'image/' + JSON.parse(uploadFileRes
										.data).data[0].imageUrl
								}
								that.rescueList[eIndex].videoFileList.push(obj);
								console.log('上传视频后的数据', that.videoFileList);
							}
						})
					}
				})
			},
			//查看视频
			playVideo(url, type) {
				uni.navigateTo({
					url: '../carWashManage/mediaPlay?url=' + url + '&type=' + type
				})
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},


			//新增保存
			addSaveBtn() {
				if (this.rescueList.length == 0) {
					uni.showToast({
						title: '救援数据不能为空',
						icon: 'none'
					})
					return
				}
				const everyTime = this.rescueList.every(item => item.changeLimitTime);
				if (!everyTime && this.rescueList.length != 0) {
					uni.showToast({
						title: '处置完成时间有未填项',
						icon: 'none'
					})
					return
				}
				console.log(this.rescueList);
				this.sendRequest({
					url: 'xmgl/xzEmergencyRecord/edit',
					method: 'post',
					data: {
						projectSn: this.projectSn,
						id: this.emergencyDetail.id,
						dispositionStatus: 2,
						situations: this.rescueList.map(item => {
							return {
								disposalPersonId: item.disposalPersonId,
								disposalPersonName: item.disposalPersonName,
								disposalCompletionTime: item.changeLimitTime,
								livePicture: JSON.stringify(item.imgFileList),
								liveVideoSituation: JSON.stringify(item.videoFileList),
								disposalSpecification: item.addedDescription,
							}
						}),
					},
					success: res => {
						console.log(res.result)
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
							})
							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.emergencyDisposal {
		height: 100%;
	}

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

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

	.rescue-item:not(:first-child) {
		margin-top: 22rpx;
	}

	.rescue-item {
		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;
		position: relative;
	}

	.rescue-item_delete {
		color: #D81E06;
		font-size: 38rpx;
		font-weight: bold;
		position: absolute;
		top: 8rpx;
		right: 32rpx;
	}

	.rescue-item_add {
		width: 580rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 2rpx dashed #D8DBE8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 34rpx;

		.icon-add {
			width: 20rpx;
			height: 20rpx;
			margin-right: 10rpx;
		}
	}

	.radio-group {
		display: flex;

		.uni-label-pointer {
			display: flex;
		}

		.uni-label-pointer:not(:first-child) {
			margin-left: 40rpx;
		}

		:deep( .uni-radio-input ){
			width: 32rpx;
			height: 32rpx;
		}
	}


	.immediate-rescue {
		margin: 0 4%;
		position: relative;
	}

	.tab {
		width: 100%;
		height: 90rpx;
		text-align: center;
		box-shadow: 0 0 20rpx rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 50%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 4rpx solid #4181FE;

	}

	.noCheckTab {
		padding-bottom: 4rpx;
	}

	.lagCss {
		width: 180px;
		height: 61px;
		background: #fff;
		text-align: center;
		line-height: 29px;
		border-radius: 20rpx;
	}

	.add2 {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		background: #4181fe;
		border-radius: 50rpx;
		font-size: 28rpx;
		margin: 0px 24rpx;
	}

	.point {
		height: 40rpx;
		width: 40rpx;
		position: absolute;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex3 {
		display: flex;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		// padding: 40rpx 30rpx;
	}

	.type {
		font-size: 30rpx;
		line-height: 80rpx;
		margin-bottom: 16rpx;
		/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
	}

	.type .name {
		width: 220rpx;
		margin-right: 6px;
		// width: 176rpx;
		text-align: right;
	}

	.radio-wrap {
		display: flex;
		align-items: center;

		.radio {
			margin-right: 40rpx;
		}
	}

	.accessory {
		width: 100%;
		height: 70px;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.accessoryImg {
		width: 110rpx;
		height: 120rpx;
		margin-right: 16rpx;
	}

	.picker {
		width: 70%;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 0px 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.uni-input {
		line-height: 64rpx;
	}

	.textarea {
		width: calc(79% - 64rpx);
		border-radius: 10rpx;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 30rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	.inpuStyle {
		width: calc(80% - 70rpx);
		border-radius: 40rpx;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 30rpx;
		box-sizing: border-box;
		height: 70rpx;
		color: #000;
	}

	.cl {
		font-size: 30rpx;
		border-radius: 10rpx;
	}


	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		// width: 75%;
	}

	.imgBox {
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 16rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.deleteImg {
			position: absolute;
			right: -6rpx;
			top: -36rpx;
			font-size: 36rpx;
			color: #fff;
		}

	}

	.imgBoxVideo {
		width: 342rpx;
	}

	.addImgBox {
		border: 2rpx solid rgba(42, 43, 91, 0.1);
		background-color: rgba(236, 240, 255, 0.83);
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 24rpx;

		.icon-add {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.unitDialog {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 111;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.unitContent {
		width: 85%;
		height: 70%;
		margin: 25% auto 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.6);
	}

	.tabs {
		border-bottom: 1px solid rgba(153, 153, 153, 0.5);
	}

	.tabs_name {
		width: 40%;
		text-align: center;
		padding: 10rpx 10rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.checkName {
		border-bottom: 4rpx solid #4181FE;
		color: #4181FE;
	}

	.noCheckName {
		padding-top: 4px;
	}

	.unitList {
		margin: 20rpx 0;
		font-size: 30rpx;

		.title {
			margin-bottom: 20rpx;
		}

		.list_val {
			padding: 8px 20rpx;
		}
	}

	.bg_999 {
		background-color: rgba(153, 153, 153, 0.1);
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.status {
		color: #007AFF;
	}

	.addSaveBtn {
		margin: 60rpx auto;
		width: 60%;
		padding: 20rpx 0;
		text-align: center;
		background-color: #4181FE;
		color: #fff;
		font-size: 34rpx;
		border-radius: 60rpx;
		letter-spacing: 4rpx;
		box-shadow: 0 3px 20rpx rgba(65, 129, 254, 0.8);
	}

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

	.radio-box {
		display: flex;
	}

	.radio-item {
		display: flex;
		margin-right: 20rpx;
		align-items: center;
		font-size: 28rpx;

		:deep( .uni-radio-input ){
			width: 32rpx;
			height: 32rpx;
		}
	}

	.radio-text {
		height: 72rpx;
	}

	.butA {
		display: flex;
		// position: absolute;
		top: 60%;

		width: 70%;
	}

	.icon-right {
		margin-left: 16rpx;
		width: 16rpx;
		height: 32rpx;
	}

	.dateTimePiccker {
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		// width: 67%;
		flex: 1;
		padding-left: 20rpx;
	}
</style>