<template>
	<view class="warp">
		<block v-if="botTabBarIndex">
			<block v-if="!noLogin">
				<view class="warp_top">
					<scroll-view
						style="width: 100%;height: 100%;"
						scroll-y
						scroll-top="0"
						refresher-enabled 
						scroll-anchoring
						:refresher-triggered="isHideLoading"
						@scrolltolower='upLoading' 
						@refresherrefresh='downLoading'
					>
						<view class="task_list" v-for="(item,index) in taskList" :key="index">
							<block v-if="!isWZHB">
								<view  class="task_top row" @tap="taskInfo(item.isDriver,item.id)">
									<text class="text1 row">出车车辆：{{item.vehicleCode}}</text>
									<text class="text2-1">{{item.statusName}}</text>
								</view>
								<view class="task_user text1 row" @tap="taskInfo(item.isDriver,item.id)">车组人员：{{item.orderVehiclePerson}}</view>
							</block>
							<view class="task_text" @tap="taskInfo(item.isDriver,item.id)">
								<mp-html 
									containerStyle="width:100%;height:100%;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;" 
									:content="item.orderContent" 
									@linktap="linktap"
								/>
							</view>
							<block v-if="!isWZHB">
								<block v-if="item.isDriver&&item.status==20">
									<view class="task_btn" @tap="onHandleJd(item.id)">立即接单</view>
								</block>
								<block v-if="item.isDriver&&item.status!=20">
									<view class="task_btn" @tap="onHandleImg(item.id,item.status)">完工拍照</view>
								</block>
							</block>
						</view>
						<view style="width: 100%;height:100rpx;"></view>
						<view v-if="showNo" class="showNo">
							暂无任务
						</view>
					</scroll-view>
				</view>
			</block>
			<block v-else>
				<view class="noLogin_css">
					<view class="top_img">
						<image src="/static/images/common/logo.png"></image>
						<text>云车派工</text>
					</view>
					<view class="text1">- 实用、专业、高效的车队派工管理平台 -</view>
					<image class="bg" src="/static/images/common/wel_cen.png"></image>
					<view class="text2">为中国工程机械租赁企业量身定做</view>
					<view class="bot_text">
						<view class="dd"></view>
						<view class="b_t_t">立即体验智能高效派工</view>
						<view class="dd"></view>
					</view>
					<view class="bot_btn">
						<view class="btn" @tap="goLogin">
							<image class="btn_logo" src="/static/images/common/goLogin.png"></image>
							<text>去授权</text>
						</view>
					</view>
				</view>
			</block>	
		</block>
		<block v-else>
			<view class="warp_my">
				<view class="top_info" @tap="setUserInfo">
					<image class="top_bg" lazy-load fade-show src="/static/images/common/bg.png"></image>
					<view class="top_user">
						<view class="user_lef">
							<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/images/common/logo.png'"></image>
							<view class="user_lef_name">
								<view>
									{{ userInfo.userName || '用户名称' }}  
									<text>{{userInfo.roleName || '角色'}}</text>
								</view>
								<view>{{ userInfo.companyName || '公司名称' }}</view>
							</view>
						</view>
						<image class="rig_icon" src="/static/images/my/right_icon.png"></image>
					</view>
				</view>
				<view class="bot_list">
					<view class="cell_list" v-for="(item,index) in myNavList" :key="index">
						<view class="cell_lef">
							<image lazy-load fade-show :src="item.icon"></image>
							<view>{{item.text}}</view>
						</view>
						<view class="cell_lef">
							<image class="cell_icon" src="/static/images/my/right_icon.png"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="bot_tabs">
			<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			    <view class="tabbar-item" @tap="changeBotTabs(0)">
			        <image class="item-img" :src="botTabBarIndex?'/static/images/driverIndex/renwu1.png':'/static/images/driverIndex/renwu.png'"></image>
			        <view class="item-name" :class="botTabBarIndex?'tabbarActive':''">任务</view>
			    </view>
				<view class="tabbar-item" @tap="changeBotTabs(1)">
				    <image class="item-img" :src="botTabBarIndex?'/static/images/driverIndex/my.png':'/static/images/driverIndex/my1.png'"></image>
				    <view class="item-name" :class="botTabBarIndex?'':'tabbarActive'">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const {urlList,https,uploadImg,checkPhone} = require('@/static/api');
	import {MPHtml} from '@/components/mp-html/mp-html.vue';
	const isPhone = /0?(13[0-9]|15[012356789]|18[0236789]|14[57]|19[0236789])[0-9]{8}/g;
	const aboutUs_logo = require('@/static/images/my/aboutUs.png');
	export default {
		components:{
			MPHtml
		},
		data() {
			return {
				paddingBottomHeight:0,//苹果X以上手机底部适配高度
				botTabBarIndex:true,   //底部导航栏是否被选中
				
				taskList:[],
				page:1,
				pageSize:10,
				isHideLoading:false,
				isLoading:false,
				showNo:false,
				noLogin:false,    //是否授权登录了
				
				myNavList:[
					{text:'关于我们',url:'/pages/aboutUs/aboutUs',icon:aboutUs_logo},
				],
				userInfo:'',
				isWZHB:false,       //是否是外租伙伴
			};
		},
		onLoad(options) {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.paddingBottomHeight = 40;
			            }
			        })
			    }
			});
			if(options.type == 1001){
				console.log('没有登录')
				this.noLogin = true;
			}else{
				this.noLogin = false;
			};
		},
		onShow() {
			this.page = 1;
			this.getUserInfo();
			uni.hideHomeButton();
		},
		methods:{
			setUserInfo() {
				uni.navigateTo({
					url: '/pages/myInfo/myInfo'
				})
			},
			// 获取用户平台信息
			getUserInfo(){
				const that = this;
				if(that.noLogin){
					return;
				};
				https(urlList.getuserInfo,'GET','','').then(data => {
					console.log('用户信息',data.data)
					if(data.data.roleId == 1010){
						that.isWZHB = true;
					}else{
						that.isWZHB = false;
					};
					that.getTaskList(that.page);
					that.userInfo=data.data
					uni.setStorage({
						key:"userinfo",
						data:data.data,
					});
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1000
					})
				})
			},
			onHandleImg(id,status){
				const _that = this;
				uni.chooseImage({
					count:1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						uni.showLoading({
							title:'正在上传'
						});
						let imgPath = res.tempFilePaths[0];
						// 压缩图片
						uni.compressImage({
							src:imgPath ,
							quality: 10,
							success: ress => {
								let img = ress.tempFilePath;
								let Key = 'dispatching/wx/upload/ordervisa/'+imgPath.substr(imgPath.lastIndexOf('/') + 1);
								uploadImg(Key,img).then(data => {
									// console.log('上传成功111',data)
									let url = data.split('/');
									var targetUrl = url[url.length-1];
									let postData = {
										'orderId':id,
										'picture':targetUrl
									};
									if(status == 60||status == 70||status == 80||status == 90){
										// orderVisa put   更新签证单
										https(urlList.orderVisa,'PUT',postData,'').then(data => {
											console.log('更新签证单',data)
											uni.hideLoading();
											uni.showToast({
												title:'更新成功',
												duration:1500
											});
										
										}).catch(err => {
											uni.hideLoading();
											uni.showToast({
												title:err,
												icon:'none',
												duration:1500
											})
										})
									}else{
										https(urlList.orderSign,'POST',postData,'').then(data => {
											console.log('完工拍照',data)
											uni.hideLoading();
											uni.showToast({
												title:'上传成功',
												duration:1500
											});
											
										}).catch(err => {
											uni.hideLoading();
											uni.showToast({
												title:err,
												icon:'none',
												duration:1500
											})
										})
									}
								}).catch(err => {
									uni.showToast({
										title:err,
										icon:'none',
										duration:1500
									})
								});
							}
						})
					}
				});
			},
			onHandleJd(id){
				const _that = this;
				https(urlList.orderReceiving+'/'+id,'GET','','接单中...').then(data => {
					console.log('接单端-接单',data)
					uni.showToast({
						title:'接单成功',
						duration:1500
					});
					_that.getTaskList(1)
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			},
			upLoading(){
				if(!this.isLoading){
					this.isLoading = true;
					this.page+=1;
					this.getTaskList(this.page);
				}
			},
			taskInfo(isDriver,id){
				uni.navigateTo({
					url:'/pages/taskInfo/taskInfo?type=1&isDriver='+isDriver+'&id='+id
				})
			},
			downLoading(){
				this.page = 1;
				this.isHideLoading = true;
				this.isLoading = true;
				this.showNo = false;
				this.getTaskList(1);
			},
			//拨打电话
			linktap (e) {
				const tel = e.innerText;
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			getTaskList(page){
				if(this.noLogin){
					return;
				};
				const _that = this;
				let postUrl = '';
				if(!_that.isWZHB){
					postUrl = urlList.getDriverIndexTaskList;
				}else{
					postUrl = urlList.getDriverIndexTaskListWZHB;
				};
				https(postUrl+'?currentPage='+page+"&pageSize="+this.pageSize,'GET','','加载中...').then(data => {
					console.log('接单端-任务列表',data)
					const list = data.data.items;
					list.forEach((item,index) => {	
						let tel = '';
						if( isPhone.test(item.orderContent)){
							item.orderContent.replace(isPhone,function($,$1) {
								tel = $.replace(/[^\d]/g,"");
							});
						};
						item.orderContent ='<div>'+ 
							item.orderContent.replace(tel,'<a style="color:#3476FE;">'+ tel +'</a>')+
						'</div>' ;
					})
					if(list.length !== 0){
						if(page == 1){
							_that.taskList = list;
						}else{
							_that.taskList = _that.taskList.concat(list);
						}
					}else{
						if(_that.page > 1){
							_that.page-=1;
						}else{
							_that.taskList = [];
							_that.showNo = true;
						}
					};
					_that.isLoading = false;
					_that.isHideLoading = false;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
					_that.isLoading = false;
					_that.isHideLoading = false;
					if(_that.page > 1){
						_that.page-=1;
					}
				})
			},
			goLogin(){
				uni.reLaunch({
					url:'/pages/login/login'
				})
			},
			changeBotTabs(num){
				if(num == 0){
					uni.setNavigationBarTitle({
						title: "任务列表"
					});
					this.botTabBarIndex = true
				}else{
					uni.setNavigationBarTitle({
						title: "我的"
					});
					if(!this.noLogin){
						this.userInfo = uni.getStorageSync('userinfo');
					}
					this.botTabBarIndex = false;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.text1{
		font-size: 30rpx;
		font-weight: bold;
		color: #555555;
	}
	.text2-1{
		color: #23AD19;
	}
	.text2-2{
		color: #3476FE;
	}
	.text2-3{
		color: #E91818;
	}
	.bold{
		font-size: 28rpx;
		font-weight: bold;
	}
	.row{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.rig_icon{
		width: 28rpx;
		height: 28rpx;
	}
.warp{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.warp_top{
		width: 100%;
		height:calc(100vh - 100rpx);
		background-color: #EFEFEF;
		.showNo{
			color: #6b6b6b;
			text-align: center;
			margin-top: 50rpx;
		}
		.task_list{
			width: 710rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			margin-top: 20rpx;
			margin-bottom:10rpx;
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			.task_top{
				width:646rpx;
				margin-top: 24rpx;
				// border: 1rpx solid red;
				justify-content: space-between;
			}
			.task_user{
				width:646rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
			.task_text{
				width:646rpx;
				height: 120rpx;
				padding: 15rpx 0rpx 20rpx 0rpx;
				font-size:27rpx;
				line-height: 40rpx;
				color: #555555;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
				
			}
			.task_btn{
				width:646rpx;
				height: 70rpx;
				border-radius: 16rpx;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				background-color:#3476FE ;
				color: white;
				text-align: center;
				font-size: 28rpx;
				line-height: 70rpx;
			}
		}
	}
	.noLogin_css{
		width: 100%;
		height:calc(100vh - 110rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.top_img{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30rpx;
			image{
				height: 100rpx;
				width: 100rpx;
			}
			text{
				font-size: 70rpx;
				margin-left: 20rpx;
				color:#2C71FD;
				font-weight: bold;
				font-family: PingFangSC-Ultralight,ans-serif;
			}
		}
		.text1{
			// margin-top:30rpx;
			font-size: 29rpx;
			color:#2C71FD;
			font-weight: bold;
			font-family: PingFangSC-Ultralight,ans-serif;
		}
		.bg{
			// margin-top: 20rpx;
			width: 538rpx;
			height: 358rpx;
		}
		.text2{
			// margin-top:20rpx;
			font-size: 25rpx;
			color:#3476FE;
			font-weight: bold;
			font-family: PingFangSC-Ultralight,ans-serif;
		}
		.bot_text{
			width: 650rpx;
			// margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.dd{
				width:150rpx;
				border-top: 1rpx solid #e5e5e5;
			}
			.b_t_t{
				width: 350rpx;
				height: 70rpx;
				color: #3375FE;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
			}
		}
		.bot_btn{
			width: 350rpx;
			// margin-top: 20rpx;
			display: flex;
			justify-content: center;
			.btn{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					height: 90rpx;
					width: 90rpx;
				}
				text{
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #28C445;
				}
			}
		}
	}
	.warp_my{
		width: 100%;
		height:calc(100vh - 100rpx);
		.top_info{
			width: 100%;
			height: 320rpx;
			.top_bg{
				height:100%;
				width: 100%;
				background-color: #3476fe;
			}
			.top_user{
				width: 90%;
				height: 200rpx;
				margin: 0 auto;
				position: relative;
				margin-top: -300rpx;
				z-index: 99;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.user_lef{
					display: flex;
					flex-direction: row;
					align-items: center;
					image{
						width: 126rpx;
						height: 126rpx;
						border-radius: 50%;
					}
					.user_lef_name{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						font-size: 38rpx;
						color: white;
						view{
							display: flex;
							flex-direction: row;
							align-items: center;
							text{
								width: 120rpx;
								height: 42rpx;
								background-color:#CED8FFFF ;
								border-radius: 24rpx;
								line-height: 42rpx;
								text-align: center;
								color: #3476FEFF;
								font-size: 24rpx;
								margin-left: 20rpx;
							}
						}
						view:nth-child(2){
							margin-top: 10rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		.bot_list{
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.cell_list{
				width: 93%;
				height: 100rpx;
				border-bottom: 1rpx solid #f4f4f4;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				.cell_lef{
					display: flex;
					flex-direction: row;
					align-items: center;
					image{
						height: 45rpx;
						width: 45rpx;
						margin-right: 20rpx;
					}
					.cell_icon{
						height: 22rpx;
						width: 22rpx;
					}
				}
				
			}
		}
	}
	.bot_tabs{
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		
		.tabbarActive{
			font-weight: bold;
		    color: #3476FE !important;
		}
		.tabbar{
			width: 100%;
		    height:100%;
		    background-color: #ffffff;
			border-top: 1px solid #d5d5d5;
			display: flex;
			justify-content: space-around;
			align-items: center;
		    .tabbar-item{
		        display: flex;
		        flex-direction: column;
		        align-items: center;
		        justify-content: center;
		        height: 100%;
		        .item-img{
		            margin-bottom: 4rpx;
		            width: 50rpx;
		            height: 50rpx;
		        }
		        .item-name{
		            font-size: 26rpx;
		            color: #A3A3A3;
		        }
		    }
		}
	}
	
}
</style>
