<template>
	<view class="addIssue">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					{{policeCameraInfo.devName}}
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<SwiperVideo v-show="!showDetail" ref="swiperVideoRef" @videoClick="videoClick" :height="800"
				:list="videoList" mode="number" @retryVideo="onRetryClick" :autoplay="false" />
			<scroll-view scroll-y="true"
				:style="{height: `calc(100% - ${mobileTopHeight + 44}px - 120rpx - 52rpx)`, top: `${mobileTopHeight + 44}px`}"
				v-show="showDetail" class="main-box">
				<view class="box-item">
					<view>设备名称:</view>
					<view>{{policeCameraInfo.devName}}</view>
				</view>
				<view class="box-item">
					<view>设备编号:</view>
					<view>{{policeCameraInfo.devSn}}</view>
				</view>
				<view class="box-item">
					<view>所属项目:</view>
					<view>{{projectSnName}}</view>
				</view>
				<view class="box-item">
					<view>设备状态:</view>
					<view class="state-box" :class="{ 'state-box_offline': policeCameraInfo.deviceState != 1 }">
						{{policeCameraInfo.deviceState == 1 ? "在线" : "离线"}}
					</view>
				</view>
				<view class="box-item">
					<view>风险状态:</view>
					<view class="state-box" :class="{ 'gfx_active': workTicketInfo.riskType == 2 }">
						{{workTicketInfo.riskType == 2 ? "高风险" : "一般风险"}}
					</view>
				</view>
				<view class="box-item">
					<view>工作票类型:</view>
					<view>{{workTicketInfo.typeName}}</view>
				</view>
				<view class="box-item">
					<view>工作票编号:</view>
					<view>{{workTicketInfo.workTicketNumber}}</view>
				</view>
				<view class="box-item">
					<view>施工区域:</view>
					<view>{{workTicketInfo.constructionAreaNames}}</view>
				</view>
				<view class="box-item">
					<view>申请单位:</view>
					<view>{{workTicketInfo.applicantNames}}</view>
				</view>
				<view class="box-item">
					<view>作业人员:</view>
					<view>{{workTicketInfo.operator}}</view>
				</view>
				<view class="box-item">
					<view>施工计划时间:</view>
					<view>{{workTicketInfo.constructionTimeBegin}}至{{workTicketInfo.constructionTimeEnd}}</view>
				</view>
				<view class="box-item">
					<view>申请时间:</view>
					<view>{{workTicketInfo.applicationTime}}</view>
				</view>
				<!-- <view class="box-content">
					<view>安全措施:</view>
					<view v-if="lineHeightFlag2"
						@click="workTicketInfo.expandMoreShow1 = !workTicketInfo.expandMoreShow1">
						{{workTicketInfo.expandMoreShow1 ? '收起': '展开更多'}}
					</view>
				</view>
				<view :class="{'webkit-clamp_2': lineHeightFlag2 && !workTicketInfo.expandMoreShow1}"
					id="box-content_detail2" class="box-content_detail">
					{{workTicketInfo.safetyMeasure}}
				</view> -->
				<view class="box-content">
					<view>作业内容:</view>
					<view v-if="lineHeightFlag1"
						@click="workTicketInfo.expandMoreShow = !workTicketInfo.expandMoreShow">
						{{workTicketInfo.expandMoreShow ? '收起': '展开更多'}}
					</view>
				</view>
				<view :class="{'webkit-clamp_2': lineHeightFlag1 && !workTicketInfo.expandMoreShow}"
					id="box-content_detail1" class="box-content_detail">
					{{workTicketInfo.workContent}}
				</view>

				<!-- <view class="box-item">
					<view>当前绑定监控:</view>
					<view>{{ itemListDevNameUp }}</view>
				</view>
				<view class="box-item">
					<view>施工地点:</view>
					<view>{{workTicketInfo.constructionAddr}}</view>
				</view> -->

				<!-- 敦煌升级 -->
				<!-- <view class="box-item">
					<view>班组:</view>
					<view>{{workTicketInfo.teamNames}}</view>
				</view> -->


				<view class="box-img">
					<view>作业票附件:</view>
					<view class="imgBox_wrap">
						<view class="imgBox" v-show="workTicketAttachmentList.length>0"
							v-for="(item,index) in workTicketAttachmentList" :key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)">
							</image>
						</view>
					</view>
				</view>
				<view class="box-img">
					<view>其他附件:</view>
					<view class="imgBox_wrap_list">
						<view class="imgBox_list imgBox_list_active" @click="previewImage(url_config+'image/'+item.url)"
							v-show="otherAttachmentList.length>0" v-for="(item,index) in otherAttachmentList"
							:key="index">
							<view>
								<u-icon name="file-text"></u-icon>
								<view>{{item.name}}</view>
							</view>
							<view @click.stop="deleteImg(item,3)">
								下载
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content-footer">
			<view class="" @click="onVideoStop">
				<image src="/static/stop-icon.png" mode=""></image>
			</view>
			<view :class="{'showDetail': showDetail}" @click="getDetail">
				<image src="/static/detail-icon.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import SwiperVideo from "@/components/u-swiper/swiper-video.vue"
	export default {
		components: {
			SwiperVideo,
		},
		data() {
			return {
				mobileTopHeight: 0,
				projectDetail: {},
				userInfo: {},
				list: [],
				itemId: "",
				policeCameraInfo: {},
				workTicketInfo: {
					workTicketNumber: "",
					applicants: [],
					applicantsName: "",
					constructionAreas: [],
					constructionAreasName: "",
					applicationTime: "",
					constructionTimeBegin: "",
					constructionTimeEnd: "",
					operatorsName: "",
					operators: [],
					workContent: "",
					safetyMeasure: "",
				},
				workTicketAttachmentList: [],
				safetyRiskAnalysisList: [],
				otherAttachmentList: [],
				lineHeightFlag1: false,
				lineHeightFlag2: false,
				showDetail: false,
				itemDetailList: [],
				projectList: [],
			}
		},
		onLoad(opts) {
			// this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));

			if (opts.itemId) {
				this.itemId = opts.itemId;
				this.getPoliceCameraItemQueryById();
			}
			if (opts.itemIdList) {
				const itemIdList = JSON.parse(opts.itemIdList);
				itemIdList.forEach(item => {
					this.getPoliceCameraItemQueryById(item);
				})
			}
			this.getSelectAllProjectInfoList();
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
		},
		methods: {
			onRetryClick(url, index) {
				console.log("触发了", url, index);
				const find = this.videoList[index].find(item => item.url == url);
				if (find) {
					console.log("触发了", find);
					var that = this
					var json = {
						itemId: find.itemId,
						streamType: find.defaultStreamType,
						type: "rtsp",
					}
					this.sendRequest({
						url: "xmgl/policeCameraItem/getVideoItemInfo",
						data: {
							...json,
						},
						method: "post",
						success(res) {
							find.url = res.result.videoInfo ? res.result.videoInfo.url : "";
						}
					});
				}
			},
			onVideoStop() {
				this.$refs.swiperVideoRef.stopVideo();
			},
			videoClick(row) {
				const find = this.itemDetailList.find(item => item.itemId == row.itemId);
				this.policeCameraInfo = find ? find : {};
			},
			// 通过id查询视频设备详情
			getPoliceCameraItemQueryById(itemId) {
				let data = {
					itemId: itemId ? itemId : this.itemId,
				}
				this.sendRequest({
					url: 'xmgl/policeCameraItem/queryById',
					method: 'get',
					data: data,
					success: res => {
						uni.hideLoading()
						if (res.code == 200) {
							if (itemId) {
								this.itemDetailList.push(res.result)
							} else {
								this.policeCameraInfo = res.result;
							}
							this.getPlayUrl(res.result);
						}
					}
				})
			},
			getPlayUrl(row) {
				var that = this
				var json = {
					itemId: row.itemId,
					// itemId: "1978266066171613186",
					streamType: row.defaultStreamType,
					type: "rtsp",
				}
				// json.streamType = this.streamType;
				this.sendRequest({
					url: "xmgl/policeCameraItem/getVideoItemInfo",
					data: {
						...json,
					},
					method: "post",
					success(res) {
						that.list.push({
							itemId: res.result.videoInfo ? res.result.videoInfo.itemId : "",
							defaultStreamType: row.defaultStreamType ? row.defaultStreamType : "",
							url: res.result.videoInfo ? res.result.videoInfo.url : "",
						});
					}
				});
			},
			getDetail() {
				var that = this;
				this.showDetail = !this.showDetail;
				if (!this.showDetail) return;
				this.sendRequest({
					url: 'xmgl/workTicket/queryById',
					method: 'GET',
					data: {
						id: this.policeCameraInfo.workTicketId,
					},
					success: res => {
						if (res.code == 200) {
							that.workTicketInfo = {
								...res.result,
								expandMoreShow: false,
								expandMoreShow1: false,
								itemList: res.result.itemList ? res.result.itemList.map(item => {
									return {
										...item,
										label: item.devName,
										value: item.itemId
									}
								}) : [],
							};
							that.otherAttachmentList = res.result.otherAttachment && Array.isArray(JSON
								.parse(
									res.result.otherAttachment)) ? JSON.parse(res.result
								.otherAttachment) : [];
							that.safetyRiskAnalysisList = res.result.safetyRiskAnalysis && Array
								.isArray(JSON
									.parse(res.result.safetyRiskAnalysis)) ? JSON.parse(res.result
									.safetyRiskAnalysis) : [];
							that.workTicketAttachmentList = res.result.workTicketAttachment && Array
								.isArray(
									JSON.parse(res.result.workTicketAttachment)) ? JSON.parse(res
									.result
									.workTicketAttachment) : [];
							setTimeout(() => {
								that.getLineCount();
							}, 500)
						}
					}
				})
			},
			getLineCount() {
				const that = this;
				uni.createSelectorQuery().in(this).select('#box-content_detail1').boundingClientRect(rect => {
					if (rect) {
						let lineHeight = parseInt(rect.height / uni.upx2px(20));
						if (lineHeight > 2) {
							that.lineHeightFlag1 = true;
						}
					}
				}).exec();
				uni.createSelectorQuery().in(this).select('#box-content_detail2').boundingClientRect(rect => {
					if (rect) {
						let lineHeight = parseInt(rect.height / uni.upx2px(20));
						if (lineHeight > 2) {
							that.lineHeightFlag2 = true;
						}
					}
				}).exec();
			},
			convertTo2DArray(arr, chunkSize = 6) {
				return arr.reduce((result, item, index) => {
					const chunkIndex = Math.floor(index / chunkSize);

					if (!result[chunkIndex]) {
						result[chunkIndex] = [];
					}

					result[chunkIndex].push(item);
					return result;
				}, []);
			},
			// 获取所有项目
			getSelectAllProjectInfoList() {
				let data = {
					sn: this.userInfo.sn,
				}

				this.sendRequest({
					url: 'xmgl/project/selectAllProjectInfoList',
					method: 'post',
					data: data,
					success: res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.projectList = res.result;
						}
					}
				})
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		},
		computed: {
			itemListDevNameUp() {
				return this.workTicketInfo.itemList ? this.workTicketInfo.itemList.map(item => item.devName).join('、') : ""
			},
			videoList() {
				const resultList = this.convertTo2DArray(this.list);
				return resultList;
			},
			projectSnName() {
				const find = this.projectList.find((item) => item.projectSn == this.workTicketInfo.projectSn);
				return find ? find.projectName : "";
			},
		}
	}
</script>

<style scoped lang="scss">
	.showDetail {
		background-color: #5190EC !important;
	}

	.main-box {
		padding: 26rpx;
		position: absolute;
		top: 0;
		width: calc(100% - 52rpx);
		background: rgba(17, 0, 0, 0.9);
		z-index: 20;

		.box-content_detail {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 4rpx;
		}

		.webkit-clamp_2 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 限制为两行 */
			overflow: hidden;
		}

		.box-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:last-child {
				font-size: 24rpx;
				color: #4D8EEC;
			}

			>view:first-child {
				font-size: 28rpx;
				color: #CCCCCC;
			}
		}

		.box-img {
			display: flex;
			flex-direction: column;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #CCCCCC;
			}

			.imgBox_wrap_list {
				flex-direction: column;
				align-items: flex-start !important;

				.imgBox_list {
					width: 100%;
					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;
						}
					}

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

				.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: calc(192rpx + 28rpx);
				flex: 1;

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

				>view {
					margin-bottom: 20rpx;
				}

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

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

				}
			}
		}


		.box-item {
			display: flex;
			align-items: center;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #CCCCCC;
			}

			>view:last-child {
				flex: 1;
				color: #FFFFFF;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				/* 限制为两行 */
				overflow: hidden;
			}
		}

		.state-box {
			padding: 8rpx 16rpx;
			min-width: 120rpx;
			color: white;
			background-color: #88cf65;
			border-radius: 8rpx;
			text-align: center;
			flex: initial !important;
		}

		.state-box_offline {
			background-color: #f7f7f7;
			color: #272d45 !important;
		}

		.gfx_active {
			background-color: #ff0000;
			color: #ffffff;
		}

		.box-item1>view:last-child {
			font-weight: 800;
			font-size: 30rpx;
			color: #171717;
		}

		/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;
			}

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

	.content {
		padding-bottom: 120rpx;
		height: 100vh;
		position: relative;
	}

	.content-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 114rpx;

		>view {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			background: #353535;
			display: flex;
			align-items: center;
			justify-content: center;

			>uni-image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

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

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

		/deep/ .headerBox {
			background-color: #000000;
			border-bottom: none;
			color: white;

			.uni-icons {
				color: white !important;
			}
		}

		.headerName {
			z-index: 1;
		}
	}
</style>