<template>
	<view class="container">
		<uni-navbar title="司机信息"></uni-navbar>
		<view class="box">
			<view class="reject-box commonBj commonMt">
				<view class="reject-box-top">
					<view class="top-left">
						<image src="../../static/images/user/users.png" mode="widthFix"></image>
						<text class="listTitle">司机信息</text>
					</view>
					<view class="top-right">
						<image
							:src="isBang?'../../static/images/car/binding.png':'../../static/images/car/binding2.png'"
							mode="widthFix"></image>
						<text :class="isBang?'stateText':'nostateText'" class="state-text">{{isBang?'已绑定':'未绑定'}}</text>
					</view>
				</view>
				<view class="reject-box-bottom infoHeightBig">
					<view class="state-icon" v-if="isBang">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">所属车辆:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.carNumber}}</text>
						</view>
						<u-button class="buttonStyle" v-if="(!isInfo)&&isHomeInfo" @click="upData"
							color="linear-gradient(to top, #F59A02, #FFD334)">修改</u-button>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">司机姓名:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.driverName}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">身份证号</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.decryptCardNum}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">联系电话:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.phone}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">驾照类型:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.driverType?form.driverType:'暂无'}}</text>
						</view>
					</view>
					<!-- <view class="border-style"></view> -->
					<view class="state-icon">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">驾驶证件</text>
						</view>
					</view>
					<view class="imgBox" v-for="(item,index) in form.imgList" :key="index">
						<u--image class="imgBorder" radius="15rpx" :showLoading="true" :src="item.url" width="599rpx"
							height="270rpx" @tap="previewImg(item.url)">
						</u--image>
					</view>
					<!-- <view class="imgBox">
						<u--image class="imgBorder" radius="15rpx" :showLoading="true" :src="src" width="599rpx"
							height="270rpx" @tap="previewImg(src)">
						</u--image>
					</view> -->
				</view>
			</view>
			<u-button @click="submit" class="buttonLang commonMb" shape="circle"
				color="linear-gradient(to top, #F59A02, #FFD334)" v-if="isInfo">绑定司机</u-button>
		</view>
		<selectNew :isShow="isShow" :valueData="carValue" :oldList="teuckList" @changSelect="changSelect"></selectNew>
	</view>
</template>

<script>
	import {
		driverInfo,
		getTeuckList,
	    driverBd,
		driverUpadate
	} from '@/api/company/user.js'
	export default {
		data() {
			return {
				isShow: false,
				isInfo: false,
				carValue: '',
				// 是否绑定
				isBang: true,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				teuckList: [],
				form: {
					id: null,
					//所属车辆
					carNumber: null,
					truckId: null,
					//司机姓名
					driverName: null,
					// 身份证号
					decryptCardNum: null,
					//联系电话
					phone: null,
					//驾照类型
					driverType: null,
					//驾驶证件
					imgList: [],
					// 1023271044427829248
					companyId: '',
					
				},
				isHomeInfo:true
			}
		},
		methods: {
			upData() {
				this.isShow = true;
			},
			previewImg(urls) {
				uni.previewImage({
					urls:[urls],
					current:urls
				})
			},
			submit() {
				this.isShow = true;
			},
			driverBd(){
				let data={
						"id": this.form.id,
						"truckId": this.form.truckId,
						"deleteFlag": 0
				}
				driverBd(data).then(res=>{
					this.$tab.navigateTo('/pages/user/index')
				})
			},
			driverUpadate(){
				driverUpadate({...this.form,cardNum:this.form.decryptCardNum}).then(res=>{
					// this.$tab.navigateTo('/pages/user/index')
				})
			},
			changSelect(data) {
				this.isShow = false;
				if (data && data.value) {
					this.form.truckId = data.value;
					this.form.carNumber = data.name;
				}
				if (this.isInfo) {
					this.driverBd();
				} else {
                   this.driverUpadate();
				}
			},
			driverInfo() {
				driverInfo(this.form.id).then(res => {
					// console.log(res.data);
					this.form = res.data;
					if (res.data.deleteFlag == '0') {
						this.isBang = true;
					} else {
						this.isBang = false;
					}
				})
			},
			getTeuckList() {
				getTeuckList({
					companyId: this.form.companyId
				}).then(res => {
					console.log('res', '我是车辆')
					this.teuckList = res.data.map(item => {
						return {
							name: item.carNumber,
							value: item.id
						}
					})
				})
			},
		},
		onLoad: function(option) {
			console.log(option, 'option');
			// 是否是详情页面
			if (option.isInfo) {
				this.isInfo = true
			}else{
				this.isInfo = false
			}
			// 是否是首页点进去的详情页面
			if (option.isHomeInfo) {
				this.isHomeInfo = false
			}else{
				this.isHomeInfo = true
			}
			
			this.form.id = option.id;
			this.form.companyId = this.$store.state.user.companyId;
			// console.log(this.$store.state.user.companyId, 'this.$store.state.userData.companyId');
			this.driverInfo();
			this.getTeuckList()
		}
	}
</script>

<style lang="scss" scoped>
	.reject-box {
		margin-bottom: 28rpx;

		.reject-box-top {
			width: 100%;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
			display: flex;
			justify-content: space-between;

			.top-right {
				display: flex;
				justify-content: start;
				align-items: center;
				margin-right: 36rpx;

				uni-image {
					width: 28rpx;
					margin-left: 32rpx;
					vertical-align: middle;
				}

				.state-text {
					margin-left: 13rpx;
					line-height: 69rpx;
				}
			}

			uni-image {
				width: 50rpx;
				margin-left: 32rpx;
				vertical-align: middle;
			}
		}

		.reject-box-bottom {
			.state-icon {
				display: flex;
				margin: 63rpx 0 63rpx 39rpx;
			}

			.border-style {
				border-top: 1rpx dashed #F98803;
				width: 90%;
				margin: 0 auto;
			}

			.border-style2 {
				border-top: 1rpx dashed #FB5637;
				width: 90%;
				margin: 0 auto;
			}
		}
	}

	.imgBox {
		display: flex;
		margin: 30rpx 0 30rpx 39rpx;
	}

	.buttonStyle {
		width: 108rpx;
		height: 45rpx !important;
		line-height: 45rpx;
		// background: linear-gradient(0deg, #FFD334 0%, #F59A02 100%);
		border-radius: 15rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FFFFFF;
		border: 0;
		margin-right: 32rpx;
	}

	.imgBorder {
		border: 2rpx solid #495B93;
		border-radius: 15rpx;
	}
</style>
