<template>
	<div class="lawAudioVideo">
		<headNav title="执法音视频"></headNav>

		<!-- 搜索 -->
		<div class="searchItem">
			<van-search
				v-model="searchValue"
				input-align="center"
				shape="round"
				@search="sureSearch"
				@clear="cancaelSearch"
				background="#ffffff"
				placeholder="请输入搜索内容"
			/>
		</div>

		<!-- 日期筛选 -->
		<div class="date_totalInfo">
			<div class="df jfsb topInfo">
				<div class="flex1">
					<van-cell>
						<template #title>
							<div class="df">
								<span class="custom-title" @click="show_time = true">
									{{ showDate }}
								</span>
								<div class="df aic FontColorInfo fz12" @click="show_time = true">
									<van-icon class="iconArrow" name="play"></van-icon>
								</div>
							</div>
						</template>
					</van-cell>
				</div>

				<div class="flex1">
					<van-cell>
						<template #default>
							<div class="df aic missionFlex">
								<span class="fz13" @click="show_mission = true">
									{{ showMission }}
								</span>
								<van-icon
									@click="show_mission = true"
									class="iconArrow"
									name="play"
								></van-icon>
							</div>
						</template>
					</van-cell>
				</div>

				<!-- 时间弹窗 -->
				<van-popup v-model="show_time" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						title="选择年月"
						:min-date="minDate"
						:max-date="maxDate"
						@cancel="show_time = false"
						@confirm="chooseDate"
					/>
				</van-popup>

				<!-- 任务弹窗 -->
				<van-popup v-model="show_mission" position="bottom">
					<van-picker
						show-toolbar
						title="任务记录"
						:columns="missionSelect"
						@cancel="show_mission = false"
						@confirm="chooseStatus"
					/>
				</van-popup>
			</div>
			<div class="totalCar">
				<div class="mr20">
					今日记录：
					<span>{{ listTable.length }}</span>
					条
				</div>
			</div>
		</div>

		<div class="missionList">
			<div class="tabItem" v-for="item in listTable" :key="item.id" @click="goDetial(item.id)">
				<div class="tabItem_head">
					<div class="tabItem_head_content">
						<span class="fz14 fb FontColorNormal">{{ returnTime(item.createTime) }}</span>
						<span class="mr10 fz12 FontColorOther">【执法时间】</span>
					</div>
				</div>

				<div class="tabItem_body">
					<div class="tabItem_body_item df jfsb">
						<div class="df">
							<div class="label mr5 ">执行地点：</div>
							<span class="mr5 FontColorNormal">{{ item.executionPlace }}</span>
						</div>
						<div class="content">
							<van-icon name="location" color="#0066FF" @click.stop="openMap(item.executionPlace)"></van-icon>
						</div>
					</div>
					<div class="tabItem_body_item">
						<div class="label">任务：</div>
						<div class="content">{{ item.taskName?item.taskName:'— —' }}</div>
					</div>
					<div class="tabItem_body_item df">
						<div class="flex1 df">
							<div class="label">执行设备：</div>
							<div class="content">{{ item.enforceDevice?item.enforceDevice:'— —' }}</div>
						</div>
						<div class="flex1 df">
							<div class="label">内存：</div>
							<div class="content">{{ item.memorySize?item.memorySize:'— —' }}</div>
						</div>
					</div>
					<div class="tabItem_body_item">
						<div class="label">执行人员：</div>
						<div class="content">{{ item.usedPerson?item.usedPerson:'— —' }}</div>
					</div>
				</div>
			</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 } from '@/utils/http.js';
import headNav from '@/components/headNav.vue';
import baiduMap from '@/components/baiduMap.vue';
import mask_overLay from '@/components/overLay_xy.vue';

export default {
	name: 'lawAudioVideo',
	components: {
		headNav,
		baiduMap,
		'v-mask': mask_overLay
	},
	mounted() {

	},
	data() {
		return {
			searchValue: '',
			show_time: false,
			showMap: false,
			show_mission: false,
			showOverLay: false,
			currentDate: new Date(),
			minDate: new Date(2000, 0, 1),
			maxDate: new Date(2050, 10, 1),
			showDate: '',
			showMission: '全部记录',
			todayMisNum: 1,
			todayMisTime: 1.5,
			missionSelect: ['全部记录', '基础检查', '其他检查'],
			listTable: [],
			center: '重庆市',
			zoom: 15,
			searchInfo: {
				limit: 9999,
				page: 1
			}
		};
	},
	mounted() {
		this.init();
		// if (window.history && window.history.pushState) {
		// 	history.pushState(null, null, document.URL);
		// 	window.addEventListener('popstate', this.backPage, false);
		// }
	},
	// destroyed() {
	// 	window.removeEventListener('popstate', this.backPage, false);
	// },
	methods: {
		async init() {
			this.showDate = this.$getTime(new Date()).split(' ')[0];
			
			this.getPagerListApi();
		},

		// 获取日常检查列表Api
		async getPagerListApi() {
			this.showOverLay = true;
			
			await get('audioVideo/enforceAudioVideoTab', this.searchInfo).then(res => {
				this.showOverLay = false;
				
				if (res.code == '0') {
					this.listTable = res.data;
				} else {
					if (res.msg == '当前用户未绑定设备') {
						this.$toast.fail(res.msg);
					} else {
						this.$toast.fail('请求错误');
					}
				}
			});
		},

		// 关闭遮罩层
		closeOverLay() {
			this.showMap = false;
		},

		getItemTime(item) {
			if (item.checkContTime) {
				return parseFloat(item.checkContTime) + parseFloat(item.commutingTime) + 'h';
			} else {
				return '— —';
			}
		},
		
		returnTime (date) {
			const time = this.$getTime(new Date(date));
			// console.log(time)
			return time;
		},

		// 设置地图中心
		setCenter(location) {
			this.showMap = true;
			this.center = location;
		},

		// 后退
		// backPage() {
		// 	exitCurrentUi();
		// },

		// 选择了一个时间
		chooseDate(value) {
			this.showDate = this.$getTime(value).split(' ')[0];
			
			this.searchInfo.createTime = this.showDate;
			
			this.getPagerListApi();
			this.show_time = false;
		},

		// 选择了一个状态
		chooseStatus(value, index) {
			if (index == 0) {
				this.searchInfo.executeStatus = '';
			} else {
				this.searchInfo.executeStatus = index;
			}
			
			this.show_mission = false;
			this.showMission = value;
			
			this.searchInfo.avTaskType = index == 0 ? '' : (index - 1).toString();
			
			this.getPagerListApi();
		},
		
		openMap(address) {
			this.showMap = true;
			this.center = address;
		},

		// 确定搜索
		sureSearch(val) {
			this.searchInfo.taskName = this.searchValue;

			this.getPagerListApi();
		},

		// 取消搜索
		cancaelSearch() {
			this.searchInfo.taskName = '';
			this.getPagerListApi();
		},

		goDetial(id) {
			this.$router.push(`/lawDetail/${id}`);
		}
	}
};
</script>

<style scoped lang="scss">
.lawAudioVideo {
	.searchItem {
		margin-top: 45px;
	}

	.date_totalInfo {
		background-color: #fff;
		padding-bottom: 10px;
		border-bottom: 1px solid #d9d9d9;
		border-top: 1px solid #d9d9d9;
	}

	.missionList {
		margin-top: 10px;
		height: calc(100vh - 200px);
		overflow-y: auto;
		font-size: 13px;

		.tabItem {
			background-color: #fff;
			margin: 10px 15px;
			padding: 10px 15px;
			border-radius: 5px;
			border-bottom: 1px solid #e6e6e6;
		}

		.tabItem_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #fcfcfc;
			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: 65px;
					min-width: 65px;
				}

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

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

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

	.totalCar {
		font-size: 12px;
		color: rgb(153, 153, 153);
		padding-left: 15px;
		display: flex;
	}

	.iconArrow {
		margin-top: -3px;
		transform: rotate(90deg);
		margin-left: 5px;
		color: #999999;
		font-size: 12px;
	}
}
</style>

<style lang="scss">
.lawAudioVideo {
	.van-search {
		padding: 10px 25px;

		.van-search__content.van-search__content--round {
			border: 1px solid #e1e1e1;
		}
	}

	.van-cell {
		&::after {
			border-bottom: none;
		}
	}

	.van-cell.van-cell--clickable {
		display: flex;
		align-items: center;
		color: #969696;

		.van-icon.van-icon-bars {
			margin-left: 5px;
		}
	}

	.headInfo_car {
		.van-cell__title {
			font-weight: bold;
			flex: 2;
			display: flex;
			align-items: center;
		}

		.van-cell {
			padding: 4px 0px;
		}

		.custom-title {
			color: #323232;
			display: inline-block;
			max-width: 120px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.van-cell.van-cell--clickable {
			padding: 0;
		}
	}

	.custom-title {
		color: #323233;
		font-size: 13px;
	}

	.date_totalInfo {
		.van-cell {
			background-color: #fff;
		}
	}

	.van-search {
		background-color: transparent !important;
	}

	.van-search__content.van-search__content--round {
		background-color: #fcfcfc;
	}
}
</style>
