<template>
	<view id="warp">
		<view class="t_login_passList">
			<view class="input_icon"><text style="color: red;"> * </text>车 牌 号：</view>
			<input
				class="input_css"
				v-model="formData.vehiclePlate"
				border="none"
				placeholder="请输入车牌号"
			></input>
		</view>
		<view class="t_login_passList">
			<view class="input_icon">设备名称：</view>
			<input
				class="input_css"
				v-model="formData.vehicleCode"
				border="none"
				placeholder="请输入设备名称"
			></input>
		</view>
		
		<view class="t_login_passList" @click="to_vehicle_personnels">
			<view class="input_icon" style="width: 580rpx;">
				<view class="input_icon_text">车组人员：</view>
			</view>
			<view style="width: 30rpx;height: 30rpx;" >
				<image src="../../static/images/my/right_icon.png" mode="widthFix" style="width: 30rpx;height: 30rpx;"></image>
			</view>
		</view>
		<view class="personnels">
			<view class="personnels_item" v-for="item in selectList" :key='item.id'>
				{{item.userName||item.employeeName}}
				<view class="personnels_sj" v-if="item.isDriver">
					司机
				</view>
			</view>
		</view>
		<view class="t_login_passList bor_bot">
			<view class="input_icon">启用状态：</view>
			<view class="input_img">
				<switch :checked="formData.status==1" color="#007AFF" @change="change" />
			</view>
		</view>
		<view class="btn_css">
			<button class="btn" @tap="nextHandle">保存</button>
			<!-- <button v-if="id" class="btn2" @tap="delUser">删除</button> -->
		</view>
	</view>
</template>
<script>
	const {urlList,https} = require('@/static/api');
	export default {
		data() {
			return {
				formData: {
					vehicleCode:'',//设备名称
					vehiclePlate:'',//车牌
					status:''//状态
				},
				selectList: [],  //角色列表
				id:'',
			};
		},
		onLoad(options) {
			const _that=this
			_that.id = options.id;
			https(urlList.getvehiclInfo+'/'+_that.id,'GET','','').then(data => {
				console.log(data)
				this.formData.vehicleCode=data.data.vehicleCode
				this.formData.vehiclePlate=data.data.vehiclePlate
				this.formData.status=data.data.status
				this.selectList=data.data.vehiclePerson
			}).catch(err => {
				uni.showToast({
					title:err,
					icon:'none',
					duration:1500
				})
			})
			
		},
		methods:{
			change(e){
				console.log(e.detail.value)
				if(e.detail.value){
					this.formData.status=1
				}else{
					this.formData.status=-1
					}
			},
			// 保存
			nextHandle(){
				let {vehicleCode,vehiclePlate} = this.formData;
				if(vehicleCode == ''){
					uni.showToast({
						title:'设备名称不能为空',
						icon:'none',
					})
					return;
				};
				if(vehiclePlate==''){
					uni.showToast({
						title:'设备车牌号不能为空',
						icon:'none',
					})
					return;
				};
				this.id ? this.putAddUser('put') : this.putAddUser('add')
				
			},
			// 修改、新增 信息
			putAddUser(type){
				const postData = {
					vehicleCode:this.formData.vehicleCode,
					vehiclePlate:this.formData.vehiclePlate,
					status:this.formData.status,
				};

				var vehiclePersons=[]
				console.log(this.selectList)
				this.selectList.forEach(item=>{
					var obj={
						vehicleId:this.id,
						userId:item.userId,
						userName:item.userName||item.employeeName,
						userPhone:item.userPhone||item.employeePhone,
						isDriver:item.isDriver
					}
					vehiclePersons.push(obj)
				})
				postData.vehiclePersons=vehiclePersons
				console.log(postData)
				
				if(type == 'add'){
					https(urlList.putAddUserInfo,'POST',postData,'正在新增...').then(data => {
						uni.showToast({
							title:'新增成功',
							icon:'none'
						})
							uni.navigateBack();
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}else{
					postData.id = this.id;
					https(urlList.getvehiclInfo,'PUT',postData,'正在修改...').then(data => {
						const that = this;
						uni.showToast({
							title:'修改成功',
							icon:'none',
							duration:1500
						})
						setTimeout(()=>{
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2]; //上一个页面
							var prevPage_index;
							prevPage.$vm._data.peopleList.forEach((item,index)=>{
								if(item.id==that.id){
									prevPage_index=index
								}
							})
							// prevPage.$vm._data.peopleList[prevPage_index].employeeName=employeeName
							// prevPage.$vm._data.peopleList[prevPage_index].employeePhone=employeePhone
							// prevPage.$vm._data.peopleList[prevPage_index].roleName=roleName
							// prevPage.$vm._data.peopleList[prevPage_index].roleId=roleId
							// prevPage.$vm._data.peopleList[prevPage_index].status=status
							// prevPage.$vm._data.peopleList = that.selectList;
							uni.navigateBack() //返回上一页面
						},1500)
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}
			},
			// 前往车组人员选择页面
			to_vehicle_personnels(){
				// uni.navigateTo({
				// 	url:'/pages/select-personnel/select-personnel?selectList='+ JSON.stringify(this.selectList)
				// })
				uni.navigateTo({
					url: '/pages/vehicle_personnels/vehicle_personnels?type=czry'+'&selectList=' + JSON
						.stringify(this.selectList)
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
#warp{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.t_login_passList{
		width:650rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #e6e6e6;
		display: flex;
		flex-direction: row;
		align-items: center;
		.input_icon{
			width: 200rpx;
			// border: 1px solid red;
			margin-top: 5rpx;
			display: flex;
			align-items: center;
			padding-left: 10rpx;
		}
		
		.input_img{
			width:400rpx;
			display: flex;
			justify-content: flex-end;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.input_css{
			width:400rpx;
			height: 70rpx;
		}
		.input_css2{
			width:400rpx;
		}
		.input_radio{
			display: flex;
			flex-direction: column;
			.radio_list{
				margin-bottom: 20rpx;
			}
		}
		
	}
	.no_center{
		align-items: flex-start;
	}
	.btn_css{
		width: 700rpx;
		position: fixed;
		bottom: 10rpx;
		left: 25rpx;
		display: block;
		.btn{
			background-color:#1B64F8FF;
			color: white;
			margin-bottom: 48rpx;
		}
		.btn2{
			background: #F6F6F6; 
			color: #999999
		}
	}
	.personnels{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding:5rpx 60rpx;
	}
	.personnels_item{
		display: inline-block;
		padding: 10rpx 16rpx;
		color: #5298e6;
		position:relative;
		border:solid #5298e6 2rpx ;
		border-radius: 8rpx;
		margin-top: 15rpx;
		margin-right: 15rpx;
	}
	
	.personnels_sj{
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background: #5298e6;
		font-size: 16rpx;
		padding: 4rpx;
		border-radius: 4rpx;
		color: #fff;
	}
}
</style>
