<template>
	<view style="background: #f6f6f6;">
		<headers :showBack="true">
			<view class="headerName">
				违规信息
			</view>
		</headers>

		<view class="form_box">
			<view class="flex between form_item" style="height: 60rpx;font-size: 24rpx;">
				<view class="letBox flex">
					<view class="xian">

					</view>
					<view class="" style="margin-left: 20rpx;">
						上报安全隐患
					</view>
				</view>
			</view>
			<view class="flex between form_item">
				<view class="letBox">
					检查类型
				</view>
				<view class="rigBox">
					安全检查
				</view>
			</view>

			<view class="flex between form_item">
				<view class="letBox">
					违规类型
				</view>
				<view class="rigBox">
					{{dangerInfo.violationType}}
				</view>
			</view>
			<view class="flex between form_item">
				<view class="letBox">
					违规设备
				</view>
				<view class="rigBox">
					{{dangerInfo.devName}}
				</view>
			</view>

			<view class="flex between form_item">
				<view class="letBox">
					整改负责人
				</view>
				<view v-if="userInfo.accountType==5&&dangerInfo.status!=3" class="rigBox" @click="$refs.popup.open()">
					{{getUsernames()}}
					<image src="../../static/icon-down-black.png" style="width: 30rpx;height: 30rpx;margin-left: 6rpx;"
						mode=""></image>

				</view>
				<view v-else class="rigBox">
					<!-- {{getUsernames()}} -->
					{{dangerInfo.pushPersonNames}}
				</view>
			</view>

			<view class="flex between form_item">
				<view class="letBox">
					整改部门
				</view>
				<view class="rigBox">
					安全部
				</view>
			</view>
			<view class="flex between form_item">
				<view class="letBox">
					要求完成时间
				</view>
				<dateTimePiccker v-if="userInfo.accountType==5&&dangerInfo.status!=3" :placeholder="startTime" :start="startTime" fields="day" @change="changeDatetimePicker($event,'startTime')" class="dateTimePiccker">
					
				</dateTimePiccker> 
											
				<!-- <picker v-if="userInfo.accountType==5&&dangerInfo.status!=3" mode="date" :start="dangerInfo.createTime"
					@change="selectDate">
					<view>
						{{dangerInfo.createTime}}
						<image src="../../static/icon-down-black.png"
							style="width: 30rpx;height: 30rpx;margin-left: 6rpx;" mode=""></image>
					</view>
				</picker> -->
				<view v-else class="rigBox">
					{{dangerInfo.requestRectificationDate}}
				</view>

			</view>
			<view class="" style="margin: 40rpx 0;">
				报警抓拍
			</view>
			<view class="">
				<image class="imgbox" @click="previewImage(url_config+'image/'+dangerInfo.violationImage)"
					:src="url_config+'image/'+dangerInfo.violationImage" mode=""></image>
			</view>

			<view class="" v-if="userInfo.accountType==6&&dangerInfo.status!=3">
				<view class="form-lable" style="margin-top: 30rpx;">
					<text style="color: red;">*</text>上传整改图片
				</view>
				<view class="form-item flex f-column a-start">

					<view class="uni-form-input imgBox_wrap">
						<view class="addImgBox" @click="uploadImg" v-show="imgFileList.length<3">

							<image src="/static/safeMange/upload_image.png" class="icon-add" color="#F56C6C">
							</image>
						</view>
						<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
							:key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
							<view v-if="!isDisabled" @click="deleteImg(item,1)" class="deleteImg">
								<image src="/static/safeMange/close_icon.png" color="#F56C6C"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="form-lable" style="margin-top: 30rpx;">
					整改说明
				</view>
				<textarea class="explain" v-model="explain" placeholder="选填" />
			</view>

			<view class="" style="margin-top: 20rpx;" v-if="dangerInfo.status==3">
				<view class="" style="margin: 40rpx 0;">
					整改图片
				</view>
				<view class="uni-form-input imgBox_wrap">
					<view class="imgBox" v-for="(item,index) in dangerInfo.correctImage" :key="index">
						<image :src="url_config+'image/'+item.url" class="imgBox"
							@click="previewImage(url_config+'image/'+item.url)"></image>

					</view>
				</view>
				<view class="form-lable" style="margin-top: 30rpx;">
					整改说明
				</view>
				<textarea class="explain" :disabled="true" v-model="dangerInfo.correctRemark" />
			</view>
		</view>

		<view class="" style="height:200rpx;" v-if="userInfo.accountType==6">

		</view>
		<view v-if="dangerInfo.status!=3" class="svanbtn" @click="saveBtn">
			{{userInfo.accountType==5?'提交':'提交整改'}}
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="uni-list">
				<view class="flex between control">
					<view class="">
						<text style="font-size: 28rpx;margin-right: 12rpx;">全选</text>
						<checkbox :checked="selectAll" @click="selectAllEve" />
					</view>
					<view class="colse" @click="colse">
						完成
					</view>
				</view>
				<scroll-view scroll-y="true" style="margin-top: 30rpx;height: 420rpx;">
					<checkbox-group @change="checkUser" class="checkbox-group">
						<label class="uni-list-cell" v-for="user in changeUsers" :key="user.value">
							<view class="item">
								<checkbox :value="user.userId" :checked="userIds.includes(user.userId)" />
							</view>
							<view>{{user.realName}}</view>
						</label>
					</checkbox-group>

				</scroll-view>
			</view>
		</uni-popup>
	</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 {
				startTime: '',
				dangerInfo: {},
				selectAll: false,
				alarmType: {
					1: "烟感",
					2: "明火",
					3: "人员倒地",
					4: "未戴安全帽",
					5: "区域入侵",
					6: "越界入侵",
					7: "人员聚集衣",
					8: "反光衣",
					9: "裸土覆盖",
					13: "口罩识别",
					14: "徘徊预警",
					15: "物体滞留监测",
					16: "绊线监测"
				},
				userId: "",
				userInfo: {},
				isDisabled: false,
				imgFileList: [],
				explain: "",
				detailsId: '',
				changeUsers: [],
				userIds: [],
				backupsUserIds: []
			}
		},
		watch: {
			userIds(n, o) {
				console.log(n, "=====")
				if (n.length == this.backupsUserIds.length) {
					this.selectAll = true
				} else {
					this.selectAll = false;
				}
			}
		},
		onLoad(op) {
			uni.setStorageSync('page_lifterMonitoring_index',3);
           	this.startTime = this.$formatDates(new Date().getTime(),'yyyy-MM-dd');
			
			// this.dangerInfo = JSON.parse(decodeURIComponent(op.dangerInfo));
			this.detailsId = op.id;
			console.log(this.dangerInfo, "url_config")

			this.queryTypeList();
			this.queryUserData();
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.userId = this.userInfo.userId;
			this.getDeatils();
			console.log(this.userInfo);

		},
		methods: {
			changeDatetimePicker(date, t) {
				console.log('选择的日期时间数据：', date, t);
				
				if (t == 'startTime') {
					// this.startTimeVal = date.f3
					this.dangerInfo.requestRectificationDate = date.f3

				} 
			
			},
			selectAllEve() {
				this.selectAll = !this.selectAll;
				if (this.selectAll) {
					this.userIds = this.changeUsers.map((item) => {
						return item.userId
					})
					console.log(this.userIds, "==this.userIds")
				} else {
					this.userIds = []
				}

			},
			selectDate(e) {
				console.log(e, 'date=====')
				this.dangerInfo.requestRectificationDate = e.detail.value;
			},
			colse() {
				this.$refs.popup.close()
			},
			// 多选整改人
			checkUser(e) {
				const values = e.detail.value;
				this.userIds = values
				console.log(this.userIds,'=======================userIds');
			},
			getUsernames() {
				const names = this.changeUsers
					.filter(user => this.userIds.includes(user.userId))
					.map(user => user.realName)
				// return names.toString()
				
				return names.toString() || '请选择'
			},
			//获取详情
			getDeatils() {
				let _this = this;
				this.sendRequest({
					url: 'xmgl/lifterViolation/getDetails',
					method: 'post',
					data: {
						id: _this.detailsId
					},
					success: res => {

						_this.dangerInfo = res.result;
						if(_this.dangerInfo.requestRectificationDate&&_this.dangerInfo.requestRectificationDate+''!='null'){
							_this.dangerInfo.requestRectificationDate = dateformat(_this.dangerInfo.requestRectificationDate, 'yyyy-MM-dd');
						}else{
							this.dangerInfo.requestRectificationDate=this.startTime;
						}
						
						if (_this.dangerInfo.correctImage) {
							_this.dangerInfo.correctImage = JSON.parse(_this.dangerInfo.correctImage)
						} else {
							_this.dangerInfo.correctImage = []
						}

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

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

			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			//上传附件
			uploadImg() {

				var that = this
				uni.chooseImage({
					count: 3 - that.imgFileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths, "tempFilePaths")
						for (let i in tempFilePaths) {
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									console.log(uploadFileRes)
									that.imgFileList.push(data)
								},
								fail(e) {
									console.log(e)
								}
							});
						}

					}
				})
			},
			seeImg() {
				uni.previewImage({
					urls: `${this.url_config}+'image/'+${this.dangerInfo.imageUrl}`
				})
			},
			//获取检查类型
			queryTypeList() {
				let sn = JSON.parse(uni.getStorageSync('userInfo')).headquartersSn
				let _this = this
				this.sendRequest({
					url: 'xmgl/inspectType/list',
					method: 'post',
					data: {
						sn: sn
					},
					success: res => {
						let typeList = res.result

						let tres = typeList.find(item => item.inspectTypeName == "安全检查");
						if (tres) {
							_this.inspectTypeId = tres.id
						}

						console.log(_this.inspectTypeId, '-----检查类型')
					}
				})
			},
			queryUserData() {
				let _this = this
				this.sendRequest({
					url: 'xmgl/systemUser/getProjectChilderSystemUserList',
					method: 'post',
					data: {
						projectSn: JSON.parse(uni.getStorageSync('userInfo')).sn
					},
					success: res => {
						_this.changeUsers = res.result
						_this.userIds = res.result[0].userId;
						_this.backupsUserIds = _this.changeUsers.map((item) => {
							return item.userId
						})
						console.log(res.result, '-----检查人')
					}
				})
			},
			saveBtn() {
				let imageUrl = `${this.url_config}+'image/'+${this.dangerInfo.imageUrl}`
				// let data = {
				// 	projectSn: this.dangerInfo.projectSn, //项目编号		
				// 	reviewId: this.userId, //核查人ID--
				// 	createUser: this.userId, //创建人
				// 	dangerDesc: this.alarmType[this.dangerInfo.alarmType], //报警信息
				// 	status: 2, //整改状态 1无需整改，2待整改，3待复查，4合格，5不合格
				// 	dutyRegion: this.dangerInfo.location, //地址
				// 	engineeringId: "", //工程id
				// 	inspectTypeId: this.inspectTypeId, //检查类型
				// 	imageUrl: imageUrl,
				// 	recordType: 1,
				// 	changeLimitTime: dateformat(this.dangerInfo.createTime, 'yyyy-MM-dd'), //更改限制时间
				// 	checkItem: "安全管理", //项目
				// 	checkSubitem: "安全生产责任制",
				// 	// changeUser: "1541226669983522817",
				// 	changeUser: this.changeUser.userId,
				// 	faultLevel: 1,
				// 	hiddenDangerLevel: "二级",
				// 	checkContent: this.alarmType[this.dangerInfo.alarmType],
				// 	enterpriseSn: '',
				// 	rectifyRequire: ""
				// };
				// this.dangerInfo.correctImage=JSON.stringify(this.dangerInfo.correctImage);

				let data = {
					...this.dangerInfo
				};
				console.log(this.userIds,'this.userIds')
				if (this.userInfo.accountType == 5) { //发起整改
					data.reType = 1;
					// data.rectification_person_id = this.userIds;
					data.pushPersonIds=this.userIds.toString();
					
				} else if (this.userInfo.accountType == 6) { //整改人需要的字段  整改回复
				    console.log(this.userInfo.accountType == 6)
					if(this.imgFileList.length==0){
						uni.showToast({
							title:'请上传整改照片',
							icon:'error'
						})
						return false;
					}
					data.correctImage = JSON.stringify(this.imgFileList);
					data.correctRemark = this.explain;
					data.reType = 2;
					data.rectificationPersonId = this.userInfo.userId;
				}
				
				this.sendRequest({
					url: 'xmgl/lifterViolation/rectification',
					method: 'post',
					data: data,
					success: (res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功'
							}), uni.navigateBack({})

						}
						console.log(res.result)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
	}

	.flex_end {
		justify-content: flex-end;
	}

	.between {
		justify-content: space-between;
	}

	.control {
		padding: 0 30rpx;
	}

	.colse {
		font-size: 28rpx;

	}

	.explain {
		padding: 12rpx;
		font-size: 28rpx;
		background-color: #F7F7F7;
		margin-top: 20rpx;
		border-radius: 20rpx;
		height: 120rpx;
	}

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

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

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			background: #eee;
		}

		.deleteImg {
			position: absolute;
			right: -12rpx;
			top: -18rpx;

			uni-image {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}

	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 24rpx;
		margin-right: 12rpx;

		uni-image {
			width: 120rpx;
			height: 120rpx;
		}


	}

	page {
		background-color: #f6f6f6;
	}

	.imgbox {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}

	.svanbtn {
		width: 100%;
		background-color: #007AFF;
		color: #fff;
		text-align: center;
		font-size: 28rxp;
		line-height: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.xian {
		height: 30rpx;
		width: 6rpx;
		background-color: #007AFF;
	}

	.form_box {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx;
		border-radius: 8rpx;


		.form_item {
			width: 100%;
			font-size: 28rpx;
			height: 80rpx;
			border-bottom: 2rpx solid #F7F7F7;

		}
	}

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

	.center {
		justify-content: center;
	}

	.between {
		justify-content: space-between;
	}

	.warp {
		flex-wrap: wrap;
	}

	.evenly {
		justify-content: space-evenly;
	}

	.uni-popup {
		position: absolute;
		top: 0;
		width: 100%;
		height: 667px;
	}

	.uni-list {
		// position: absolute;
		//   bottom: -667px;
		padding-top: 20px;
		width: 100%;
		height: 420px;
		background-color: #fff;

		.checkbox-group {
			// height: 260px;
		}
	}

	.uni-list-cell {
		margin-bottom: 10px;
		padding-left: 20px;
		display: flex;
		align-items: center;
	}
</style>
