<template>
	<div class="lawDetail">
		<headNav :title="'任务执行'"></headNav>

		<div class="missionInfo">
			<div class="headTip_first">任务信息</div>

			<div class="missionContent">
				<div class="missionContent_time">
					<div class="time">{{ $getTime(new Date(detailData.startTime)) }}</div>
					<span class="tips">【执法时间】</span>
				</div>

				<div class="missionContent_device">
					<div class="missionContent_device_img">
						<van-image :src="require('@/assets/device.png')"></van-image>
					</div>
					<div class="missionContent_device_info">
						<div class="missionContent_device_info_item">
							<div class="label">设备名称</div>
							<div class="content">{{ detailData.enforceDevice }}</div>
						</div>
						<div class="missionContent_device_info_item">
							<div class="label">唯一标识</div>
							<van-popover
								trigger="click"
								placement="bottom-end"
								theme="dark"
								v-model="showDetail"
							>
								<div style="padding: 10px; font-size: 14px;">
									{{ detailData.uniqueNum }}
								</div>
								<template #reference>
									<div class="FontColorOther onlyLogo">
										{{ detailData.uniqueNum }}
									</div>
								</template>
							</van-popover>
						</div>
						<div class="missionContent_device_info_item">
							<div class="label">设备状态</div>
							<div class="content">{{ detailData.taskAssociate | getStatus }}</div>
						</div>
					</div>
				</div>

				<div class="timeInfo">
					<div>
						大小:
						<span>{{ detailData.memorySize ? detailData.memorySize : '— —' }}</span>
					</div>
				</div>

				<div class="video" v-if="playerOptions.sources[0].src">
					<video-player
						ref="videoPlayer"
						class="video-player vjs-custom-skin"
						:playsinline="true"
						:options="playerOptions"
					/>
				</div>
			</div>
		</div>

		<div class="missionCard">
			<div class="headTip">任务</div>

			<div class="missionCard_info">
				<div class="tabItem_head">
					<div class="tabItem_head_content">
						<span class="fz14 fb FontColorNormal">{{ detailData.taskName }}</span>
					</div>
				</div>

				<div class="tabItem_body">
					<div class="tabItem_body_item df jfsb aic">
						<div class="df">
							<div class="label mr5 FontColorInfo">任务地点：</div>
							<span class="mr5">{{ detailData.executionPlace }}</span>
						</div>
						<div class="content pr20">
							<van-icon
								name="location"
								color="#0066FF"
								@click="openMap(detailData.executionPlace)"
							></van-icon>
						</div>
					</div>
					<div class="tabItem_body_item df">
						<div class="flex1 df">
							<div class="label">任务时间：</div>
							<div class="content">
								{{ $getTime(new Date(detailData.startTime)) }}
							</div>
						</div>
					</div>
					<div class="tabItem_body_item df">
						<div class="flex1 df">
							<div class="label">根据时长：</div>
							<div class="content">{{ '— —' }}</div>
						</div>
					</div>
					<div class="tabItem_body_item">
						<div class="label">审批领导：</div>
						<div class="content">
							{{ detailData.approvalLeader ? detailData.approvalLeader : '— —' }}
						</div>
					</div>
					<div class="tabItem_body_item">
						<div class="label">检查人员：</div>
						<div class="content">{{ detailData.usedPerson }}</div>
					</div>
				</div>
			</div>
		</div>

		<div class="missionSummary">
			<div class="headTip">任务概述</div>

			<div class="missionSummary_content">
				{{ detailData.taskOverview ? detailData.taskOverview : '暂无' }}
			</div>
		</div>

		<!-- 弹出地图展示 -->
		<van-popup
			v-model="showMap"
			position="bottom"
			@click-overlay="closeOverLay"
			:style="{ height: '450px' }"
		>
			<div v-if="showMap"><baiduMap :center="center" :zoom="zoom"></baiduMap></div>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay"></v-mask>
	</div>
</template>

<script>
import { get, post, Post } from '@/utils/http.js';
import headNav from '@/components/headNav.vue';
import baiduMap from '@/components/baiduMap.vue';
import mask_overLay from '@/components/overLay_xy.vue';

import 'videojs-contrib-hls';

export default {
	name: 'lawDetail',
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay
	},
	filters: {
		getStatus(data) {
			if (data == '0') return '正常';
			else if (data == '1') return '启用';
			else if (data == '2') return '离线';
		}
	},
	data() {
		return {
			showOverLay: false,
			showDetail: false,
			showMap: false,
			detailData: '',
			center: '重庆市',
			zoom: 12,
			playerOptions: {
				autoplay: false, // 如果true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 导致视频一结束就重新开始。
				playbackRates: [0.7, 1.0, 1.5, 2.0],
				liveui: true,
				metadata: '', // 元数据信息 ，比如视频长度，尺寸等
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
						src: '' // 视频url地址
					}
				],

				poster: '', // 你的封面地址
				notSupportedMessage: '此视频暂无法播放', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: false,
					fullscreenToggle: true // 全屏按钮
				}
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		async init() {
			this.getPagerListApi();
		},

		// 获取日常检查列表Api
		async getPagerListApi() {
			this.showOverLay = true;

			let avUrl = 'xx';

			await get('audioVideo/selectOne?id=' + this.$route.params.ID).then(res => {
				this.showOverLay = false;

				this.detailData = res;

				avUrl = res.avAddress;
				// this.playerOptions.sources[0].src = res.avAddress;
				// this.playerOptions.sources[0].src = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
			});

			post('/supervision/getTrueVideoAddr', {
				size: '640x480',
				rtsp: avUrl,
				type: 'hls'
			}).then(res => {
				res.data && (avUrl = 'https://test.apcos.com' + res.data);
				
				this.playerOptions.sources[0].src = avUrl;
			});
			
		},

		// 打开地图
		openMap(address) {
			this.showMap = true;
			this.center = address;
		},

		// 关闭地图
		closeOverLay() {
			this.showMap = false;
		},

		// 后退
		backPage() {
			this.$router.go(-1);
		}
	}
};
</script>

<style lang="scss" scoped>
.lawDetail {
	font-size: 14px;

	.headTip {
		margin-left: 15px;
		color: #6b6b6b;
		text-indent: 0.5em;
		margin-top: 10px;
		margin-bottom: 10px;

		border-left: 4px solid #0066ff;
	}

	.missionInfo {
		.headTip_first {
			margin-top: 57px;
			margin-left: 15px;
			color: #6b6b6b;
			text-indent: 0.5em;

			border-left: 4px solid #0066ff;
		}

		.missionContent {
			margin: 0 15px;
			background-color: #fff;
			padding: 8px 10px;
			border: 1px solid #e1e1e5;
			border-radius: 5px;
			margin-top: 10px;

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

				.time {
					color: #686868;
					font-size: 14px;
					font-weight: 600;
				}

				.tips {
					color: #02baf6;
					font-size: 12px;
					margin-bottom: 3px;
				}
			}
		}

		.missionContent_device {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 120px;
			margin-top: 10px;

			.missionContent_device_img {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.missionContent_device_info {
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 100%;

				.missionContent_device_info_item {
					display: flex;
					justify-content: space-between;

					.label {
						width: 70px;
						color: #a6a6a6;
					}

					.content {
						color: #464646;
					}

					.onlyLogo {
						width: 100px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.timeInfo {
			display: flex;
			align-items: center;
			color: #6b6b6d;
			margin-top: 10px;
		}

		.video {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 12px 0;

			video {
				width: 100%;
			}
		}
	}

	.missionCard {
		.missionCard_info {
			background-color: #fff;
			margin: 0 15px;
			padding: 8px 10px;
			border-radius: 5px;
		}

		.tabItem_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f4;
			padding-bottom: 10px;

			.tabItem_head_content {
				display: flex;
			}
		}

		.tabItem_body {
			margin-top: 5px;

			.tabItem_body_item {
				display: flex;
				align-items: center;
				padding: 5px 0;

				.label {
					color: #ababab;
					width: 75px;
				}

				.content {
					margin-left: 5px;
					color: #898989;
					display: flex;
					align-items: center;
				}
			}

			.tabItem_body_content {
				color: #8d8d8d;
				line-height: 24px;
				font-size: 13px;
			}
		}
	}

	.missionSummary {
		.missionSummary_content {
			height: 60px;
			border: 1px solid #dfdfdf;
			background-color: #fff;
			margin: 0 15px;
			margin-bottom: 10px;
			padding: 8px 10px;
			color: #747474;
		}
	}

	// 调整播放器样式
	.video-player.video-player.vjs-custom-skin {
		width: 100%;
		height: 100%;
		display: block;
	}

	// .vjs-modal-dialog-content {
	// 	display: none;
	// }
}
</style>
