<!-- 道路救援 首页-->
<template>
	<view class="content">
		<view class="dil">
			<!-- 顶部 -->
			<view class="top-two">
				<view class="top-left">
					<view class="left1">
						<text>当前空闲</text>
					</view>
					<view class="left2">
						<text>10条待确认</text>
					</view>
				</view>
				<view class="top-right">
					<view class="">
						<uni-icons type="location-filled" color="#4282D8" size="16"></uni-icons>
					</view>
					<view class="">泸州</view>
				</view>
			</view>
			<!-- 四个选项 -->
			<view class="four-box">
				<view class="boxf">
					<view class="zi1">待确认</view>
					<view class="zi2">0</view>
				</view>
				<view class="boxf1">
					<view class="zi1">进行中</view>
					<view class="zi2">0</view>
				</view>
				<view class="boxf2">
					<view class="zi1">已完成</view>
					<view class="zi2">0</view>
				</view>
				<view class="boxf3" @click="getyyz()">
					<view class="zi1" v-if="yy==true">开始营业</view>
					<view class="zi1" v-if="yy==false">营业中...</view>
					<!-- <view class="zi2">0</view> -->
				</view>
			</view>
			<!-- 标签切换  -->
			<view class="box-tap">
				<view class="tap-left">
					<view v-for="(item,index) in tapbox" :key="index">
						<view class="zi3" :class="{'acttext' : tapid == item.id }" @click="gettap(item.id)">
							{{item.text}}
						</view>
						<view class="gang" v-if=" tapid == item.id "></view>
					</view>


				</view>
				<!-- <view class="tap-right" @click="gohistory()">
				<view class="zi3">
					历史订单
				</view>
				<view class="">
					<uni-icons color: #666666; type="right" size="18"></uni-icons>
				</view>
			</view> -->
			</view>
			<view class="tap-box">

				<view class="boxt">
					<view class="boxt-left">
						<view class="left-lan">
							<view class="">搭电</view>
						</view>
						<view class="text1">目的地</view>
						<view class="text2">救援车辆距 <text class="lanzi"> 1.7KM</text> </view>
						<view class="text2">预计 <text class="lanzi">30分钟</text> 到达</view>
					</view>
					<view class="boxt-right">
						<view class="zhtai">
							<view class="">待支付</view>
						</view>
						<view class="dianhua">
							<view class="ticon">
								<image src="../../static/dh.png" mode=""></image>
							</view>
							<view class="">联系司机</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 一键救援 -->
			<view class="yijian">
				<view class="y-left" @click="getyi()">
					<view class="">司机端测试</view>
				</view>
				<view class="y-right">
					<view class="">列表</view>
				</view>

			</view>
			<view style="width: 100%; height: 80px; "></view>
			<!-- dibu -->
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue';

	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				counter: 0,
				timer: null,
				yy: true,
				arrbox: [{
						text: '待支付',
						id: 1
					},
					{
						text: '待评价',
						id: 2
					},
				],
				tapid: 1,
				tapbox: [{
						text: '待确认',
						id: 1
					},
					{
						text: '进行中',
						id: 2
					},
					{
						text: '已完成',
						id: 3
					},
				],
				userinfo: {},
				one: true,
				ws: null,
				timeout: null,
				heartbeatMessage: 'ping',
				heartbeatInterval: 5000, // 心跳间隔，单位：毫秒
				reconnectInterval: 1000, // 断线重连间隔，单位：毫秒
				lastHeartbeatTime: null, // 上一次心跳时间


			}
		},
		onLoad() {},
		onShow() {},
		components: {
			tabBar,
		},
		methods: {
			getStatus() {
				request({
					url: '/app/driver/getStatus?driverId=' + this.userinfo.userId,
					method: 'get',

				}).then((res) => {
					console.log('初次加载', res);
				})
			},
			getyyz() {
				this.yy = !this.yy
				if (this.yy == true) {
					this.getconnect()
				}

			},
			getone() {
				this.one = !this.one
			},
			//一键救援
			getyi() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			//预约
			getyue() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			//标签页的切换
			gettap(id) {
				this.tapid = id
			},
			gohistory() {
				uni.navigateTo({
					url: '/pages/rescue/historylist'
				})
			},
			beforeDestroy() {
				clearInterval(this.timer); // 销毁组件前清除定时器
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);

		background-color: #F6F6F6;

	}

	.dil {
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 45px 12px;
	}

	.top-two {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top-left {
		width: 180px;
		height: 26px;
		box-sizing: border-box;
		border-radius: 50px;
		background-color: #D1EDFF;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
	}

	.left1 {
		width: 50%;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
		font-size: 13px;
		color: white;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2 {
		width: 50%;
		background: #D1EDFF;
		font-size: 13px;
		color: #207EFE;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-right {
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: 400;
		color: #4282D8;
	}

	.four-box {
		margin-top: 15px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;


	}

	.boxf {
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/dzf.png');
		background-size: cover;
		background-position: center;
	}

	.boxf1 {
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/dpq.png');
		background-size: cover;
		background-position: center;
	}

	.boxf2 {
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/zxz.png');
		background-size: cover;
		background-position: center;
	}

	.boxf3 {
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/yyd.png');
		background-size: cover;
		background-position: center;
	}

	.zi1 {
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.zi2 {
		width: 100%;
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.box-tap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25px;
	}

	.tap-left {
		display: flex;

	}

	.tap-right {
		display: flex;
		align-items: center;
	}

	.zi3 {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
		margin-right: 10px;
	}

	.left-img1 {
		width: 65px;
		height: 15px;
		margin-right: 20px;

		// smargin-bottom: 10px;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.gang {
		width: 40px;
		height: 5px;
		border-radius: 50px;
		margin-top: 6px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}

	.tap-box {
		margin-top: 24px;
		background-color: #F6F6F6;
	}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 50%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 50%;
		height: 100%;
		position: relative;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -110px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yijian {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		background: #F3BA60;
		color: #542F0E;
		margin-top: 22px;
	}

	.y-left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70%;
		height: 100%;
		border-radius: 10px;
		background: #FFE3AC;
	}

	.y-right {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.acttext {
		font-weight: bold;
	}
</style>
