<template>
	<div class="carList">
		<!-- <headNav 
		:title="'违法占道'" 
		:RText="'+'"
		@addRoad="addRoad"></headNav> -->
		<headNav @rightClick="addRoad" iconName="plus" title="违法占道"></headNav>
		
		<!-- 日期筛选 -->
		<div class="date_totalInfo">
			<div class="date">
				<van-cell class="topItem">
					<template #title>
						<div class="df aic">
							<div class="FontColorNormal" @click="show = true">{{ showDate }}</div>
							<div class="df aic FontColorInfo fz12">
								<van-icon class="iconArrow" name="play"></van-icon>
							</div>
						</div>
					</template>
					
					<template #default>
						<div class="totalCar">
							本月违法：<span>{{carItemData.length}}</span>条
						</div>
					</template>
				</van-cell>
				
				<van-popup v-model="show" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="year-month"
						title="选择年月"
						:min-date="minDate"
						:max-date="maxDate"
						@cancel="show = false"
						@confirm="chooseDate"
					/>
				</van-popup>
			</div>
		</div>
		
		<!-- 违法列表展示 -->
		<div class="carCard">
			<div class="cardItem" v-for="item in carItemData" :key="item.id">
				<div class="headInfo_car">
					<van-cell is-link @click="goDetial(item.id)">
					  <template #title>
					    <span class="custom-title">{{ item.licensePlateNum }}</span>
						<span class="carTips">【违法占道】</span>
					  </template>
					</van-cell>
				</div>
				<div class="content_car">
					<van-cell>
					  <template #title>
					    <span class="custom-title">占道地点：</span>
						<span>{{ item.inspectionLocation }}</span>
					  </template>
					  
					  <template #right-icon>
					      <van-icon @click="locaTion(item.inspectionLocation)" name="location" color="#0066cc" />
					  </template>
					</van-cell>
					
					<van-cell>
					  <template #title>
					    <span class="custom-title">具体地点：</span>
						<span>{{ item.specificLocation }}</span>
					  </template>
					</van-cell>
					
					<van-cell>
					  <template #title>
					    <span class="custom-title">执法时间：</span>
						<span class="timeStyle">{{ translateTime(item.executiveTime) }}</span>
					  </template>
					</van-cell>
					
					<van-cell>
					  <template #title>
					    <span class="custom-title">挪车期限：</span>
						<span class="timeStyle mr10">{{ translateTime(item.movingCarTime) }}</span>
						<span class="FontColorOther fb fz12" v-if="item.ifMovingCar == '0'"> ( 已挪车 )</span>
						<span class="FontColorError fb fz12" v-else-if="item.ifMovingCar == '1'"> ( 未挪车 )</span>
						<span class="FontColorNormal fz12" v-else> ( 待确定 )</span>
					  </template>
					</van-cell>
					
					<van-cell>
					  <template #title>
					    <span class="custom-title">短信通知：</span>
						<span class="mr10">{{ item.vehicleOwnerPhone }}</span>
						<span v-if="item.smsNotification == '0'" class="FontColorNormal fz12">( 已通知 )</span>
						<span v-else class="FontColorNormal fz12">( 未通知 )</span>
					  </template>
					</van-cell>
					
					<van-cell>
					  <template #title>
					    <span class="custom-title">处罚信息：</span>
						<span class="FontColorOther fb fz12" v-if="item.penaltyResult == '0'">规定期限内挪车, 警告通知</span>
						<span class="FontColorError fb fz12" v-else-if="item.penaltyResult == '1'">已处罚</span>
						<span class="FontColorWarn fb fz12" v-else>待确定</span>
					  </template>
					</van-cell>
				</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 headNav from '@/components/headNav.vue'
	import baiduMap from '@/components/baiduMap.vue'
	import { get, post } from '@/utils/http.js'
	import mask_overLay from '@/components/overLay_xy.vue'
	import moment from 'moment'
	
	export default {
		name: 'carList',
		data() {
			return {
				show: false,
				showTest: false,
				showMap: false,
				currentDate: new Date(),
				minDate: new Date(2000, 0, 1),
				maxDate: new Date(2025, 10, 1),
				showDate: null,
				carItemData: '',
				zoom: 15,
				center: '重庆市',
				searchInfo: {
					createTime: '',
					// createTime: '2021-04-16 09:01:34'
				},
				showOverLay: false
			}
		},
		components: {
			headNav,
			baiduMap,
			'v-mask': mask_overLay
		},
		mounted() {
			this.showDate = moment().format('YYYY-MM');
			this.searchInfo.createTime = this.showDate;
			this.init();
			// if (window.history && window.history.pushState) {
			//     history.pushState(null, null, document.URL);
			//     window.addEventListener('popstate', this.goBack, false);
			// }
		},
		// destroyed(){
		//   window.removeEventListener('popstate', this.goBack, false);
		// },
		methods: {
			init() {
				this.getPagerList();
			},
			
			// 获取页面
			getPagerList() {
				this.showOverLay = true;
				get(`/v1/api/illegalOcc/getIllegalOccInfos?createTime=${ this.searchInfo.createTime }`).then(res => {
					this.showOverLay = false;
					this.carItemData = res.data ? res.data : [];
					this.zoom = 15;
				});
			},
			// 新增占道
			addRoad() {
				this.$router.push('/addIllegalRoad');
			},
			
			closeOverLay() {
				this.showMap = false;
			},
			
			gettime(time) {
				if (time) {
					let _date;
					if (typeof time === 'number') {
						time = new Date(time);
					}
					_date = time.toLocaleDateString();
					_date = _date.split('/').join('-');
					return _date;
				} else {
					return '— —';
				}
			},

			translateTime(time){
				if(time){
					time = new Date(time);
					return moment(time).format("YYYY-MM-DD HH:mm")
				} else {
					return '— —';
				}
			},
			
			getFullTime(time) {
				if (time) {
					let _time;
					let _date;
					if (typeof time === 'number') {
						time = new Date(time);
					}
					_date = time.toLocaleDateString();
					_time = time.toLocaleTimeString('chinese', { hour12: false });
					_date = _date.split('/').join('-');
					return _date + ' ' + _time;
				} else {
					return '— —';
				}
			},
			
			// backPage() {
			// 	exitCurrentUi();
			// },
			
			// goBack() {
			// 	exitCurrentUi();
			// },

			// 选中筛选日期
			chooseDate() {
				this.show = false;
				// let DATE = this.currentDate.toLocaleDateString().split('/');
				// DATE.splice(1, 0, '年');
				// DATE.splice(3, 0, '月');
				// DATE.splice(5, 0, '日');
				// this.showDate = DATE.join('');
				this.showDate = moment(this.currentDate).format('YYYY-MM');
				this.searchInfo.createTime = this.showDate;
				this.getPagerList();
			},
			
			// 地图定位
			locaTion(location) {
				this.center = location;
				this.showMap = true;
			},
			
			// 跳转详情
			goDetial(ID) {
				
				this.$router.push(`/roadDetails/${ ID }`);
			},
			
			getMapCenter() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.totalCar {
		font-size: 12px;
		color: rgb(112, 112, 112);
	}
	
	.date_totalInfo {
		margin-top: 47px;
		background-color: rgb(245, 245, 245);;
	}
	
	.carCard {
		height: calc(100vh - 100px);
		overflow-y: scroll;
		
		.cardItem {
			margin: 10px 15px;
			border-radius: 5px;
			
			&:first-child {
				margin-top: 0;
			}
		}
		
		.headInfo_car {
			padding-top: 5px;
			background-color: #ffffff;
		}
		
		.carTips {
			color: rgb(112, 112, 112);
		}
		
		.content_car {
			color: rgb(112, 112, 112);
			font-size: 15px;
			border-bottom: 1px solid #c6c6c6;
			
			.timeStyle {
				color: #333;
				font-size: 14px;
			}
			
			.bm-view {
				width: 100%;
				height: 450px;
			}
		}
	}
</style>

<style lang="scss">
	.carList {
		
		.topItem {
			background-color: rgb(245, 245, 245);
		}
		
		.date_totalInfo {
			
			.van-cell.van-cell--clickable {
				padding-top: 7px;
				padding-bottom: 7px;
				
				&::after {
					border-bottom: none;
				}
			}
		
		}
		
		.iconArrow {
			transform: rotate(90deg);
			margin-left: 5px;
		}
		
		.carCard {
			
			.headInfo_car {
				
				.van-cell__title {
					font-weight: bold;
					flex: 2;
				}
				
				.van-cell {
					padding: 4px 15px;
				}
			}
		
			.content_car {
				
				.van-icon.van-icon-location {
					margin-right: 4px;
					line-height: 24px;
				}
				
				.van-cell {
					color: rgb(112, 112, 112);
					font-size: 13px;
					padding: 3px 15px;
					
					&::after {
						border-bottom: none;
					}
				}
			}
		}
		
		.van-nav-bar__right {
			
			.van-nav-bar__text {
				color: #6AA6FF;
			}
			
			span {
				font-size: 30px;
			}
		}
	}
</style>
