<template>
	<view id="warp">
		<view class="list">
			<view class="list_lef">
				<view class="l_l_top">超速报警</view>
				<view class="l_l_bot">{{overspeed}}km/h</view>
			</view>
			<view class="list_rig">
				<switch color="#1B64F8" :checked="isOverspeedAlarm"/>
				<view class="switch_shade" @tap='handleAwitch'></view>
			</view>
		</view>
		<view class="overspeedMask" v-if="showOverspeedMask">
			<view class="overspeedContainer">
				<view class="header">
					<text>超速设置</text>
				</view>
				<view class="middle">
					<text>限速(km/h)：</text>
					<input v-model="speedValue" type="number" />
				</view>
				<view class="footer">
				    <text @tap="showOverspeedMask=false">取消</text>
				    <text @tap="setOverspeed(true)">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	export default {
		data() {
			return {
				vehicleId:'',
				isOverspeedAlarm:false,
				overspeed:0,
				
				showOverspeedMask:false,   
				speedValue:80,
			};
		},
		onLoad(options) {
			this.vehicleId = options.id;
			this.getCarInfo(options.id);
		},
		methods:{
			handleAwitch(){
				const that = this;
				let value = this.isOverspeedAlarm;
				if(value){
					uni.showModal({
						title: '确定关闭?',
						content: '是否关闭该车超速报警设置',
						success: function (res) {
							if (res.confirm) {
								that.setOverspeed(false);
							}
						}
					})
					return
				}else{
					this.showOverspeedMask = true;
				}
			},
			getCarInfo(id){
				const that = this;
				https(urlList.getCarInfo+'/'+id,'GET','','').then(data => {
					that.isOverspeedAlarm = data.data.isOverspeedAlarm;
					that.overspeed = data.data.overspeed;
					that.speedValue = data.data.overspeed;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			// 确定
			setOverspeed(type){
				const that = this;
				const speedValue = this.speedValue;
				if(speedValue < 80){
					uni.showToast({
						title: '最低不能低于80哦',
						icon: 'none'
					});
					that.speedValue = 80;
					return
				}
				let vehicleId = that.vehicleId;
				https(urlList.setOverSpeed+'/'+vehicleId+'/'+type+'/'+speedValue,'PUT','','').then(data => {
					uni.showToast({
						title:'设置成功',
						icon:'none',
						duration:1500
					})
					that.overspeed = speedValue;
					that.isOverspeedAlarm = type;
					that.showOverspeedMask = false;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
#warp{
	width: 100%;
	display: flex;
	justify-content: center;
	.list{
		width: 700rpx;
		height: 150rpx;
		border-bottom: 1rpx solid #e6e6e6;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.list_lef{
			display: flex;
			flex-direction: column;
			color: #737373;
			.l_l_top{
				 font-size: 37rpx;
			}
			.l_l_bot{
				 font-size: 26rpx;
			}
		}
		.list_rig{
			position: relative;
			display: inline-block;
			.switch_shade{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index:11;
			}
		}
	}
	.overspeedMask{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		.overspeedContainer{
			width: 650rpx;
			height: 400rpx;
			z-index: 999;
			background: white;
			padding: 40rpx 60rpx 10rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			view{
				flex: 1;
			}
			.header{
				font-size: 40rpx;
				color: #282828;
				font-weight: bold;
			}
			.middle{
				display: flex;
				font-size: 30rpx;
				text{
					color: #6A6A6A;
				}
				input{
					width: 318rpx;
					border-bottom: 4rpx solid #1B64F8;
					padding-bottom: 4rpx;
				}
			}
			.footer {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 30rpx;
				color: #1B64F8;
				text{
					padding: 20rpx;
				}
				text:nth-child(1){
					color: #999999;
				}
			}
		}
	}
}
</style>
