<style lang="scss" scoped>
	.battery-info-ctn{
		width: 100%;
		height: 100%;
		overflow: hidden;
		:not(not) {
			box-sizing: border-box;
		}
	}
	.bottom-nav-list-ctn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		padding: 12rpx 0;
		z-index: 2;
		box-shadow: 0px 0px 4px rgba(192,192,192,0.7);
		background-color: #fff;
		.bottom-nav-box{
			width: 20%;
			text-align: center;
			position: relative;
			&-text{
				font-size: $uni-font-size-sm;
			}
			.middle-icon{
				padding: 10rpx;
				border: 1px solid #eee;
				border-radius: 100%;
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				left: 50%;
				top: -40rpx;
				transform: translateX(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
				box-shadow: $box-shadow;
				z-index: 10;
				background-color: #fff;
			}
			.middle-text{
				position: absolute;
				bottom: -2rpx;
				left: 0;
				width: 100%;
				font-size: $uni-font-size-sm;
			}
		}
	}
	.map-ctn{
		width: 100vw;
		height: 100vh;
		// width: 100%;
		// height: 100%;
		// width: 750rpx;
		// height: 1334rpx;
	}
	.battery-info-content{
		position: absolute;
		left: 50%;
		top: 40rpx;
		z-index: 2;
		width: 680rpx;
		transform: translateX(-50%);
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		&-signal{
			display: flex;
		}
	}
	.battery-info-signal{
		display: flex;
		justify-content: space-between;
	}
	.battery-info-signal-gps,.battery-info-signal-gsm{
		display: flex;
		&-text{
			font-weight: bolder;
		}
	}
	.battery-info-row-two{
		display: flex;
		justify-content: space-between;
		font-size: $uni-font-size-sm;
	}
	.track-popup-ctn{
		width: 600rpx;
		.track-popup-title{
			text-align: center;
			border-bottom: 1px solid #eee;
			padding-bottom: 6rpx;
			padding-top: 30rpx;
		}
	}
	.track-popup-start-time{
		display: flex;
		padding: 0 30rpx;
		padding-top: 40rpx;
		&-label{
			padding-left: 15rpx;
			padding-right: 40rpx;
		}
	}
	.track-popup-end-time{
		display: flex;
		padding: 0 30rpx;
		padding-top: 40rpx;
		&-label{
			padding-left: 15rpx;
			padding-right: 40rpx;
		}
	}
	.track-popup-day{
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		&-btn{
			padding: 20rpx 40rpx;
		}
	}
	.tarck-popup-button{
		display: flex;
		border-top: 1px solid #eee;
		&-query,&-cancel{
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
		&-query{
			border-left: 1px solid #eee;
			color: #1989FA;
		}
	}
	.alarm-list{
		
	}
	.alarm-list-title{
		padding-left: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}
	.alarm-list{
		padding: 20rpx 30rpx;
	}
	.bottom-trace-ctn{
		position: absolute;
		left: 50%;
		bottom: 160rpx;
		transform: translateX(-50%);
		// width: 300rpx;
		z-index: 2;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: $box-shadow;
		font-weight: 550;
	}
</style>
	<!-- :style="{'height': pageHeight + 'px'}" -->
<template>
	<view class="battery-info-ctn">
		<map class="map-ctn" :markers="markers" :latitude="26.036984" :longitude="119.210329" :show-compass="false"></map>
		<view class="battery-info-content">
			<u-collapse>
				<u-collapse-item title="电池信息" >
					<view class="battery-info-signal ">
						<view class="battery-info-signal-gps">
							<view class="battery-info-signal-gps-text">GPS</view>
							<!-- <view class=""></view> -->
							<signal value="85"></signal>
						</view>
						<view class="battery-info-signal-gsm ">
							<view class="battery-info-signal-gsm-text">GSM</view>
							<signal value="60"></signal>
						</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">名称：哒哒哒哒哒哒</view>
						<view class="battery-info-row-right">状态：静止(54天)</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">编号：027023590110</view>
						<view class="battery-info-row-right">设防状态：撤防</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">控制：已通电</view>
						<view class="battery-info-row-right">定位类型：静止(54天)</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">当日里程：0</view>
						<view class="battery-info-row-right">总里程：499.1</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">电压：57.79（主店接通）</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">通信：2020年9月25日11:53:28</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">定位：2020年9月25日11:53:39</view>
					</view>
					<view class="battery-info-row-two pt20">
						<view class="battery-info-row-left">地址：福建省宁德市周宁县944县道</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="bottom-nav-list-ctn">
			<view class="bottom-nav-box" @click="openTrackFn">
				<tui-icon name="guiji" size="52"></tui-icon>
				<view class="bottom-nav-box-text pt10">轨迹</view>
			</view>
			<view class="bottom-nav-box" @click="openAlarmListFn">
				<tui-icon name="lingdang" size="52"></tui-icon>
				<view class="bottom-nav-box-text pt10">报警</view>
			</view>
			<view class="bottom-nav-box" @click="beginTraceFn">
				<view class="middle-icon pb10">
					<tui-icon name="zhuizong" size="52" :color="traceShowFlag?'#39CD5F':'#999999'"></tui-icon>
				</view>
				<view class="middle-text">追踪</view>
			</view>
			<view class="bottom-nav-box" @click="openBlackoutFn">
				<tui-icon name="duankailianjie" size="52"></tui-icon>
				<view class="bottom-nav-box-text pt10">断电</view>
			</view>
			<view class="bottom-nav-box" @click="electricityFlag = true">
				<tui-icon name="lianjie" size="52"></tui-icon>
				<view class="bottom-nav-box-text pt10">通电</view>
			</view>
		</view>
		<!-- 轨迹  -->
		<u-popup v-model="trackFlag" mode="center" border-radius="24">
			<view class="track-popup-ctn">
				<view class="track-popup-title">轨迹</view>
				<view class="track-popup-start-time">
					<u-icon name="clock"></u-icon>
					<text class="track-popup-start-time-label">开始时间</text>
					<text>2020-09-25 00:00:00</text>
					<u-picker mode="time" v-model="startTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
				</view>
				<view class="track-popup-end-time">
					<u-icon name="clock"></u-icon>
					<text class="track-popup-end-time-label">结束时间</text>
					<text>2020-09-25 15:27:42</text>
					<u-picker mode="time" v-model="endTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
				</view>
				<view class="track-popup-day">
					<view class="track-popup-day-btn">当天</view>
					<view class="track-popup-day-btn">昨天</view>
					<view class="track-popup-day-btn">前天</view>
				</view>
				<view class="tarck-popup-button">
					<view class="tarck-popup-button-cancel" @click="trackFlag = false">取消</view>
					<view class="tarck-popup-button-query" @click="tarckQueryBtnFn">查询</view>
				</view>
			</view>
		</u-popup>
		<!-- 警报列表 -->
		<u-popup v-model="alarmFlag" mode="bottom" border-radius="16" :closeable="true">
			<view class="alarm-content">
				<view class="alarm-list-title">报警</view>
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view class="alarm-list">
						<view v-for="index in 20" :key="index">
							第{{index}}个报警
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 追踪时间 -->
		<view class="bottom-trace-ctn" v-if="traceShowFlag">
			 <text>追踪时间：{{traceTimeStr}}</text>
		</view>
		<!-- 断电 -->
		<u-modal v-model="blackoutFlag" content="您确定是否进行断电操作" :show-cancel-button="true" :confirm="blackoutConfirmFn"></u-modal>
		<!-- 通电 -->
		<u-modal v-model="electricityFlag" content="您确定是否进行通电操作" :show-cancel-button="true" :confirm="electricityConfirmFn"></u-modal>
	</view>
</template>

<script>
import signal from "../../components/signal/signal"
let _this;
export default{
	data(){
		return {
			markers:[{
				id:"1",
				iconPath:"http://static.drgyen.com/app/hc-app-power/images/car.png",
				latitude:"26.036984",
				longitude:"119.210329",
				width:40,
				height:40
			}],
			trackFlag:false, // 轨迹
			alarmFlag:false, // 警报
			startTimePicker:false, // 开始时间选项
			endTimePicker:false, // 结束时间选项
			startTimeStr:"", // 开始时间
			endTimeStr:"", // 结束时间
			startTimeParams: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			// 追踪模块--------start
			traceSeconds:0, // 秒
			traceMinute:0, // 分钟
			traceHour:0, // 小时
			traceTimeStr:"00:00:00", // 计时
			traceTimer:null,
			traceShowFlag:false,
			// 追踪模块--------end
			blackoutFlag:false,
			electricityFlag:false
		}
	},
	onLoad() {
		_this = this;
		this.startTimeStr = new Date();
		console.log(this.startTimeStr,"this.startTimeStr")
		// let timer = setInterval(this.startTimer(),1000);
	},
	destroyed() {
		clearInterval(this.traceTimer);
	},
	methods:{
		openTrackFn(){
			console.log("打开轨迹");
			this.trackFlag = true;
		},
		openAlarmListFn(){
			console.log("打开警报");
			this.alarmFlag = true;
		},
		// 轨迹查询按钮
		tarckQueryBtnFn(){
			this.trackFlag = false;
		},
		// 开始追踪
		beginTraceFn(){
			this.traceShowFlag = !this.traceShowFlag;
			if (this.traceShowFlag) {
				this.traceTimer = setInterval(function(){
					_this.startTimer();
				},1000)
			} else{
				clearInterval(this.traceTimer);
			}
			
		},
		// 计时
		startTimer () {
			this.traceSeconds += 1;
			if (this.traceSeconds >= 60) {
				this.traceSeconds = 0;
				this.traceMinute = this.traceMinute + 1;
			}
			if (this.traceMinute >= 60) {
				this.traceMinute = 0;
				this.traceHour = this.traceHour + 1;
			}
			this.traceTimeStr = (this.traceHour < 10 ? '0' + this.traceHour : this.traceHour) + ':' + (this.traceMinute < 10 ? '0' + this.traceMinute : this.traceMinute) + ':' + (this.traceSeconds < 10 ? '0' + this.traceSeconds : this.traceSeconds);
		},
		// 打开断电提示框
		openBlackoutFn(){
			this.blackoutFlag = true;
		},
		// 确认断电
		blackoutConfirmFn(){
			this.blackoutFlag = false;
		},
		// 确认通电
		electricityConfirmFn(){
			this.electricityFlag = false;
		}
	},
	components:{signal}
}
</script>

