<template>
	<view>
		<map
			subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
			:latitude="defauleMap.latitude" 
			:longitude="defauleMap.longitude"
			scale="17"
			:markers="markers" 
			show-location="true"
		></map>
		<view class="bot_time_card">
			<view class="width_font row_cen_space-between bor_bot">
				<view class="car_row">
					<image class="car_css" src="../../static/images/index/car_info_icon.png"></image>
					<view class="lef_bold">{{carInfo}}</view>
				</view>
				<view class="car_row" @tap="selectCar">
					<text>切换设备 </text>
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<view class="time_width row_cen_space-between">
				<view 
					v-for="(item,index) in timeType"
					:key='index' 
					:class=" index == timeIndex ? 'time_active' : '' "
					@tap="handleSelectTime(index)"
				>{{ item }}</view>
			</view>
			<view class="time_row bor_bot bor_top">
				<text class="time_name">开始时间：</text>
				<view class="time_value">
					<picker-time
						ref="startTime"
						:disabled="timeIndex !== 2"
						placeholder="请选择开始时间"
						:defaultValue="startTime"
						start="2000-02-03 00:00"
						end="2100-10-28 00:00"
						fields="minute"
						@change="changeStartPickerTime"
					></picker-time>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<view class="time_row bor_bot">
				<text class="time_name">结束时间：</text>
				<view class="time_value">
					<picker-time
						ref="endTime"
						:disabled="timeIndex !== 2"
						placeholder="请选择结束时间"
						:defaultValue="endTime"
						start="2000-02-03 00:00"
						end="2100-10-28 00:00"
						fields="minute"
						@change="changeEndPickerTime"
					></picker-time>
				</view>
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
			<view class="btn_css">
				<view class="btn" @click="goH5">开始播放</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {PickerTime} from '@/components/picker-time/picker-time.vue';
	const {urlList,https} = require('@/static/api');
	let today = ()=>{
	    let date = new Date();
	    const year = date.getFullYear()
	    const month = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`)
	    const day = (date.getDate() < 10 ? `0${date.getDate()}` : `${date.getDate()}`)
	    return {
	        startTime: `${year}-${month}-${day} 00:00`,
	        endTime: `${year}-${month}-${day} 23:59`
	    }
	};
	export default {
		components:{
			PickerTime
		},
		data() {
			return {
				carInfo:'',
				timeType:['昨天','今天','任意'],
				timeIndex:1,
				defauleMap:{
					latitude:'39.909',
					longitude:'116.39742',
				},
				markers:[],
				selectCarId:'',
	
				startTime:today().startTime,
				endTime: today().endTime,
			};
		},
		onLoad(options) {
			uni.showNavigationBarLoading()
			this.selectCarId = options.id;
			this.getCarInfo(options.id)
		},
		onShow() {
			this.getCarInfo(this.selectCarId)
		},
		methods:{
			// 切换车辆
			selectCar(){
				uni.navigateTo({
					url: '/pages/carList/carList',
				})
			},
			goH5(){
				uni.navigateTo({
					url: `/H5/pages/h5/h5?startTime=${this.startTime}&endTime=${this.endTime}&id=${this.selectCarId }&time=${this.timeIndex}`,
				})
			},
			handleSelectTime(idx){ 
				this.timeIndex = idx;
				if(idx == 0){
					this.startTime = this.yesterday().startTime;
					this.endTime = this.yesterday().endTime;
				}else{
					this.startTime = today().startTime;
					this.endTime = today().endTime;
				}
			},
			//获取车辆详情(设置中心点,起点)
			getCarInfo(id) {
				https(urlList.getCarInfo+'/'+id,'GET','','').then(data => {
					let carInfo = data.data;
					this.carInfo = `${carInfo.vehiclePlate} ${carInfo.vehicleCode?'('+carInfo.vehicleCode+')':''}`;
					this.defauleMap = {
						latitude:carInfo.latitude,
						longitude:carInfo.longitude,
					};
					this.markers = [{
						id: 9999,
						latitude: carInfo.latitude,
						longitude: carInfo.longitude,
						iconPath: '../../static/images/common/road.png',
						width: '16px',
						height: '30px',
						rotate: 90,
						anchor: {
							x: .5,
							y: .5
						},
					}];
					uni.hideNavigationBarLoading()
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					});
					uni.hideNavigationBarLoading()
				})
			},
			getNextDate(date, type) { 
			　　let dd = new Date(date.replace(/-/g, "/"));  //兼容ios
				const oneDay = 24 * 60 * 60 * 1000;
				let before;
			　　if(type == 1){
					before = dd.getTime() + oneDay;
				}else{
					before = dd.getTime() - oneDay;
				};
				dd.setTime(before);
				const year = dd.getFullYear();
				const month = dd.getMonth() + 1 < 10 ? `0${dd.getMonth() + 1}` : `${dd.getMonth() + 1}`;
				const day = dd.getDate() < 10 ? `0${dd.getDate()}` : `${dd.getDate()}`;
				const shi = date.slice(11,13);
				const fen = date.slice(14,16);
				console.log(year,month,day,shi,fen);
				const newTime = `${year}-${month}-${day} ${shi}:${fen}`;
			　　return newTime;
			},
			// 选择开始时间
			changeStartPickerTime(date) {
				let value = date.f3;
				this.startTime = value;
				let endTime = this.getNextDate(value,1);
				this.endTime = endTime;
			},
			// 选择结束时间
			changeEndPickerTime(date) {
				let value = date.f3;
				this.endTime = value;
				let startTime = this.getNextDate(value,-1);
				this.startTime = startTime
			},
			//昨天
			yesterday() {
				let date = new Date();
				date = new Date(date - 24 * 60 * 60 * 1000)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`)
				const day = (date.getDate() < 10 ? `0${date.getDate()}` : `${date.getDate()}`)
				return {
					startTime: `${year}-${month}-${day} 00:00`,
					endTime: `${year}-${month}-${day} 23:59`
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	map {
		width: 100vw;
		height: calc(100vh - 500rpx);
	}
	.lef_bold{
		margin-left: 5rpx;
		font-weight: bold;
	}
	.time_active{
		border-radius: 8rpx;
		padding: 1rpx 20rpx 1rpx 20rpx;
		background: #1B64F8FF;
		color: white;
	}
	.row_cen_space-between{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.bor_bot{
		border-bottom: 1rpx solid #e9e8ec;
	}
	.bor_top{
		border-top: 1rpx solid #e9e8ec;
	}
	.bot_time_card{
		width: 100%;
		height: 500rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		.width_font{
			width: 95%;
			height: 90rpx;
			font-size: 32rpx;
		}
		.car_row{
			display: flex;
			flex-direction: row;
			align-items: center;
			image{
				width: 37rpx;
				height: 30rpx;
			}
			text{
				font-size: 30rpx;
			}
		}
		.time_width{
			width: 60%;
			height: 90rpx;
			font-size: 31rpx;
		}
		.time_row {
			width: 95%;
			height: 90rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
		}
		.time_name{
			flex:1
		}
		.btn_css{
			width: 95%;
			padding: 20rpx 0rpx;
			display:flex;
			justify-content: center;
			.btn{
				height: 80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color:#1B64F8FF;
				color: white;
				font-size: 31rpx;
				border-radius:30rpx;
			}
		}
	}
</style>
