<template>
	<view id="warp">
		<view class="tab_search">
			<uni-search-bar 
				style="width: 100%;"
				bgColor="white"
				placeholder="搜索车辆编号或车牌号"
				v-model="serchValue"
				@input="onSearch"
				clearButton="none"
			></uni-search-bar>
		</view>
		<swiper-tabs
			:height="200"
			:tabIndex="tabIndex"
			:topNavList="topNavList"
			@onSwiperChange="onSwiperChange"
			@onTopTabs="onTopTabs"
		>
			<block 
				v-for="(val,i) in topNavList"
				:key="i"
			>
				<scroll-view 
					:slot="i"
					style="width: 100%;height: 100%;"
					scroll-y
					scroll-top="0"
					refresher-enabled 
					scroll-anchoring
					:refresher-triggered="isHideLoading"
					@scrolltolower='upLoading' 
					@refresherrefresh='downLoading'
				>
					<view
						class="list_item" 
						v-for="(item,index) in carList" 
						:key="index"
						@tap="selectCar(item)"
					>
						<view class="list_item_top">
							<view class="list_item_lef">
								<image src="/static/images/index/car_info_icon.png"></image> 
								<view class="lef_r_plate">
									<block v-if="item.status == -1"> 
										<!-- 停用 -->
										<view class="l_r_p_top1"></view>
									</block>
									<block v-else>
										<block v-if="item.vehicleTaskStatus == 1">
											<!-- 任务中 -->
											<view class="l_r_p_top2"></view>
										</block>
										<block v-if="item.vehicleTaskStatus == 2">
											<!-- 空闲 -->
											<!-- <text></text> -->
										</block>
									</block>
								</view>
								{{item.vehicleCode || ''}}
								<text class="lef_r_rig">( {{item.vehiclePlate}} )</text>
							</view>
							<view class="list_item_right">
								<text v-if='item.gpsState == 1' style="color:#1AAD19">行驶: {{ item.speed }}km/h</text>
								<text v-else-if='item.gpsState == 2' style="color:#1B64F8">静止: {{ item.durationTime }}</text>
								<text v-else='item.gpsState == 0' style="color:#918f8f">离线: {{ item.offlineTime }}</text>
							</view>
						</view>
						<view class="list_item_bot">
							<view class="list_item_bot_bot">
								<view class="list_item_bot_bot_left">车组人员:</view>
								<view class="list_item_bot_bot_rig">{{item.contactPerson?item.contactPerson:'暂无'}}</view>
							</view>
							<view class="list_item_bot_bot">
								<view class="list_item_bot_bot_left">当前位置:</view>
								<view class="list_item_bot_bot_rig">{{item.address?item.address:'暂无'}}</view>
							</view>
						</view>
					</view>
					<view class="bottomTitle" v-if="showNone && carList.length > 5">
						<text>没有更多数据了 ~</text>
					</view>
					<view v-if="showNoCar" class="blank">
						<image src="/static/images/common/none.png"></image>
						<text>{{noText}}</text>
					</view>
				</scroll-view>
			</block>
		</swiper-tabs>	
	</view>
</template>

<script>
	import {SwiperTabs} from '@/components/swiper-tabs/swiper-tabs.vue';
	const {urlList,https} = require('@/static/api');
	export default {
		components:{
			SwiperTabs
		},
		data() {
			return {
				tabIndex:3,   //当前导航栏索引
				status:-1,  
				topNavList:[
					{ title: '离线(0)',},
					{ title: '静止(0)',},
					{ title: '行驶(0)',},
					{ title: '全部(0)',},
				],
				carList:[],
				showNone:false,
				showNoCar:false,
				isLoading:false, //是否在加载中
				isHideLoading:false,  //下拉刷新状态
				page:1,
				pageSize:10,
				serchValue:'',    //搜索值
				noText:'暂无车辆 ~~ ',
			};
		},
		onLoad() {
			uni.showLoading({
				title:'加载中'
			});
			this.page = 1;
			this.getCarList(-1,1,'');
		},
		onShow() {},
		methods:{
			// 搜索
			onSearch(e){
				console.log('改变了',e)
				if(!this.isLoading){
					this.isLoading = true;
					this.page=1;
					this.carList = [];
					this.getCarList(this.status,1,e);
				}
			},
			// 上拉加载
			upLoading(){
				if(!this.isLoading){
					this.isLoading = true;
					this.page+=1;
					this.getCarList(this.status,this.page,this.serchValue);
				}
			},
			// 下拉刷新
			downLoading(){
				this.page = 1;
				this.isHideLoading = true;
				this.carList = [];
				this.isLoading = true;
				this.showNoCar = false;
				this.showNone = false;
				this.getCarList(this.status,1,this.serchValue);
			},
			onSwiperChange(idx){
				const that = this;
				that.tabIndex = idx;
				switch (idx){
					case 0:
						that.status = 0;
						break;
					case 1:
						that.status = 2;
						break;
					case 2:
						that.status = 1;
						break;
					case 3:
						that.status = -1;
						break;
				};
				that.carList = [];
				that.page = 1;
				that.showNoCar = false;
				that.showNone = false;
				that.getCarList(that.status,1,this.serchValue);
			},
			onTopTabs(index){
				this.tabIndex = index;
			},
			selectCar(item){
				console.log(item)
				var pages = getCurrentPages();// 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				// var currPage = pages[pages.length - 1];   //当前页面
				var prevPage = pages[pages.length - 2];  //上一个页面
				//prevPage.route获取上一页面的页面路径
				prevPage.$vm._data.selectCarId = item.id;//小程序中的修改方法
				prevPage.$vm._data.defauleMap = {
					latitude:item.latitude,
					longitude:item.longitude,
				},
				uni.navigateBack()//返回上一页面
			},
			getCarList(status,page,key){
				if(key){
					this.noText = '抱歉，暂无匹配车辆'
				}else{
					this.noText = '暂无车辆 ~~ '
				};
				uni.showNavigationBarLoading();
				const _that = this;
				https(urlList.getCarTab+'?key='+key+'&currentPage='+page+'&pageSize='+_that.pageSize+'&status='+status,'GET','','').then(data => {
					console.log('车辆列表',data)
					let info = data.data;
					_that.topNavList = [
						{title: `离线(${info.offlineCount})`},
						{title: `静止(${info.stillCount})`},
						{title: `行驶(${info.drivingCount})`},
						{title: `全部(${info.allCount})`},
					];
					const list = info.vehicleGpsOutput;
					if(list.length !== 0){
						if(page == 1){
							_that.carList = list;
						}else{
							_that.carList = _that.carList.concat(list);
						}
						_that.showNoCar = false;
					}else{
						if(_that.page > 1){
							_that.page-=1;
							_that.showNone = true;
						}else{
							_that.showNoCar = true;
						}
					};
					_that.isLoading = false;
					_that.isHideLoading = false;
					uni.hideNavigationBarLoading();
					setTimeout(()=>{
						uni.hideLoading();
					},500)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
					_that.isLoading = false;
					_that.isHideLoading = false;
					if(_that.page > 1){
						_that.page-=1;
					}
					uni.hideNavigationBarLoading();
					setTimeout(()=>{
						uni.hideLoading();
					},500)
				})
			},
		},
	}
</script>

<style>
	page {
		background-color: #F3F4F6;
	}
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	} 
</style>
<style lang="scss" scoped>
#warp{
	width: 100%;
	.tab_search{
		height: 90rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #3476FE;
	}
	.list_item{
		width: 100%;
		height: 250rpx;
		background-color: white;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.list_item_top{
		    height: 80rpx;
		    width: 686rpx;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    justify-content: space-between;
		    font-size: 14px;
		}
		.list_item_right{
		    display: flex;
		    flex-direction: row;
		    color: #1AAD19;
		}
		.list_item_lef{
			font-weight: bold;
			color: #353535;
			display: flex;
			flex-direction: row;
			align-items: baseline;
			.lef_r_plate{
				height:27rpx;
				width: 25rpx;
				// border: 1rpx solid red;
				// display: flex;
				// // flex-direction: row;
				// align-items:flex-start;
				// justify-content:flex-start;
				.l_r_p_top1{
					height: 100%;
					width:15rpx;
					border-top:6rpx solid red;
				}
				.l_r_p_top2{
					height:10rpx;
					width:10rpx;
					background-color: red;
					border-radius: 50%;
				}
			}
			image{
				width: 35rpx;
				height: 27rpx;
			}
			.lef_r_rig{
				font-weight: 500;
				margin-left: 10rpx;
			}
		}
		.list_item_bot{
		    width: 686rpx;
		    display: flex;
		    flex-direction: column;
		    border-top: 1rpx solid rgb(231, 230, 230);
		    font-size:14px;
			.list_item_bot_bot{
				display: flex;
				flex-direction: row;
				margin-top: 15rpx;
				
			}
			.list_item_bot_bot_left{
			    width: 135rpx;
				font-weight: bold;
				color:#555555;
			    display: flex;
			    flex-wrap: nowrap;
			}
			.list_item_bot_bot_rig{
				color: #707070;
			    width:  calc(100% - 175rpx);
			    text-overflow: -o-ellipsis-lastline;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    line-clamp: 2;
			    -webkit-box-orient: vertical;
			}
		}
	}
	.bottomTitle{
		width: 100%;
		height: 70rpx;
		color: #666666;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.blank{
	  font-size: 24rpx;
	  color: #999999FF;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.blank image{
		width: 300rpx;
		height: 240rpx;
		margin-bottom: 40rpx;
	}
}
</style>