<template>
	<div class="roadDetails">
		<headNav :title="'占道详情'"></headNav>
		<div class="container">
			<!-- 基本信息 -->
			<div class="basicInfo mt57">
				<div class="basicInfoContent">
					<div class="basicContentItem fz13 df">
						<div class="label">
							车牌号
						</div>
						<div class="content FontColorInfo">
							{{ dataList.licensePlateNum }}
						</div>
					</div>
					<div class="basicContentItem fz13 df">
						<div class="label">
							违法类型
						</div>
						<div class="content FontColorInfo">
							【违法占道】
						</div>
					</div>
					<div class="basicContentItem fz13 df jfsb">
						<div class="label">
							检查地点
						</div>
						<div class="content specCont FontColorInfo df">
							<div class="OPoint mr5">
								{{ dataList.inspectionLocation }}
							</div>
							<div class="df aic">
								<van-icon name="location" @click="showMap = true" color="#0066cc" />
							</div>
						</div>
					</div>
					<div class="basicContentItem fz13 df">
						<div class="label">
							具体地点
						</div>
						<div class="content FontColorInfo">
							{{ dataList.specificLocation }}
						</div>
					</div>
					<div class="basicContentItem fz13 df">
						<div class="label">
							检查时间
						</div>
						<div class="content FontColorInfo">
							{{ $getTime(new Date(dataList.inspectionTime)) }}
						</div>
					</div>
				</div>
			</div>

			<!-- 车辆信息 -->
			<div class="basicInfo">
				<div class="basicInfoContent">
					<div class="basicContentItem fz13 df">
						<div class="label">
							车主姓名
						</div>
						<div class="content FontColorInfo">
							{{ dataList.vehicleOwnerName }}
						</div>
					</div>
					<div class="basicContentItem fz13 df">
						<div class="label">
							联系方式
						</div>
						<div class="content FontColorInfo">
							{{ dataList.vehicleOwnerPhone }}
						</div>
					</div>
				</div>
			</div>

			<!-- 违法证明 -->
			<div class="IllProve">
				<div class="proveContent">
					<div class="time df jfsb">
						<div class="FontColorNormal fz12">拍摄照片</div>
					</div>
					<div class="img df jfsb mt10">
						<template v-if="imgArr.length > 0">
							<van-image 
								width="3rem" 
								height="3rem"
								:key="index"
								v-for="(item, index) in imgArr"
								:src="item" 
								@click="preview(item)" />
						</template>
					</div>
					<div class="mt20 mb20 df jfsb aic">
						<div class="fz13 FontColorNormal">
							拍摄时间
						</div>
						<div class="fz13 FontColorInfo">
							{{ datetime }}
						</div>
					</div>
					<div class="person mt10 mb10 df jfsb aic">
						<div class="fz13 FontColorNormal">
							移离人员
						</div>
						<div class="fz13 FontColorInfo">
							{{ dataList.vehicleOwnerName }}
						</div>
					</div>
				</div>
			</div>

			<!-- 提示单 -->
			<div class="tips mt20">
				<div class="shortMsg">
					<van-cell is-link @click="linkToMsg($getTime(new Date(dataList.createTime)), 0)">
						<template #title>
							<div class="titleContent">
								<span class="custom-title">短信通知</span>
								<span class="FontColorInfo fz12">{{ $getTime(new Date(dataList.createTime)) }}</span>
							</div>
						</template>
						<template #default>
							已发送
						</template>
					</van-cell>
					<div class="noticeNum fz13 FontColorInfo pl15 pr15">
						对于实施停车违法嫌疑人在规定时间内通知到场，到场
						对违法事实无异议，责令改正后，自主移离车辆；消除
						消防违法行为。
					</div>
				</div>
			</div>

			<!-- 倒计时 -->
			<div class="countDown">
				<div class="countDownItem">
					<div class="df jfsb">
						<div class="FontColorNormal fz13">倒计时：</div>
						<div class="FontColorNormal fz14">
							<van-count-down :time="time" @finish="finishCountDown">
								<template #default="timeData">
									<span class="FontColorError fb">{{ timeData.minutes  }}</span>
									<span class="FontColorError fb">:</span>
									<span class="FontColorError fb">{{ timeData.seconds  }}</span>
								</template>
							</van-count-down>
						</div>
					</div>
				</div>
				<div class="countDownItem df jfsb mb20">
					<div class="FontColorNormal fz13">是否按规定移离违法车辆：</div>
					<div class="FontColorNormal fz13 df aic" @click="showRadio = true">
						<div class="FontColorOther fb" v-if="!isChoose">
							待确定移离情况
						</div>
						<div v-else>
							<div v-if="isMoved" class="FontColorSuccess fb">
								已移离车辆
							</div>
							<div v-else class="FontColorError fb">
								未移离车辆
							</div>
						</div>
						<div class="df dic ml10">
							<van-icon name="arrow" />
						</div>
					</div>
				</div>
			</div>
			
			<!-- 提示单 -->
			<div class="tips">
				<div class="headTip FontColorInfo">
					提示单
				</div>
				<div class="Notice">
					<van-cell is-link value="2021年01月01日" @click="turnToTips">
						<template #title>
							<div class="titleContent">
								<span class="custom-title">占用消防车通道违法行为告知单</span>
								<span v-if="gaozhiTime"
									class="FontColorInfo fz12">{{ $getTime(new Date(gaozhiTime)) }}</span>
							</div>
						</template>
						<template #default>
							<span v-if="gaozhiStatus">已上传</span>
							<span v-else>未上传</span>
						</template>
					</van-cell>
				</div>
			</div>

			<!-- 处罚决定书 -->
			<div class="decNotice mb20" v-if="isMove != '1'">
				<div class="headTip FontColorInfo">
					简易处罚决定书
				</div>
				<div class="Notice">
					<van-cell is-link value="2021年01月01日" @click="turnToPunish">
						<template #title>
							<div class="titleContent">
								<span class="custom-title">占用消防车通道简易处罚决定书</span>
								<span v-if="chufaTime" class="FontColorInfo fz12">{{ $getTime(new Date(chufaTime)) }}</span>
								<span v-else class="FontColorInfo fz12"></span>
							</div>
						</template>
						<template #default>
							<span v-if="chufaStatus">已上传</span>
							<span v-else>未上传</span>
						</template>
					</van-cell>
				</div>
				<div class="shortMsg">
					<van-cell is-link @click="linkToMsg($getTime(new Date(dataList.createTime)), 1)">
						<template #title>
							<div class="titleContent">
								<span class="custom-title">短信通知</span>
								<span class="FontColorInfo fz12">{{ $getTime(new Date(dataList.createTime)) }}</span>
							</div>
						</template>
						<template #default>
							<span v-if="isIssueMsgSend">
								已发送
							</span>
							<span v-else>
								未发送
							</span>
						</template>
					</van-cell>
				</div>
			</div>

		</div>

		<!-- 弹窗 -->
		<van-popup v-model="showRadio" position="bottom">
			<div class="popContent">
				<div class="topInfo">
					移离情况
				</div>
				<div class="inputContent">
					<van-radio-group v-model="isMove" :disabled="radioDisable">
						<div class="group">
							<div class="mt10 item borderItem">
								<van-radio :disabled="moveNotDisabled" icon-size="0.5rem" name="1">规定时限内移离车辆，不进行处罚
								</van-radio>
							</div>
							<div class="mt10 mb20 item">
								<van-radio :disabled="moveNotDisabled" icon-size="0.5rem" name="2">规定时限内未移离车辆，简易处罚并通知
								</van-radio>
							</div>
						</div>
					</van-radio-group>
				</div>
				<div class="popBtn">
					<div class="flex1" @click="showRadio = false">取消</div>
					<div class="FontColorSuccess flex1" @click="sureMove">确定</div>
				</div>
			</div>
		</van-popup>

		<!-- 弹出地图展示 -->
		<van-popup v-model="showMap" position="bottom" :style="{ height: '450px' }">
			<div>
				<baiduMap :center="center" :zoom="zoom"></baiduMap>
			</div>
		</van-popup>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
	import headNav from '@/components/headNav.vue'
	import baiduMap from '@/components/baiduMap.vue'
	import {
		ImagePreview
	} from 'vant'
	import {
		get,
		post,
		imgBaseUrl
	} from '@/utils/http.js'
	import axios from 'axios'
	import mask_overLay from '@/components/overLay_xy.vue'

	export default {
		name: 'roadDetails',
		data() {
			return {
				time: 5 * 60 * 1000,
				radioDisable: false,
				showMap: false,
				isMove: '1',
				isMoved: false,
				isChoose: false,
				showRadio: false,
				moveNotDisabled: false,
				dataList: '',
				center: '重庆市',
				zoom: 12,
				timeOver: false,
				imgArr: [],
				datetime: '',
				showOverLay: false,
				gaozhiStatus: true,
				gaozhiTime: '',
				chufaStatus: true,
				chufaTime: '',
				tipMsg: '',
				isIssueMsgSend: false,
			}
		},
		components: {
			headNav,
			baiduMap,
			'v-mask': mask_overLay
		},
		mounted() {
			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.getPagerListApi();
				this.getImgApi();
				this.getStatusApi();
			},
			
			goBack(){
			    this.$router.replace({path: '/carList'});
			    //replace替换原路由，作用是避免回退死循环
			},

			getPagerListApi() {
				this.showOverLay = true;
				this.showRadio = false;
				this.tipMsg = '加载中';
				get(`/v1/api/illegalOcc/getIllegalOccInfo?id=${ this.$route.params.ID }`).then(res => {
					if (res.msg == '操作成功') {
						this.showOverLay = false;
						this.center = res.data.inspectionLocation ? res.data.inspectionLocation : '重庆市';
						this.dataList = res.data;
						if (this.dataList.ifMovingCar == '1') {
							this.isIssueMsgSend = true;
							this.isChoose = true;
							this.isMoved = false;
							this.showRadio = false;
							this.radioDisable = true;
							this.isMove = '2';
							this.time = 0;
						} else if (this.dataList.ifMovingCar == '0') {
							this.isChoose = true;
							this.isMoved = true;
							this.showRadio = false;
							this.radioDisable = true;
							this.moveNotDisabled = true;
							this.isMove = '1';
							this.time = 0;
						} else {
							const moveTime = new Date(this.dataList.movingCarTime);

							if (new Date().getTime() - this.dataList.movingCarTime < -500) {
								this.time = this.dataList.movingCarTime - new Date().getTime();
								this.moveNotDisabled = false;
							} else {
								this.time = 0;
								this.isMove = '2';
								this.moveNotDisabled = false;
							}
						}
					}
				});
			},

			// 获取图片信息
			getImgApi() {
				get('/v1/api/imageAddress/imageInfos', {
					illegalOccId: this.$route.params.ID,
					imageType: '0'
				}).then(res => {
					this.imgArr = [];
					this.datetime = this.$getTime(new Date(res.data.createTime));
					res.data.fileAddress.forEach(item => {
						// let src = imgBaseUrl + item;
						this.imgArr.push(`/v1/api/${item}`);
					});
				});
			},

			getStatusApi() {
				get(`/v1/api/imageAddress/imageInfos`, {
					illegalOccId: this.$route.params.ID,
					punishTypeName: '1'
				}).then(res => {
					if (res.data === 'noImage') {
						this.gaozhiStatus = false;
						this.gaozhiTime = '';
					} else {
						this.gaozhiTime = res.data.createTime;
					}
				});

				get(`/v1/api/imageAddress/imageInfos`, {
					illegalOccId: this.$route.params.ID,
					punishTypeName: '2'
				}).then(res => {
					if (res.data === 'noImage') {
						this.chufaStatus = false;
					} else {
						this.chufaTime = res.data.createTime;
					}
				}).catch(err => {
					this.chufaStatus = false;
				});

			},

			// 后退
			backPage() {
				this.$router.push('/carList');
			},

			// 短信通知
			linkToMsg(time, index) {
				if (index == 0) {
					var content =
						`【${ this.dataList.institutionalUnit }】您的${ this.dataList.licensePlateNum }于${ this.$getTime( new Date(this.dataList.inspectionTime)) }停放在${this.dataList.inspectionLocation}${this.dataList.specificLocation}消防车通道，该行为涉嫌违反了《中华人民共和国消防法》第六十条之规定，（按照《行政处罚法规定》，5分钟内驶离的，属于违法行为轻微，依法可以不予行政处罚。）。`;
				} else {
					var content =
						`【${ this.dataList.institutionalUnit }】您的${ this.dataList.licensePlateNum }于${ this.$getTime( new Date(this.dataList.inspectionTime)) }停放在${this.dataList.inspectionLocation}${this.dataList.specificLocation}消防车通道，该行为涉嫌违反了《中华人民共和国消防法》，我支队拟对违法行为给予行政处罚。请于5个工作日内携带车辆行驶证原件、当事人有效身份证件到街道所在区消防救援支队配合调查处理，或关注微信公众号重庆消防，在“违法处理”专栏进行线上处理。特别告知:未在30个工作日内接受处理的，将列为消防安全领域严重失信行为，依法纳入全国信用信息共享平台。【62583390】`;
				}

				this.$router.push(`/shortMsgInfo/${content}/${time}`);
			},

			// 查看提示单
			turnToTips() {

				this.$router.push(`/behaviorNotice/1/${ this.$route.params.ID }`);
			},

			// 查看处罚单
			turnToPunish() {
				this.$router.push(`/behaviorNotice/2/${ this.$route.params.ID }`);
			},

			// 倒计时结束
			finishCountDown() {
				this.timeOver = true;
				this.getPagerListApi();
			},

			// 预览图片
			preview(src) {
				ImagePreview([src]);
			},

			// 确定是否移离
			sureMove() {
				if (this.isMove == '1') {
					if (this.radioDisable) {
						this.$toast.fail('请勿重复提交');
						return;
					}
					post('/v1/api/illegalOcc/ifMovingCar', {
						id: this.$route.params.ID,
						ifMovingCar: '0'
					}).then(res => {
						if (res.msg == '操作成功') {
							this.isMove = '1';
							this.getPagerListApi();
						} else {
							this.$toast.fail(`${ res.msg }`);
						}
					});
				} else {
					if (this.radioDisable) {
						this.$toast.fail('请勿重复提交');
						return;
					}
					if (true || this.timeOver) {
						post('/v1/api/illegalOcc/ifMovingCar', {
							id: this.$route.params.ID,
							ifMovingCar: '1'
						}).then(res => {
							if (res.msg == '操作成功') {
								let content = `【${ this.dataList.institutionalUnit }】您的${ this.dataList.licensePlateNum }于${ this.$getTime( new Date(this.dataList.inspectionTime)) }停放在${this.dataList.inspectionLocation}${this.dataList.specificLocation}消防车通道，该行为涉嫌违反了《中华人民共和国消防法》，我支队拟对违法行为给予行政处罚。请于5个工作日内携带车辆行驶证原件、当事人有效身份证件到**区消防救援支队配合调查处理，或关注微信公众号重庆消防，在“违法处理”专栏进行线上处理。特别告知:未在30个工作日内接受处理的，将列为消防安全领域严重失信行为，依法纳入全国信用信息共享平台。【62583390】`;

								this.showOverLay = true;
								this.tipMsg = '短信发送中';
								get('/v1/api/illegalOcc/sendSmsMessage', {
									phone: this.dataList.vehicleOwnerPhone,
									smsType: '1',
									id: this.$route.params.ID
								}).then(res => {
									this.showOverLay = false;
									if (res.msg == "操作成功") {
										this.$toast.success(`发送成功`);
										this.getPagerListApi();
									}
								}).catch(err => {
									if (err) {
										this.$toast.fail(`发送失败`);
										this.showOverLay = false;
										this.getPagerListApi();
									}
								});
							} else {
								this.$toast.fail(`${ res.msg }`);
							}
						});

					} else {
						this.$toast.fail('还未到五分钟');
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.roadDetails {
		margin-top: 38px;

		.headTip {
			margin-top: 10px;
			font-size: 14px;
			padding-left: 15px;
			padding-top: 10px;
			background-color: #FFFFFF;
			color: #666666;
		}

		.container {
			margin-top: 10px;
			width: 100%;
			height: calc(100vh - 40px);
			overflow-y: auto;
		}

		.label {
			width: 80px;
			text-align: left;
			color: #454547;
		}

		.mt57 {
			margin-top: 67px;
		}

		.basicInfo {
			margin-top: 10px;

			.basicInfoContent {
				background-color: #fff;
				padding: 10px 15px;

				.headInfo {
					padding: 5px 0;
				}

				.basicContentItem {
					align-items: center;
					justify-content: space-between;
					padding: 8px 0px;

					.content {
						width: 60%;
						text-align: right;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

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

		.IllProve {
			margin-top: 10px;

			.proveContent {
				background-color: #fff;
				padding: 10px 15px;

				.img {
					flex-wrap: wrap;
					
					.van-image {
						margin: 3px 0;
					}
				}
			}
		}

		.tips {

			.Notice {
				background-color: #fff;
				padding: 10px 0px;
				border-bottom: 1px solid #efefef;
			}

			.shortMsg {
				background-color: #fff;
				padding: 10px 0px;
			}

			.countDown {
				background-color: #fff;
				padding: 10px 0px;
			}


		}

		.titleContent {
			display: flex;
			flex-direction: column;
		}

		.countDown {
			margin-top: 20px;

			.countDownItem {
				background-color: #fff;
				padding: 10px 15px;
			}

		}

		.decNotice {

			.Notice {
				background-color: #fff;
				padding: 10px 0px;
			}
		}

		.popContent {
			padding: 10px 20px;
			padding-bottom: 0;
			font-size: 14px;


			.topInfo {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5px 0;
				color: #323233;
			}

			.totalTime {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #acacac;
				padding: 5px 0;
			}

			.popBtn {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				margin-bottom: 10px;

				div {
					height: 40px;
					text-align: center;
					line-height: 40px;
					background-color: #e5e5e5;

					&:last-child {
						border-left: 1px solid #fff;
						background-color: #00aaff;
						color: #fff;
						margin-left: 2px;

						&:active {
							background: #06bdff;
						}
					}

					&:active {
						background: #eee;
					}
				}
			}

			.item {
				padding: 10px 0;
			}

			.borderItem {
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 20px;
			}
		}

		.overWrap {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			padding: 15px 20px;
			border-radius: 5px;

			.sendMsg {
				color: #818284;
				font-size: 18px;
				margin-top: 10px;
			}
		}
	}
</style>

<style lang="scss">
	.roadDetails {
		.van-cell.van-cell--clickable {

			&::after {
				border-bottom: none;
			}
		}

		.van-radio__label {
			font-size: 12px;
			margin-top: 2px;
		}

		.Notice {
			.van-cell__title {
				flex: 2;
			}
		}
		
		.van-radio {
			display: flex;
			justify-content: space-between;
			flex-direction: row-reverse;
		}
	}
</style>
