<template>
	<view style="height: 100vh;display: flex;flex-direction: column;">
		<view class="header" style="    ">
			<view :style="{height:styles.top+'px'}" class="top"></view>
			<uni-nav-bar @clickLeft='jump(-1)' color='white' backgroundColor="rgba(0,0,0,0)" left-icon="back"
				title="司机信息" />

			<view class="header_seach">
				<view @tap="jump(0)" class="header_seach_title">
					<view style="margin-right: 11rpx;">{{companyName==''? '所有' :companyName}}</view>
					<uni-icons type="forward" size="16" color="white"></uni-icons>
				</view>
				<view class="header_seach_seach">
					<uni-easyinput @confirm='seachFn' style="height: 100%; flex: 1; background-color: #FFFFFF; border-radius:12rpx ;"
						prefixIcon="search" placeholder-style="color:#bbbbbb;font-weight: 100;" v-model="getData.params.id" placeholder="司机姓名、司机ID、电话号码" @iconClick="onClick">
					</uni-easyinput>
					<button @tap='jump(2)' class="header_seach_butten">
						<uni-icons type="personadd" size="20" color="#bbbbbb"></uni-icons>
						<view>新增</view>
					</button>
				</view>
				<view class="Navigation">
					<view @tap="seleFn(item);seleindex=index"
						:class="seleindex==index?'navigation_seleitem':'navigation_item'"
						v-for="(item,index) in navigation">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view style="flex: 1;overflow: hidden;">
			<scroll-view style="height: 100%;"  scroll-y="true" @scrolltolower='scrolltolower'>
				<view v-for="(item,index) in listData" class="form_body">
					<view @tap="jump(1,item)" class="form_body_item">
						<view class="form_body_item_body">
							<view class="form-item_body_left" style="">
								<image :src="item.headPhoto?item.headPhoto: '../../static/tx.png'" style="width: 100rpx; height: 100rpx;border-radius: 50%;"></image>
								<view class="form_body_item_body_container">
									<view :style="{color:item.userName?'':'#999999'}">{{item.userName?item.userName:' 无设置'}}</view>
									<view>
										{{item.phone?item.phone:'无设置'}}
									</view>
									<view class="form-item_body_left_bottom_text" style="">{{item.companyName?item.companyName :'无直属公司'}}</view>
								</view>
							</view>
							<view class="form-item_body_right" style="">
								<view  :class="item.enableMark==1?'typeyuan':'seletypeyuan'"></view>
								{{item.enableMark==1? '启用':'禁用'}}
							</view>
						</view>
						<view class="form_body_item_footer">
							<view>{{item.userCode}}</view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import driverManagement from '@/api/driverManagement'
	export default {
		data() {
			return {
				companyName:'',
				candidates:[],
				getData: {
					pageSize: 15,
					currentPage: 1,
					params: {
						userSource: '',
						companyId: '',
						id:'',
						enableMark: '',
					},
					sorted: {
						createTime: "desc"
					},
					columns: [],
					totalCount: 1,
					totalPage: 1
				},
				seachValue: '',
				styles: {},
				seleindex: 0,
				navigation: [{
						text: '所有',
						index: -1
					},
					{
						text: '启用',
						index: 1
					},
					{
						text: '禁用',
						index: 0
					}
				],
				listData: []
			}
		},
		 onPullDownRefresh() {
		            //下拉的生命周期
					this.getData.currentPage  = 1
					this.getList()
					console.log('下拉的生命周期')
		        },
		onLoad() {
			let that =this
			this.styles = uni.getMenuButtonBoundingClientRect()
			uni.$on('company',function(e){
				let routes = getCurrentPages();
				let routerIndex = routes[ (routes.length-2) ].$page.fullPath.indexOf('?')!=-1?
				 routes[ (routes.length-2) ].$page.fullPath.split('?')[0].split('/')[routes[ (routes.length-2) ].$page.fullPath.split('?')[0].split('/').length-1]
				:routes[ (routes.length-2) ].$page.fullPath.split('/')[routes[ (routes.length-2) ].$page.fullPath.split('/').length-1]
				console.log(routes,routerIndex,'获取当前打开过的页面路由数组')
				if(routerIndex!=='index')return
				if(e){
					( {id:that.getData.params.companyId,name:that.companyName} = e );
					console.log(that.getData)
				}else{
					that.getData.params.companyId=''
					that.companyName = ''
				}
			})
		},
		onShow() {
			this.getList();
		},
		methods: {
			scrolltolower() {
				this.getData.currentPage+=1
				console.log('触底了')
				this.getList()
			},
			seachFn(){
				// this.getData.params.id = this.seachValue
				this.getData.currentPage = 1
				this.getList()
				console.log('确定')
			},
			getList() {
				let user = uni.getStorageSync('user');
				console.log(user,'---')
				// ({ userSource:this.getData.params.userSource,id:this.getData.params.id} = user);
				driverManagement.getByPagesApp(this.getData).then(res => {
					if (res.code !== 20000) return
					if(this.getData.currentPage!==1){
						this.listData = this.listData.concat(res.data.list);
						return
					}
					this.listData = res.data.list
				})
			},
			jump(e,item) {
				switch (e) {
					case -1:
						uni.navigateBack()
						break;
					case 0:
						uni.navigateTo({
							url: "../company/company?jsData="+ JSON.stringify(this.companyName)
						})
						break;
					case 1:
					    console.log(item,JSON.stringify(item))
						uni.navigateTo({
							url: "../driverDetails/driverDetails?jsData="+ encodeURIComponent(JSON.stringify(item)) 
						})
						break;
						case 2:
						if(uni.getStorageSync('user').authList.includes('driver:info:add')){
							uni.navigateTo({
								url:"../addDiver/addDiver"
							})
						}else{
							uni.showToast({
								title:'暂无权限请联系管理员',
								icon:'none'
							})
						}
						
						break;
				}
			},
			seleFn(e) {
				if(e.index!=-1){
					this.getData.params.enableMark = e.index
				}else{
					this.getData.params.enableMark = ''
				}
				this.getData.currentPage = 1
				this.listData = []
				this.getList()
			},
			onClick() {
				console.log('点击图标事件')
			}
		}
	}
</script>

<style>
.typeyuan{
		background-color: #17A00E;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50px;
		margin-right: 6rpx;
	}
	.seletypeyuan{
		background-color: red;
		width: 14rpx;
		height: 14rpx;
		border-radius: 50px;
		margin-right: 6rpx;
	}
	.is-input-border{
		border: 0px !important;
	}
	page {
		background-color: #F0F2FF;
	}

	.form_body_item_footer {
		display: flex;
		color: #BBBBBB;
		font-size: 22rpx;
		justify-content: space-between;
		/* margin-top: 15rpx; */
		align-items: center;
		flex: 1;
	}

	.form-item_body_right {
		flex-grow: 1;
		text-align: end;
		color: #999999;
		font-size: 24rpx;
		    height: max-content;
		    display: flex;
		    justify-content: flex-end;
		    align-items: center;
	}

	.form-item_body_left_bottom_text {
		font-size: 24rpx;
		color: #999999;
	}

	.form-item_body_left {
		display: flex;
		align-items: center;
	}

	.form_body_item_body_container {
		margin-left: 24rpx;
		font-size: 28rpx;
	}

	.form_body_item_body {
		display: flex;
		/* height: 100rpx; */
		border-bottom: 1rpx solid #F0F0F0;
		padding-bottom: 31rpx;
	}

	.form_body_item {
		height: 217rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
		border-radius: 12rpx;
		font-size: 28rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 0;
	}

	.form_body {
		width: 100vw;
		padding: 0 10px;
		margin-top: 40rpx;
		box-sizing: border-box;
	}

	.navigation_seleitem {
		width: 150rpx;
		height: 59rpx;
		background: #F0F2FF;
		border-top-left-radius: 11rpx;
		border-top-right-radius: 11rpx;
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		position: relative;
		bottom: -2px;
	}

	.navigation_item {
		width: 150rpx;
		height: 59rpx;
		border-top-left-radius: 11rpx;
		border-top-right-radius: 11rpx;
		font-size: 26rpx;
		color: #F0F2FF;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
		bottom: -2px;
	}

	.Navigation {
		display: flex;
		position: absolute;
		bottom: 0px;
		transition: all .5s;
	}

	.header_seach_butten {
		font-size: 24rpx !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		flex-shrink: 1;
		margin-left: 9rpx !important;
		background: #FFFFFF !important;
		justify-content: center;
	}

	.uni-easyinput__content {
		height: 80rpx;
	}

	.uni-easyinput {
		height: 80rpx;
	}

	.header_seach_seach {
		display: flex;
		height: 80rpx;
		margin-top: 23rpx;
	}

	.header_seach_title {
		display: flex;
		align-items: center;
	}

	.header_seach {
		font-size: 26rpx;
		padding: 0 10px;
	}

	.uni-navbar--border {
		border: 0px !important;
	}

	.header {
		background-color: #007AFF;
		color: white;
		min-height: 403rpx;
		background-image: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png');
		background-size: 100% 100%;
		position: relative;
	}

	.uni-navbar__header-btns-right {
		padding-right: 0 !important;
		width: 120rpx !important;
	}

	.top {
		height: var(--status-bar-height);
	}
</style>
