<template>
	<view id="warp">
		<top-nav-bar class="top_nav_bar" :config="topNavBar" isTaskInfo="true" @goBack="goBack"></top-nav-bar>
		<view class="top_list">
			<view class="tab_view">
				<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>
					<block v-if="item.num < 100">
						<view v-if="item.num > 0" class="tabItop_right wid1">{{item.num}}</view>
					</block>
					<block v-else>
						<view class="tabItop_right wid2">99+</view>
					</block>
				</view>
			</view>
			<view class="tab_search" @tap="onShowSearch">
				<uni-icons type="search" size="24" color="white"></uni-icons>
			</view>
		</view>
		<view class="search" v-if="showSearch">
			<uni-search-bar 
				style="width: 100%;padding: 0;" 
				bgColor="white" 
				placeholder="搜索" 
				v-model="serchValue"
				@input="onSearch" 
				clearButton="none"
			></uni-search-bar>
		</view>
		<view class="bot_list_scroll" :style="'height:calc(100vh - '+marTopHeight+'px);'">
			<scroll-view
				style="width: 100%;height:100%;"
				scroll-y
				scroll-top="0"
				refresher-enabled 
				scroll-anchoring
				:refresher-triggered="isHideLoading"
				:scrollTop="scrollTop"
				@scrolltolower='upLoading' 
				@refresherrefresh='downLoading'
			>	
				<task-item :taskList="taskList"></task-item>
				<view class="bottomTitle" v-if="showNone && taskList.length > 5">
					<text>没有更多数据了 ~</text>
				</view>
				<view class="blank" v-if="showNoCar">
					<image class="blank_image" src="/static/images/common/none.png"></image>
					<text>暂无任务 ~~ </text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {TaskItem} from '@/components/taskItem/taskItem.vue';
	import {TopNavBar} from '@/components/top-nav-bar/top-nav-bar.vue';
	const {urlList,https} = require('@/static/api');
	const isPhone = /(^|\s*\+?0?0?86|\D)(1\d{2})[-\s]{0,3}(\d{4})[-\s]{0,3}(\d{4})(?=\D|$)/g
	export default {
		components:{
			TopNavBar,
			TaskItem,
		},
		data() {
			return {
				isWZHB:false,    //是否为外租伙伴
				topNavBar:{
					title:"任务列表", //title
					bgcolor:"#3476FE", //背景颜色
				},
				marTopHeight:80,
				scrollTop:0,
				tabIndex:0,   //顶部tabs索引
				status:1,    //1=待指派,2=已指派,3=已完成,4=已评价
				topNavList:[
					{ title: '待指派',num:0},
					{ title: '已指派',num:0},
					{ title: '已完成',num:0},
					{ title: '已评价',num:0},
				],
				taskList:[],
				showNone:false,
				showNoCar:false,
				isHideLoading:false,   //下拉加载状态
				isLoading:false, //是否在加载中
				showSearch:false,   //搜索显示隐藏状态
				serchValue:'',   //搜索的值
				page:1,
				pageSize:10,
			};
		},
		onLoad() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					console.log(res)
					let height = res.statusBarHeight+4; //ios 24px
					if (res.platform.toLowerCase() == "android" ){
						height +=4;
					}
					that.marTopHeight = height+38+45;
				}
			})
			uni.getStorage({
			    key: 'userinfo',
			    success: function (res) {
			        console.log('userInfo--',res.data);
					if(res.data.roleId == 1010){
						that.isWZHB = true
					}else{
						that.isWZHB = false
					}
			    }
			});
			that.page = 1;
			that.getTaskList(that.status,1);
		},
		onShow() {},
		methods:{
			onShowSearch(){
				this.showSearch = !this.showSearch;
			},
			// 搜索
			onSearch() {
				if (!this.isLoading) {
					this.isLoading = true;
					this.page = 1;
					this.getTaskList(this.status,1)
				}
			},
			// 上拉加载
			upLoading(){
				if(!this.isLoading && this.taskList.length > 9){
					this.isLoading = true;
					this.page+=1;
					this.getTaskList(this.status,this.page);
				}
			},
			// 下拉刷新
			downLoading(){
				this.page = 1;
				this.isHideLoading = true;
				this.isLoading = true;
				this.showNoCar = false;
				this.showNone = false;
				this.getTaskList(this.status,1);
			},
			// 点击切换tabs
			onTopTabs(index){
				this.tabIndex = index;
				this.page = 1;
				this.showNoCar = false;
				this.showNone = false;
				this.status = index + 1;
				this.getTaskList(this.status,1);
			},
			getTaskList(status,page){
				const _that = this;
				https(urlList.getTaskList+'?status='+status+'&currentPage='+page+'&pageSize'+_that.pageSize+'&key='+_that.serchValue,'GET','','').then(data => {
					console.log('任务列表',data)
					const item = data.data.pagedList;
					_that.topNavList = [
						{title: `待指派`,num:data.data.stayAssignCount},
						{title: `已指派`,num:data.data.assignCount},
						{title: `已完成`,num:data.data.completeCount},
						{title: `已评价`,num:data.data.evaluateCount},
					];
					let list = item.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>' ;
						// console.log('电话',tel,item.orderContent)
					})
					if(list.length !== 0){
						if(page == 1){
							_that.taskList = list;
							_that.scrollTop = Math.random(); 
						}else{
							_that.taskList = _that.taskList.concat(list);
						}
						_that.showNoCar = false;
					}else{
						if(_that.page > 1){
							_that.page-=1;
							_that.showNone = true;
						}else{
							_that.taskList = [];
							_that.showNoCar = true;
						}
					};
					_that.isLoading = false;
					_that.isHideLoading = false;
					// 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;
					}
					// setTimeout(()=>{
					// 	uni.hideLoading();
					// },500)
				})
			},
			goBack(){
				let pages=getCurrentPages()
				// console.log(pages)
				if(pages.length>=2){
					let route=pages[pages.length-2].route
					if(route=='map/pages/index/index'){
						uni.navigateBack()
					}else{
						uni.reLaunch({
						    url: '/map/pages/index/index'
						});
					}
				}else{
					uni.reLaunch({
					    url: '/map/pages/index/index'
					});
				}
				
				 
				
			}
		},
	}
</script>
<style>
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	} 
	.data-v-6c6b31e6>.uni-badge--x>.uni-badge{
		border:none;
		padding-top: 1rpx;
	}
</style>
<style lang="scss" scoped>
#warp{
	width: 100%;
	height: 100vh;
	background-color: #F3F4F6;
	.top_list{
		width: 100%;
		height:45px;
		background-color: #3476FE;
		display: flex;
		flex-direction:row;
		align-items:center;
		justify-content: center;
		.tab_view{
			width:680rpx;
			height: 100%;
			display: flex;
			flex-direction:row;
			align-items:center;
			justify-content: center;
			.tab_list{
				width: 25%;
				height:35px;
				display: flex;
				flex-direction:column;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				position: relative;
				.tab_item{
					height:100%;
					color:rgba(255, 255, 255, 0.8);
					font-weight: bold;
					font-family: PingFangSC-Ultralight,ans-serif;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
				.tabItop_right{
					border-radius: 18rpx;
					font-size:24rpx;
					color: #FFFFFFFF;
					background-color: #E91818FF;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					display: flex;
					position: absolute;
					top: 0rpx;
					right:10rpx;
				}
				.wid1{
					height: 36rpx;
					width: 36rpx;
				}
				.wid2{
					height: 36rpx;
					width:56rpx;
				}
				.active{
					color: white;
					font-size: 33rpx;
				}
			}
		}
		.tab_search{
			width: 70rpx;
			height: 30px;
			display: flex;
			align-items: center;
			// justify-content: center;
			// border: 1rpx solid red;
		}
	}
	.search {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
	}
	.bot_list_scroll{
		width: 100%;
		// height:calc(100vh - 230rpx);
		// border: 1rpx solid red;
	}
	.bottomTitle{
		width: 100%;
		height: 70rpx;
		// border: 1rpx solid red;
		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>