<template>
	<div class="missionRec">
		<headNav :title="'任务记录'"></headNav>
		
		<!-- 搜索 -->
		<div class="searchItem">
			<van-search 
			v-model="searchValue" 
			@search="sureSearch"
			@clear="cancaelSearch"
			input-align="center"
			shape="round"
			background="#ffffff"
			placeholder="请输入搜索内容" />
		</div>
		
		<!-- 日期筛选 -->
		<div class="date_totalInfo">
			<div class="date">
				<van-cell 
				is-link 
				@click="show = true"
				>
					<template #title>
						<span class="custom-title FontColorNormal">{{ showDate }}</span>
					</template>
					<template #right-icon>
						<van-icon class="icon_filter" name="filter-o" />	
						<span class="fz14 FontColorNormal">
							筛选
						</span>
				    </template>
				</van-cell>
				
				<van-popup v-model="show" position="bottom">
					<van-datetime-picker
					v-model="currentDate"
					type="date"
					title="选择年月日"
					:min-date="minDate"
					:max-date="maxDate"
					@cancel="show = false"
					@confirm="chooseDate"
					/>
				</van-popup>
			</div>
<!-- 			<div class="totalCar">
				任务记录：<span>{{ IllNum }}</span>条
			</div> -->
		</div>
		
		<div class="tabsItem">
			<div class="tabs">
				<van-tabs v-model="tabActive" swipeable animated>
				  <van-tab title="全部">
					  <missionRecCard :recordData="recordData" @openMap="setCenter"></missionRecCard>
				  </van-tab>
				  <van-tab title="检查正常">
					  <missionRecCard :recordData="recordData" @openMap="setCenter" :type="'normal'"></missionRecCard>
				  </van-tab>
				  <van-tab title="违规违法">
					  <missionRecCard :recordData="recordData" @openMap="setCenter" :type="'illegal'"></missionRecCard>
				  </van-tab>
				</van-tabs>
			</div>
			<div class="screen">
				
			</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 headNav from '@/components/headNav.vue'
	import missionRecCard from '@/components/missionRecCard.vue'
	import mask_overLay from '@/components/overLay_xy.vue'
	import { get, post } from '@/utils/http.js'
	import baiduMap from '@/components/baiduMap.vue'
	
	export default {
		name: 'missionRec',
		components: {
			headNav,
			missionRecCard,
			'v-mask': mask_overLay,
			baiduMap
		},
		data() {
			return {
				searchValue: '',
				tabActive: '',
				show: false,
				currentDate: new Date(),
				minDate: new Date(2000, 0, 1),
				maxDate: new Date(2025, 10, 1),
				showDate: '全部记录',
				IllNum: 1,
				recordData: [],
				searchInfo: {
					
				},
				showOverLay: false,
				showMap: false,
				center: '重庆市',
				zoom: 15,
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				this.showOverLay = true;
				await this.getRecordListApi();
				this.showOverLay = false;
			},
			
			async getRecordListApi() {

				await post('/applet/taskLog/list', this.searchInfo).then(res => {
					if (res.success === true) {
						this.recordData = res.data;
					} else {
						this.$toast.fail('获取失败');
					}
				}).catch(err => {
					this.$toast.fail('获取数据失败');
					this.showOverLay = false;
				});
			},
			
			// 后退
			// backPage() {
			// 	exitCurrentUi();
			// },
			
			chooseDate(val) {
				this.showDate = this.$getTime(this.currentDate).split(' ')[0];
				this.show = false;
				this.searchInfo.excuteTime = this.showDate;
				this.init();
			},
			
			// 确定搜索
			sureSearch(val) {
				this.searchInfo.unitName = this.searchValue;
				this.init();
			},
			
			// 取消搜索
			cancaelSearch() {
				this.searchInfo.unitName = '';
				this.getRecordListApi();
			},
			
			setCenter(location) {
				this.showMap = true;
				this.center = location;
			},
			
			closeOverLay() {
				this.showMap = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.missionRec {
		
		.searchItem {
			margin-top: 45px;
		}
		
		.date_totalInfo {
			background-color: #fff;
			border-bottom: 1px solid #ececec;
			margin-top: 10px;
			margin-bottom: 10px;
			
			.icon_filter {
				font-size: 14px;
				margin-right: 3px;
			}
		}
		
		.totalCar {
			font-size: 12px;
			color: rgb(153, 153, 153);
			padding-left: 15px;
		}
		
		// .tabsItem {
		// 	.tabs {
		// 		margin: 0 15px;
		// 	}
		// }
	}
</style>

<style lang="scss">
	.missionRec {
		.van-search {
			padding: 10px 25px;
			
			.van-search__content.van-search__content--round {
				border: 1px solid #e1e1e1;
			}
		}
		
		.van-cell {
			
			&::after {
				border-bottom: none;
			}
		}
		
		.van-tabs__line {
			background-color: #00f;
			width: 60px;
			border-radius: 0;
		}
		
		.van-tab--active {
			color: #00f;
		}
		
		.van-cell.van-cell--clickable {
			display: flex;
			align-items: center;
			
			.van-icon.van-icon-bars {
				margin-left: 5px;
			}
		}
	}
</style>
