<template>
	<view class="addIssue">
		<view class="fixedheader">
			<headers :showBack="true" :themeType="true">
				<view class="headerName">
					风险点设置
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<view class="content_main">
				<!-- <view class="header-title">基础信息</view> -->
				<view class="main-box">
					<view class="box1">
						<view>风险描述:</view>
						<view class="textarea">
							<u-input :clearable="false" v-model="workTicketInfo.riskSituationDescription"
								:maxlength="200" placeholder="请输入" type="textarea" :border="true" />
							<view class="textarea_text">
								<text>{{workTicketInfo.riskSituationDescription.length}}</text>/200</view>
						</view>
					</view>
					<view class="box1">
						<view>有效时间:</view>
						<view>
							<view class="changetime" @click="constructionTimeShow = true">
								<view class="changetime_icon"></view>
								<view>{{ workTicketInfo.effectiveTimeBegin }}</view>
								<view>-</view>
								<view>{{ workTicketInfo.effectiveTimeEnd }}</view>
								<view class="changetime_icon"></view>
							</view>
							<u-calendar v-model="constructionTimeShow" mode="range" :max-date="'2300-01-01'"
								@change="onConstructionTimeChange"></u-calendar>
						</view>
					</view>
					<view class="box1">
						<view>区域/部位:</view>
						<view>
							<u-input v-model="workTicketInfo.areaLocation" placeholder="请输入" type="text"
								:border="true" />
						</view>
					</view>
					<view class="box1">
						<view>活动频次:</view>
						<view><u-input v-model="workTicketInfo.activityFrequency" placeholder="请输入" type="number"
								:border="true" /></view>
					</view>
					<view class="box1">
						<view>责任区域:</view>
						<view @click="onClickType(1)">
							<u-input disabled style="pointer-events:none" :value="workTicketInfo.specificResponsibilityAreaNames"
								type="text" :border="true" placeholder="请选择" />
						</view>
					</view>
				</view>
			</view>
			<view class="confrim-btn">
				<view @click="onNavigateBack">取消</view>
				<view @click="getworkTicketEditFn">保存</view>
			</view>
		</view>
		<u-popup :mask-close-able="false" v-model="constructionAreasShow" :closeable="false" mode="bottom">
			<view class="content-popup">
				<view class="content-popup_header">
					责任区域
				</view>
				<scroll-view v-if="qualityRegionList.length > 0" scroll-y="true" style="max-height: 600rpx;">
					<TreeView @node-click="onConstructionAreasClick" :multiple="true"
						checked-bg-color="rgba(81,129,246,0.1)" :data="qualityRegionList" :children-key="'children'"
						:label-key="'regionName'" :id-key="'id'" :value="constructionAreasList" />
				</scroll-view>
				<view class="new-nodata_height" v-else>
					<view class="new-nodata">
						<view></view>
						<text>暂无数据...</text>
					</view>
				</view>
				<view class="confrim-btn">
					<view @click="onCancelClick(1)">取消</view>
					<view @click="onSubmitType(1)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import TreeView from '@/components/tree-view/TreeView.vue';
	import {
		handleAuthScan
	} from "@/common/permissionTips"
	export default {
		components: {
			TreeView
		},
		data() {
			return {
				mobileTopHeight: 0,
				projectDetail: {},
				issueInvoiceShow: false,
				workTicketInfo: {
					riskSituationDescription: "",
					effectiveTimeBegin: "",
					effectiveTimeEnd: "",
					specificResponsibilityAreaIds: [],
					specificResponsibilityAreaNames: "",
					areaLocation: "",
					activityFrequency: "",
				},
				// 区域
				qualityRegionList: [],
				constructionAreasList: [],
				constructionAreasNameList: [],
				constructionAreasShow: false,


				constructionTimeShow: false,
				riskListPointId: "",
			}
		},
		onLoad(opts) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			console.log(1111, opts, this.projectDetail)
			this.riskListPointId = opts.id;
			this.getWorkTicketQueryByIdFn();

			this.getQualityRegionListFn();
		},
		onShow() {
			let that = this
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
		},
		methods: {
			// 通过id查询管控清单信息
			getWorkTicketQueryByIdFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
					id: this.riskListPointId,
				};
				this.sendRequest({
					url: 'xmgl/riskListPoint/queryById',
					method: 'GET',
					data: data,
					success: res => {
						if (res.code == 200) {
							this.workTicketInfo = {
								...res.result,
								specificResponsibilityAreaIds: res.result.specificResponsibilityAreaIds ?
									res.result
									.specificResponsibilityAreaIds.split(',') : [],
								specificResponsibilityAreaNames: res.result.specificResponsibilityAreaNames,
							};
						}
					}
				})
			},
			// 编辑管控清单
			getworkTicketEditFn() {
				let that = this;
				let data = {
					...this.workTicketInfo,
					specificResponsibilityAreaIds: this.workTicketInfo.specificResponsibilityAreaIds.join(','),
					projectSn: this.projectDetail.projectSn,
				};
				console.log(data)
				this.sendRequest({
					url: 'xmgl/riskListPoint/edit',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.showToast('编辑成功', 'success');
							that.onNavigateBack();
						}
					}
				})
			},
			// 取消
			onNavigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取时间
			onConstructionTimeChange(event) {
				console.log(event)
				this.workTicketInfo.effectiveTimeBegin = event.startDate;
				this.workTicketInfo.effectiveTimeEnd = event.endDate;
			},
			// 多选下拉 1区域 2单位 3人员
			onClickType(type) {
				if (type == 1) {
					this.constructionAreasList = this.workTicketInfo.specificResponsibilityAreaIds.map(item => item);
					this.constructionAreasNameList = this.workTicketInfo.specificResponsibilityAreaNames ? this
						.workTicketInfo
						.specificResponsibilityAreaNames.split(',') : [];
					this.constructionAreasShow = true;
				}
			},
			// 区域
			onConstructionAreasClick(id, checked, label) {
				console.log(id, checked, label)
				const idx = this.constructionAreasList.indexOf(id);
				if (checked && idx === -1) {
					this.constructionAreasList.push(id);
					this.constructionAreasNameList.push(label);
				} else if (!checked && idx !== -1) {
					this.constructionAreasList.splice(idx, 1);
					this.constructionAreasNameList.splice(idx, 1);
				}
				console.log(1122, this.constructionAreasNameList, this.constructionAreasList)
			},
			onSubmitType(type) {
				if (type == 1) {
					console.log(11233, this.constructionAreasNameList)
					this.workTicketInfo.specificResponsibilityAreaIds = [...this.constructionAreasList];
					this.workTicketInfo.specificResponsibilityAreaNames = this.constructionAreasNameList.join(',');
					this.constructionAreasShow = false;
				}
			},
			onCancelClick(type) {
				if (type == 1) {
					this.constructionAreasList = [...this.workTicketInfo.specificResponsibilityAreaIds];
					this.constructionAreasShow = false;
				}
			},
			// 获取责任区域
			getQualityRegionListFn() {
				let that = this;
				let data = {
					projectSn: this.projectDetail.projectSn,
					pageNo: 1,
					pageSize: -1,
				};
				this.sendRequest({
					url: 'xmgl/qualityRegion/tree/page',
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 200) {
							that.qualityRegionList = res.result.records;
						}
					}
				})
			},
			showToast(title, type) {
				this.$refs.uToast.show({
					title: title,
					type: type,
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		.content_main2 {
			background-color: white;
			min-height: calc(100vh - 88rpx - 180rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 94rpx;

			>view:first-child {
				width: 502rpx;
				height: 336rpx;
				background-image: url('@/static/workTicketManage/index-icon11.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.edit_img {
				background-image: url('@/static/workTicketManage/index-icon12.png') !important;
			}

			>view:nth-child(2) {
				font-weight: 500;
				font-size: 28rpx;
				color: #171717;
				margin-top: 30rpx;
			}

			>view:nth-child(3) {
				font-size: 24rpx;
				color: #FFA026;
				margin-top: 26rpx;
				display: flex;
				align-items: flex-start;

				.u-icon {
					font-size: 36rpx;
				}
			}
		}

		.content_main1 {
			margin-top: 26rpx;
			padding-bottom: 138rpx;
			// background-color: white;
			// min-height: calc(100vh - 88rpx - 180rpx - 26rpx);

			.content_main-box {
				height: 224rpx;
				background-color: #FFFFFF;
				padding: 26rpx;
				margin-top: 20rpx;

				>view:last-child {
					margin-top: 22rpx;
					display: flex;
					align-items: center;

					>image {
						width: 80rpx;
						height: 104rpx;
						border-radius: 6rpx;
					}

					>view:last-child {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 40rpx;
						height: 104rpx;

						>view {
							display: flex;

							>view:first-child {
								width: 84rpx;
								font-size: 28rpx;
								color: #4D4D4D;
								text-align: right;
							}

							>view:last-child {
								margin-left: 40rpx;
								font-size: 28rpx;
								color: #4D4D4D;
							}
						}
					}
				}

				>view:first-child {
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view:first-child {
						font-weight: 800;
						font-size: 30rpx;
						color: #171717;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.u-icon {
						font-size: 40rpx;
						color: #EA3941;
					}
				}
			}

			.header-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12rpx 26rpx;
				background-color: white;

				>view:first-child {
					font-weight: 500;
					font-size: 30rpx;
					color: #1A1A1A;
				}

				>view:last-child {
					display: flex;
					align-items: center;

					>view:first-child {
						width: 40rpx;
						height: 40rpx;
						background-image: url('@/static/workTicketManage/index-icon10.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

					>view:last-child {
						font-weight: 500;
						font-size: 24rpx;
						color: #4D8EEC;
						margin-left: 20rpx;
					}
				}
			}
		}

		.content_main {
			margin-top: 26rpx;
			padding-bottom: 138rpx;
			background-color: white;

			.main-box {
				padding: 0 16rpx;

				>.box2 {
					flex-direction: column;
					margin-top: 0 !important;

					>view:first-child {
						width: 192rpx !important;
					}

					.imgBox_wrap_list {
						flex-direction: column;
						align-items: flex-start !important;
						margin-left: 142rpx;

						.addImgBox_text {
							margin-top: 20rpx;
							margin-bottom: 10rpx;
							font-size: 24rpx;
							color: #808080;
						}

						.addImgBox_btn {
							width: 184rpx;
							height: 66rpx;
							background-color: #5181F6;
							border-radius: 6rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.imgBox_list {
							width: 550rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 14rpx 26rpx 14rpx 40rpx;

							>view:first-child {
								display: flex;
								align-items: center;

								.u-icon {
									font-size: 40rpx;
									color: #B3B3B3;
								}

								>view:last-child {
									margin-left: 14rpx;
									width: 320rpx;
									font-size: 24rpx;
									color: #808080;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							>.u-icon {
								font-size: 32rpx;
								color: #7AC756;
							}
						}

						.imgBox_list_active {
							>view:first-child {

								.u-icon,
								>view:last-child {
									color: #5181F6;
								}
							}

							>.u-icon {
								color: #B3B3B3;
							}
						}

						.imgBox_list:nth-child(even) {
							background-color: #FBFBFB;
						}

						.imgBox_list:nth-child(odd) {
							background-color: #FFFFFF;
						}
					}

					.imgBox_wrap {
						display: flex;
						flex-wrap: wrap;
						margin-left: 192rpx;
						flex: 1;

						>view:not(:last-child) {
							margin-right: 26rpx;
						}

						>view {
							margin-bottom: 20rpx;
						}

						.imgBox {
							width: 112rpx;
							height: 120rpx;
							display: inline-flex;
							position: relative;
							border-radius: 8rpx;

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

							.deleteImg {
								position: absolute;
								right: -20rpx;
								top: -20rpx;
								color: #fff;
								width: 20rpx;
								height: 20rpx;
								background-image: url('@/static/workTicketManage/index-icon9.png');
								background-repeat: no-repeat;
								background-size: 100% 100%;

							}

						}

						.addImgBox {
							width: 118rpx;
							height: 120rpx;
							background: #FFFFFF;
							border-radius: 8rpx;
							border: 2rpx solid #D8DBE8;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;

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


				}

				>.box1:not(:first-child) {
					margin-top: 20rpx;
				}

				>.box1 {
					display: flex;
					align-items: flex-start;
					font-size: 28rpx;
					font-weight: 500;

					>view:first-child {
						width: 164rpx;
						color: #808080;
						height: 68rpx;
						display: flex;
						align-items: center;

						>text {
							color: #FF0000;
						}
					}

					>view:last-child {
						color: #4D4D4D;
						min-height: 68rpx;
						display: flex;
						align-items: center;
					}
				}

				/deep/ .u-input {
					width: 550rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D8DBE8;
				}

				.changetime {
					width: 550rpx;
					height: 68rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #D8DBE8;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 34rpx;
					font-size: 28rpx;
					color: #4D4D4D;

					.changetime_icon {
						width: 36rpx;
						height: 36rpx;
						background-image: url('@/static/workTicketManage/index-icon7.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}
				}

				.textarea {
					position: relative;

					/deep/ .u-input {
						// height: 160rpx;
						line-height: 68rpx;
						min-height: 160rpx !important;
						height: initial;
						padding-bottom: 20px !important;
					}

					.textarea_text {
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
						font-size: 22rpx;
						color: #B3B3B3;
					}
				}
			}

			.header-title {
				padding: 12rpx 16rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				border-bottom: 2rpx solid #EFF3F7;
			}
		}

		.confrim-btn {
			width: 100%;
			padding: 18rpx 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;
			position: fixed;
			bottom: 0;
			z-index: 1;

			>view {
				width: 50%;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:first-child {
				background-color: rgba(81, 129, 246, 0.1);
				border-radius: 6rpx 0rpx 0rpx 6rpx;
				color: #5181F6;
			}

			>view:last-child {
				background-color: #5181F6;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				color: #FFFFFF;
			}
		}
	}

	/deep/ .u-mode-center-box {
		width: 698rpx !important;

		.u-model__title {
			padding: 0;
			font-size: 32rpx;
			color: #272D45;
			height: 86rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.u-model__content__message {
			padding: 26rpx 26rpx 72rpx;
			font-size: 28rpx;
			color: #171717;
		}

		.u-model__footer__button {
			height: 76rpx;
			line-height: 76rpx;
			background-color: rgba(81, 129, 246, 0.1);
			font-weight: 500;
			font-size: 28rpx;
			color: #5181F6;
		}

		.hairline-left {
			background-color: #5181F6;
			color: white !important;
		}
	}

	/deep/ .u-drawer-bottom {
		border-radius: 32rpx 32rpx 0 0;
	}

	.content-popup {
		.content-popup_main {
			padding: 26rpx 0;

			>view {
				width: 100%;
				height: 80rpx;
				background-color: #FFFFFF;
				font-weight: 500;
				font-size: 30rpx;
				color: #1A1A1A;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:not(:first-child) {
				margin-top: 20rpx;
			}

			.popup_main_active {
				background-color: rgba(81, 129, 246, 0.1);
				color: #5181F6;
			}
		}

		uni-scroll-view {
			margin: 26rpx 0;
		}

		.content-popup_header {
			height: 86rpx;
			box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81, 129, 246, 0.42);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 30rpx;
			color: #1A1A1A;
		}

		.confrim-btn {
			padding: 18rpx 26rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;

			>view {
				width: 50%;
				height: 76rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view:first-child {
				background-color: rgba(81, 129, 246, 0.1);
				border-radius: 6rpx 0rpx 0rpx 6rpx;
				color: #5181F6;
			}

			>view:last-child {
				background-color: #5181F6;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				color: #FFFFFF;
			}
		}
	}

	.addIssue {
		min-height: 100vh;
		background-color: #FFFFFF;
	}

	/deep/ .u-steps {
		background-color: #FFFFFF;
		padding: 26rpx;

		.u-steps__item {
			flex: unset;

			.u-steps__item__dot {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				background-color: #F4333C !important;
				position: relative;
			}

			.u-steps__item__dot::after {
				content: "";
				width: 40rpx;
				height: 40rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.u-steps__item:nth-child(1) .u-steps__item__line {
			width: 230rpx;
			left: 80%;
		}

		.u-steps__item:nth-child(1) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

		.u-steps__item:nth-child(1) .u-steps__item__dot::after {
			background-image: url('@/static/workTicketManage/index-icon4.png');
		}

		.u-steps__item:nth-child(2) {
			flex: 1;

			.u-steps__item__line {
				width: 220rpx;
				left: 57%;

				.u-line {
					border-color: #F4353E !important;
					border-bottom: 4rpx solid #F4353E !important;
				}
			}

			.u-steps__item__dot::after {
				background-image: url('@/static/workTicketManage/index-icon5.png');
			}
		}

		.u-steps__item:nth-child(3) .u-steps__item__dot::after {
			background-image: url('@/static/workTicketManage/index-icon6.png');
		}

		.u-steps__item__line {
			top: calc(72rpx / 2) !important;

			.u-line {
				border-color: #038EE4 !important;
				border-bottom: 4rpx solid #038EE4 !important;
			}
		}

		.u-steps__item__text--row {
			font-weight: 500;
			font-size: 30rpx;
			color: #1A1A1A !important;
			margin-top: 12rpx;
		}
	}

	/deep/ .steps_1 {
		.u-steps__item:nth-child(2) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

		.u-steps__item:nth-child(2) .u-steps__item__line .u-line {
			border-color: #038EE4 !important;
			border-bottom: 4rpx solid #038EE4 !important;
		}
	}

	/deep/ .steps_2 {
		.u-steps__item:nth-child(3) .u-steps__item__dot {
			background-color: #008DE4 !important;
		}

	}

	/deep/ .steps_3 {
		.u-steps__item:nth-child(1) .u-steps__item__line {
			width: 520rpx;
			left: 80%;
		}

		.u-steps__item:nth-child(2) .u-steps__item__line {
			opacity: 0;
		}

		.u-steps__item:nth-child(2) .u-steps__item__dot {
			opacity: 0;
		}

	}

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

		/deep/ .headerBox {
			border-bottom: none;
		}

		.headerName {
			z-index: 1;
		}
	}

	.new-nodata_height {
		min-height: 500rpx;
		position: relative;
	}

	.new-nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 300rpx;
			height: 300rpx;
			background-image: url('@/static/staffAttendance/nodata.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		>text {
			font-size: 22rpx;
			color: #808080;
			margin-top: 60rpx;
		}
	}

	.content_main-box1 {
		height: 224rpx;
		// background-color: #FFFFFF;
		padding: 26rpx;

		/deep/ .uni-checkbox-input {
			width: 32rpx;
			height: 32rpx;
		}

		>view:last-child {
			margin-top: 22rpx;
			display: flex;
			align-items: center;

			>image {
				width: 80rpx;
				height: 104rpx;
				border-radius: 6rpx;
			}

			>view:last-child {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 40rpx;
				height: 104rpx;

				>view {
					display: flex;

					>view:first-child {
						width: 84rpx;
						font-size: 28rpx;
						color: #4D4D4D;
						text-align: right;
					}

					>view:last-child {
						margin-left: 40rpx;
						font-size: 28rpx;
						color: #4D4D4D;
					}
				}
			}
		}

		>view:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view:first-child {
				font-weight: 800;
				font-size: 30rpx;
				color: #171717;
			}

			>view:last-child {
				width: 90rpx;
				height: 42rpx;
				background-color: rgba(71, 195, 147, 0.1);
				border-radius: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 21rpx;
				color: #47C393;
			}

			.boundalready {
				background-color: rgba(113, 75, 0, 0.1) !important;
				color: #714B00 !important;
			}
		}
	}
</style>