<template>
	<div class="page">
		<headNav title="执法音视频详情"></headNav>

		<div class="content" v-if="info">
			<van-cell-group title="基本信息" inset>
				<van-cell class="custom-title" center :title="info.record_number">
					<template v-if="info.enforce_job">
						<span class="FontColorSuccess"><span class="dot">●</span>已关联</span>
					</template>
					<template v-else>
						<span class="FontColorError"><span class="dot">●</span>未关联</span>
					</template>
				</van-cell>
				<div class="info">
					<div class="img">
						<van-image :src="require('@/assets/device.png')" width="100"></van-image>
					</div>
					<div class="items">
						<van-cell title="记录时间" value-class="item-value" :value="info.recordTime" />
						<van-cell title="设备名称" value-class="item-value" :value="info.device_name" />
						<van-cell title="唯一标识" value-class="item-value" :value="info.serial_no" />
						<van-cell title="执行地点" value-class="item-value" :value="info.address" />
						<van-cell title="拍摄时长" value-class="item-value" :value="info.videoPeriod" />
						<van-cell title="执法机构" value-class="item-value" :value="info.enforce_org_name" />
						<van-cell title="使用人员" value-class="item-value" :value="info.use_person_name" />
					</div>
				</div>
				<div class="video" v-if="videoUrl">
					<player-video :url="videoUrl"></player-video>
				</div>
			</van-cell-group>
			<van-cell-group v-if="info.enforce_job" title="任务信息" inset>
				<van-cell is-link title="任务编号" :value="info.enforce_job.job_no" @click="showJobDetail" />
				<van-cell is-link title="被检查单位" :value="info.enforce_job.enforce_obj_name" @click="showCompanyDetail" />
			</van-cell-group>

			<div class="space"></div>
		</div>

		<!-- <div class="video">
			<player-video :url="'http://183.230.133.69:8081/tms/video/38?token=12345'"></player-video>
		</div> -->

		<v-mask :showOverLay="showOverLay"></v-mask>
	</div>
</template>

<script>
import { get } from '@/utils/http.js';
import headNav from '@/components/headNav.vue';
import baiduMap from '@/components/baiduMap.vue';
import playerVideo from '@/components/playerVideo.vue';
import mask_overLay from '@/components/overLay_xy.vue';
import 'videojs-contrib-hls';
import { dateFormat } from '@/utils/tool';

export default {
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay,
		playerVideo
	},
	data () {
		return {
			showOverLay: false,
			info: null,
			videoUrl: null,
		}
	},
	computed: {
		lawId() {
			return this.$route.params.ID
		}
	},
	mounted () {
		if (this.lawId) {
			this.loadDetails();
		}
	},
	methods: {
		loadDetails() {
			this.showOverLay = true;
			get(`/v2/api/video/${this.lawId}`).then(res => {
				res.recordTime = '';
				if (res.video_begin_time) {
					res.recordTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(res.video_begin_time));
				}
				res.videoPeriod = '';
				let count = 0;
				if (res.video_period) {
					count = parseInt(res.video_period);
				}
				if (count <= 0 && res.video_begin_time && res.video_end_time) {
					count = parseInt((new Date(res.video_end_time) - new Date(res.video_begin_time))/1000);
				}
				if (count > 0) {
					let str = [];
					const h = parseInt(count / 3600);
					if (h > 9) {
						str.push('' + h);
					}
					if (h > 0) {
						str.push('0' + h);
					}
					count = count % 3600;
					const m = parseInt(count / 60);
					str.push(m > 9 ? String(m) : '0' + String(m));
					const s = count % 60;
					str.push(s > 9 ? String(s) : '0' + String(s));
					res.videoPeriod = str.join(':');
				}
				else {
					res.videoPeriod = '00:00';
				}
				this.info = res;
				// if (res.record_number) {
					// rtmp hls
					get(`/v2/api/video/${res.id}/url`).then(result => {
						if (result && result.url) {
							this.videoUrl = result.url;
						}
					});
				// }
				this.showOverLay = false;
			});
		},
		showJobDetail() {
			if (this.info.enforce_job) {
				const type = this.info.enforce_job.job_type;
				const jobId = this.info.id;
				const objId = this.info.enforce_obj_id;
				if (type == 'NORMAL' || type == 'SPECIAL') {
					this.$router.push(`/task/detail/${jobId}/${objId}`);
					return;
				}
				if (type == 'TOWNS') {
					this.$router.push(`/town/detail/${jobId}`);
					return;
				}
				if (type == 'REPORT') {
					this.$router.push(`/reportListDetail/${jobId}`);
					return;
				}
				if (type == 'OTHER') {
					this.$router.push(`/otherListDetail/${jobId}`);
				}
			}
		},
		showCompanyDetail() {
			if (this.info.enforce_job && this.info.enforce_job.enforce_obj_id) {
				this.$router.push(`/companyInfo/${this.info.enforce_job.enforce_obj_id}`);
			}
		}
	}
}
</script>

<style lang="scss">
.custom-title {
	.van-cell__title {
		flex: 3;
	}
}
.custom-title::after {
	border-bottom: none !important;
}
</style>

<style lang="scss" scoped>
.dot {
	font-size: 10px;
}
.info {
	display: flex;
	justify-content: space-between;
	.items {
		flex: 1;
		max-width: calc(100% - 100px);
		.item-value {
			flex: 2;
			white-space: normal;
		}
	}
}
.video {
	margin: 10px 15px;
	padding-bottom: 10px;
	height: 240px;
}
.space {
	width: 100%;
	height: 20px;
}
</style>