<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				{{pageTitle}}
			</view>
		</headers>
		<view class="formBox">
			<form @submit="formSubmit">
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>车牌号
					</view>
					<view class="uni-form-input">
						<input class="uni-input" placeholder-class="cl" name="carNumber" :value="form.carNumber" placeholder="请输入" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						车牌照片
					</view>
					<view class="uni-form-input" style="display: inline-flex;">
						<view class="imgBox" v-show="form.carPhotosUrl">
							<image :src="url_config+'image/'+form.carPhotosUrl" class="img"></image>
							<uni-icons @click="deleteImg" class="deleteImg" type="clear" size="24"></uni-icons>
						</view>
						<view class="addImgBox" @click="selectImg">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>车辆颜色
					</view>
					<view class="uni-form-input">
						<picker @change="bindPickerChange" :value="selectIndex" :range="colorList" range-key="locationName">
							<view class="uni-input uni-select cl" v-if="selectIndex==null">
								请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{colorList[selectIndex]}}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>车辆类型
					</view>
					<view class="uni-form-input">
						<picker @change="bindPickerChange2" :value="carTypeIndex" :range="carTypeList" range-key="carTypeName">
							<view class="uni-input uni-select cl" v-if="carTypeIndex==null">
								请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{carTypeList[carTypeIndex].carTypeName}}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="uni-form-item">
					<view class="uni-form-label">
						司机姓名
					</view>
					<view class="uni-form-input">
						<input class="uni-input" placeholder-class="cl" name="driverName" :value="form.driverName" placeholder="请输入" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>司机电话
					</view>
					<view class="uni-form-input">
						<input class="uni-input" placeholder-class="cl" name="driverTelephone" :value="form.driverTelephone" placeholder="请输入" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>是否黑名单
					</view>
					<view class="uni-form-input">
						<radio-group @change="radioChange" name="isBlack">
						<label style="margin-right: 15px;" class="radio"><radio value="0" :checked="form.isBlack==0" />白名单</label>
						<label class="radio"><radio value="1" :checked="form.isBlack==1" />黑名单</label>
						</radio-group>
					</view>
				</view>
				<button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
				<button class="btn deleteBtn" v-show="!isAdd" @click="deleteFn">删除</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '新增车辆',
				selectIndex: null,
				colorList: ['蓝色', '绿色', '黄色', '白色','黑色'],
				carTypeList:[],
				carTypeIndex:null,
				form: {
					carColor: "",
					carNumber: "",
					carPhotosUrl: "",
					carType: "",
					driverName: "",
					driverTelephone: "",
					isBlack: '',
					projectSn: ''
				},
				personList: [],
				projectDetail: {},
				isAdd: true
			}
		},
		mounted() {
			
		},
		onLoad(options) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			
			if (options.id) {
				this.isAdd = false
				this.pageTitle='编辑车辆'
				this.getDetails(options.id)
			}else{
				this.getCarTypeList()
			}
		},
		
		methods: {
			deleteFn(){
				var that = this
				uni.showModal({
					title:'提示',
					content:'确定删除该车辆吗？',
					success(res) {
						if(res.confirm){
							that.sendRequest({
								url: 'xmgl/carInfo/delete',
								data: {
									id: that.form.id
								},
								method: "POST",
								success(res) {
									uni.showToast({
										title:'删除成功！'
									})
									setTimeout(()=>{
										uni.navigateBack({})
									},1000)
									
								}
							})
						}
					}
				})
			},
			selectImg(){
				var that =this
				uni.chooseImage({
					count:1,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config+'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								that.form.carPhotosUrl=JSON.parse(uploadFileRes.data).data[0].imageUrl
							}
						});
					}
				})
			},
			deleteImg(){
				this.form.carPhotosUrl=''
			},
			radioChange(e){
				this.form.isBlack=e.target.value
			},
			//获取车种
			getCarTypeList() {
				var that = this
				this.sendRequest({
					url: 'xmgl/carType/list',
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.carTypeList = res.result
						if(!that.isAdd){
							for (var i = 0; i < res.result.length; i++) {
								if(that.form.carType==res.result[i].id){
									that.carTypeIndex=i;
									break;
								}
							}
						}
					}
				})
			},
			getDetails(id) {
				var that = this
				this.sendRequest({
					url: 'xmgl/carInfo/queryById',
					data: {
						id: id
					},
					method: "POST",
					success(res) {
						that.form = res.result
						that.selectIndex = that.colorList.indexOf(that.form.carColor)
						if(that.form.carPhotosUrl){
							var arr = JSON.parse(that.form.carPhotosUrl)
							if(arr.length>0){
								that.form.carPhotosUrl=arr[0].url
							}else{
								that.form.carPhotosUrl=''
							}
						}else{
							that.form.carPhotosUrl=''
						}
						that.getCarTypeList()
					}
				})
			},
			bindPickerChange: function(e) {
				this.selectIndex = e.target.value
			},
			bindPickerChange2: function(e) {
				this.carTypeIndex = e.target.value
			},
			bindDateChange: function(e) {
				this.form.eduTime = e.target.value
			},
			formSubmit(e) {
				var that = this
				console.log(e)
				var params = e.detail.value
				params.projectSn = this.projectDetail.projectSn
				if (this.selectIndex == null) {
					uni.showToast({
						title: '请选择车辆颜色',
						icon: 'none'
					})
					return false;
				}
				if (this.carTypeIndex == null) {
					uni.showToast({
						title: '请选择车辆类型',
						icon: 'none'
					})
					return false;
				}
				if (params.carNumber == '') {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return false;
				}
				if (params.driverTelephone == '') {
					uni.showToast({
						title: '请输入司机电话',
						icon: 'none'
					})
					return false;
				}
				if (params.isBlack == '') {
					uni.showToast({
						title: '请选择是否黑名单',
						icon: 'none'
					})
					return false;
				}
				if(this.form.carPhotosUrl){
					params.carPhotosUrl=JSON.stringify([{name:'',url:this.form.carPhotosUrl}])
				}
				params.carColor=this.colorList[this.selectIndex]
				params.carType=this.carTypeList[this.carTypeIndex].id

				var url = 'xmgl/carInfo/edit'
				if (this.isAdd) {
					url = 'xmgl/carInfo/add'

				} else {
					params.id = this.form.id
				}
				this.sendRequest({
					url: url,
					data: params,
					method: "POST",
					success(res) {
						uni.showToast({
							title: '保存成功！'
						})
						uni.navigateBack({
							
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.addImgBox{
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 60px;
		height: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;
		
		.icon-add{
			width: 18px;
			height: 18px;
		}
	}
	.imgBox{
		width: 60px;
		height: 60px;
		display: inline-flex;
		position: relative;
		margin-right: 15px;
		.img{
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
		.deleteImg{
			position: absolute;
			right: -10px;
			top: -10px;
		}
	}
</style>
