<template>
	<view class="warp">
		<view class="top_list">
			<view class="top_tab">
				<view 
					class="tab_list" 
					v-for="(item,index) in topNavList" 
					:key="index" 
					@tap="onTopTabs(index)"
				>	
					<view class="tab_item" :class="tabIndex==index?'active':''">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="swiper">
			<swiper 
				class="swiper_css"
				ref="swiper1" 
				:duration="300"
				:current="tabIndex" 
				@change="onSwiperChange"
			>
				<swiper-item class="swiper_item_css">
					<index-list1
						:list="indexList"
						:multi="false"
						:isType="true"
						:selectList="selectList1"
						@change="changeUser1"
					>
					</index-list1>
				</swiper-item>
				<swiper-item class="swiper_item_css">
					<index-list2
						:list="indexList"
						:multi="false"
						:isType="false"
						:selectList="selectList2"
						@change="changeUser2"
					>
					</index-list2>
				</swiper-item>
				
			</swiper>
		</view>
		
		<block v-if="tabIndex == 0">
			<view class="bot_btn" @tap="onSelectUser">{{isChange?'确定':'下一步'}}</view>
		</block>
		<block v-else>
			<view class="bot_btn" @tap="onHandleOk">完成</view>
		</block>
		
	</view>
</template>

<script>
	import {IndexList1} from '@/components/index-list/index-list.vue';
	import {IndexList2} from '@/components/index-list/index-list.vue';
	const {urlList,https} = require('@/static/api');
	export default {
		components:{
			IndexList1,
			IndexList2
		},
		data() {
			return {
				tabIndex:0,   //当前导航栏索引
				topNavList:[
					{ title: '自有车' },
					{ title: '外请车' },   //roleId：1010
				],
				indexList:[],  //车辆数据
				selectList1:[],  //自有车
				selectList2:[],  //外请车
				page:1,
				pageSize:999,
				isChange:false,   //是否是编辑的任务
			};
		},
		onLoad(options) {
			console.log('选择车辆options---',options)
			const that = this;
			that.page = 1;
			that.getCarList(0,1);
			that.isChange = options.isChange?true:false;
			// if(options.status > 10){
			// 	uni.getStorage({
			// 		key:'taskInfo',
			// 		success(data) {
			// 			if(options.isOutside){
			// 				that.selectList2.push({
			// 					"userId":data.data.vehicleId,
			// 					"vehicleId":data.data.vehicleId,
			// 					"vehicleCode":data.data.vehicleCode,
			// 					"vehiclePerson":data.data.orderVehicles,
			// 				});
			// 			}else{
			// 				that.selectList1.push({
			// 					"userId":data.data.vehicleId,
			// 					"vehicleId":data.data.vehicleId,
			// 					"vehicleCode":data.data.vehicleCode,
			// 					"vehiclePerson":data.data.orderVehicles,
			// 				});
			// 			}
						
			// 		}
			// 	})
			// }
		},
		onShow() {},
		methods:{
			// 下一步   ---自有车
			onSelectUser(){
				if(this.selectList1.length == 0){
					uni.showToast({
						title:'请选择车辆',
						icon:'none',
						duration:1500
					})
					return;
				};
				if(this.isChange){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];  //上一个页面
					prevPage.$vm._data.vehicleId = this.selectList1[0].id;
					prevPage.$vm._data.vehicleCode = this.selectList1[0].vehicleCode;
					prevPage.$vm._data.isOutside = false;
					prevPage.$vm._data.vehicleTypeName = this.selectList1[0].vehicleTypeName;
					uni.navigateBack();//返回上一页面
					return
				};
				uni.navigateTo({
					url:'/pages/vehicle_personnels/vehicle_personnels?isDispatch=1&vehicleId='+this.selectList1[0].userId+
						'&vehicleCode='+this.selectList1[0].vehicleCode+
						'&selectList='+ JSON.stringify(this.selectList1[0].vehiclePerson)
				});
			},
			// 完成  -- 外请车 addDisPatch
			onHandleOk(){
				if(this.selectList2.length == 0){
					uni.showToast({
						title:'请选择车辆',
						icon:'none',
						duration:1500
					})
					return;
				};
				let taskInfo = uni.getStorageSync('taskInfo');
				if(this.isChange){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];  //上一个页面
					prevPage.$vm._data.vehicleId = this.selectList2[0].userId;
					prevPage.$vm._data.vehicleCode = this.selectList2[0].employeeName?this.selectList2[0].employeeName:this.selectList2[0].vehicleCode;
					prevPage.$vm._data.isOutside = true;
					prevPage.$vm._data.orderVehiclePerson = this.selectList2[0].employeeName?this.selectList2[0].employeeName:this.selectList2[0].vehiclePerson.userName;
					prevPage.$vm._data.orderVehicles = [];
					uni.navigateBack();//返回上一页面
					return
				};
				let postData = {
					"projectId":taskInfo.projectId,
					"constructionId":taskInfo.constructionId,
					"constructionName":taskInfo.constructionName,
					"projectName":taskInfo.projectName,
					"arriveDate":taskInfo.arriveDate,
					"longitude":taskInfo.longitude,
					"latitude":taskInfo.latitude,
					"address":taskInfo.address,
					"salesmanId":taskInfo.salesmanId,
					"orderContent":taskInfo.orderContent,
					"id":taskInfo.id,
					"vehicleType":taskInfo.vehicleType,
					"vehicleId": this.selectList2[0].userId,        //车辆id
					"vehicleCode":this.selectList2[0].employeeName?this.selectList2[0].employeeName:this.selectList2[0].vehicleCode,      //车牌号
					"isOutside": true,         	//是否为外请车
					"orderVehiclePerson":this.selectList2[0].employeeName?this.selectList2[0].employeeName:this.selectList2[0].vehiclePerson.userName,
					"orderVehicles":[],
				};
				https(urlList.addDisPatch,'POST',postData,'正在指派...').then(data => {
					console.log('指派任务---外请车',data)
					uni.showToast({
						title:'指派成功',
						icon:'none',
						duration:1500
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/taskList/taskList'
						})
					},1500)
					uni.removeStorage({
						key:'taskInfo',
						success() {
							console.log('派单缓存删除成功')
						}
					})
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			// 选择车辆
			changeUser1(item) {
				this.selectList1 = item;
			},
			changeUser2(item) {
				this.selectList2 = item;
			},
			// 滑动切换tabs
			onSwiperChange(e){
				const that = this;
				const idx = e.target.current;
				that.tabIndex = idx;
				that.page = 1;
				that.getCarList(that.tabIndex,1);
			},
			// 点击切换tabs
			onTopTabs(index){
				this.tabIndex = index;
			},
			getCarList(tabIndex,page){
				const _that = this;
				_that.indexList = [];
				if(tabIndex == 0){
					console.log('自请车')
					https(urlList.getvehiclList+'?key=&currentPage='+page+'&pageSize='+_that.pageSize+'&status=1','GET',' ','').then(data => {
						// console.log('自请车辆列表',data)
						_that.indexList = data.data.vehicleBaiscList.map( item => {
							item.list.map( itemm => {
								itemm.userId = itemm.id;
								return itemm;
							})
							return item
						});
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}else{
					https(urlList.getemployee+'?key=&currentPage='+page+'&pageSize='+_that.pageSize+'&roleId=1010','GET',' ','').then(data => {
						// console.log('外请车辆列表',data)
						_that.indexList = data.data.employeeList;
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}
				
			},
		},
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	height: 100vh;
	background-color: #F3F4F6;
	.top_list{
		width: 100%;
		position: sticky;
		top: 0;
		border-bottom: 10rpx solid #F3F4F6;
		display: flex;
		flex-direction: column;
		.top_tab{
			width: 100%;
			height: 90rpx;
			background-color: white;
			display: flex;
			flex-direction:row;
			align-items: center;
			justify-content: center;
			.tab_list{
				width: 25%;
				height: 100%;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: bold;
				.tab_item{
					height:100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
				.active{
					border-bottom:6rpx solid #3476fe ;
					color: #3476fe;
					font-size: 29rpx;
				}
			}
		}
	}
	.swiper{
		width: 100%;
		height: calc(100vh - 216rpx);
		// border: 1rpx solid red;
		display: flex;
		align-items: center;
		justify-content: center;
		.swiper_css{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			// border: 1px solid red;
			.swiper_item_css{
				width: 100%;
				height: 100%;
			}
		}
	}
	.bot_btn{
		width: 700rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-bottom: 48rpx;
		background-color:#1B64F8FF;
		color: white;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>