<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> -->

				<div class="flex1 total">
					本月记录：<span>{{ listTotal }}</span>条
				</div>

				<!-- 时间弹窗 -->
				<van-popup v-model="show_time" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="year-month"
						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">
			<van-list
				v-model="loading"
				:finished="finished"
				:immediate-check="false"
				finished-text="没有更多了"
				@load="getMorePagerList"
			>
				<div class="tabItem" v-for="item in listTable" :key="item.id" @click="goDetail(item.id)">
					<div class="tabItem_head">
						<div>{{ item.record_number }}</div>
						<template v-if="item.enfore_job_id">
							<div class="FontColorSuccess"><span class="dot">●</span>已关联</div>
						</template>
						<template v-else>
							<div class="FontColorError"><span class="dot">●</span>未关联</div>
						</template>
					</div>

					<div class="tabItem_body">
						<div class="tabItem_body_item df jfsb">
							<div class="df">
								<!-- @click.stop="openMap(item.executionPlace)" -->
								<div class="label mr5 ">执法地点：</div>
								<span class="mr5">{{ item.address }}</span>
								<!-- <van-icon name="location" color="#0066FF"></van-icon> -->
							</div>
						</div>
						<div class="tabItem_body_item">
							<div class="label">执法设备：</div>
							<div class="content">{{ item.device_name }}</div>
						</div>
						<div class="tabItem_body_item df">
							<div class="label">使用人员：</div>
							<div class="content">{{ item.use_person_name }}</div>
						</div>
						<div class="tabItem_body_item">
							<div class="label">记录时间：</div>
							<div class="content">{{ item.recordTime }}</div>
						</div>
					</div>
				</div>
			</van-list>
		</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 } 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 { notEmpty, dateFormat } from '@/utils/tool';
import { getInfo } from '@/utils/auth';
import dayjs from 'dayjs';

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

	},
	data() {
		return {
			loading: false,
      		finished: false,
			searchValue: '',
			show_time: false,
			showMap: false,
			show_mission: false,
			showOverLay: false,
			currentDate: new Date(),
      		currentMonth: new Date(),
			minDate: new Date(2000, 0, 1),
			maxDate: new Date(2050, 10, 1),
			showDate: '',
			showMission: '全部记录',
			todayMisNum: 1,
			todayMisTime: 1.5,
			missionSelect: ['全部记录', '基础检查', '其他检查'],
			listTable: [],
			listTotal: 0,
			center: '重庆市',
			zoom: 15,
			queryData: {
				size: 10,
				page: 1,
				sort: 'video_begin_time desc'
			}
		};
	},
	computed: {
		userId() {
			const info = getInfo();
			return info ? info.uid : null;
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		async init() {
			this.showDate = dateFormat('YYYY年mm月', this.currentDate);
			this.getPagerListApi();
		},
		getMorePagerList() {
			this.queryData.page++;
			this.getPagerListApi();
		},
		getPagerListApi() {
			this.showOverLay = true;
			let query = [];
			if (this.userId) {
				// query.push(`executor_ids==*${this.userId}*`);
			}
			if (this.currentDate) {
				// create_time
				query.push('video_begin_time>=' + dateFormat('YYYY-mm', this.currentDate));
				const end = dayjs(this.currentDate).add(1, 'month').format('YYYY-MM');
				query.push('video_begin_time<' + end);
			}
			// if (notEmpty(this.searchValue)) {
			// 	query.push(`enforce_obj_name==*${this.searchValue}*`);
			// }
			this.queryData.query = query.join(';');
			get('/v2/api/video', this.queryData).then(res => {
				let list = [];
				this.listTotal = res.total || 0;
				this.finished = res.total <= this.queryData.page * this.queryData.size;
				if (res.data) {
					list = res.data;
					list.map(item => {
						if (item.video_begin_time) {
							item.recordTime = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(item.video_begin_time));
						}
					});
				}
				if (this.queryData.page < 2) {
					this.listTable = list;
				}
				else {
					list = this.listTable.concat(list);
					this.listTable = list;
				}
				this.showOverLay = false;
			});
		},
		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;
		},
		chooseDate(value) {
			this.showDate = dateFormat('YYYY年mm月', value);
			this.queryData.page = 1;
			this.getPagerListApi();
			this.show_time = false;
		},
		openMap(address) {
			this.showMap = true;
			this.center = address;
		},

		// 确定搜索
		sureSearch(val) {
			this.queryData.page = 1;
			this.getPagerListApi();
		},
		cancaelSearch() {
			this.queryData.page = 1;
			this.getPagerListApi();
		},
		goDetail(id) {
			this.$router.push(`/lawDetail/${id}`);
		}
	}
};
</script>

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

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

	.missionList {
		margin-top: 10px;
		height: calc(100vh - 100px);
		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;
			font-size: 16px;
			font-weight: bolder;

			&>div:first-child {
				max-width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.dot {
				width: 4px;
				height: 4px;
				border-radius: 100%;
				font-size: 10px;
			}
		}

		.tabItem_body {
			margin-top: 5px;

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

				.label {
					color: #898989;
					width: 65px;
					min-width: 65px;
				}

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

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

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

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

	.total {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 14px;
		font-size: 14px;
		color: #323232;
	}

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

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

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

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

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