<template>
	<view class="container">
		
		<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="120">
			<u-form-item label="有无挂车" prop="form.has_mount" borderBottom ref="item1">
				<u-radio-group v-model="form.has_mount" placement="row" @change="groupChange">
					<u-radio shape="square" name="1" label="有"></u-radio>
					<span style="width: 40px;"></span>
					<u-radio shape="square" name="0" label="无"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="挂车车牌" prop="form.mount_license" borderBottom ref="item1" v-if="form.has_mount == '1'">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult2"
					:defaultStr="form.mount_license"></car-number-input>
			</u-form-item>
			<u-form-item label="牵引车车牌" prop="form.tractor_license" borderBottom ref="item1">
				<car-number-input class="car-number-input" @numberInputResult="numberInputResult"
					:defaultStr="form.tractor_license"></car-number-input>
			</u-form-item>
			<u-form-item label="手机号" prop="form.phone_num" borderBottom ref="item1">
				<u--input v-model="form.phone_num" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label="入园目的" prop="form.mission_name" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_mudi = true">
					<u--input v-model="form.mission_name" border="none" placeholder="请选择入园目的"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>
			
			<u-form-item label="载货品类" prop="form.cargo_category_name" borderBottom ref="item1">
				<view class="input_sbtn" style="display: flex;" @click="show_cargo = true">
					<u--input v-model="form.cargo_category_name" border="none" placeholder="请选择载货品类"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-form-item>
			
			<u-form-item label="道运证" prop="transport_pic" borderBottom>
				<view class="upload-box">
					<u-upload :fileList="transportPicList" @afterRead="afterReadTransport" @delete="deleteTransport" 
						name="transport" :maxCount="3" multiple :previewFullImage="true">
					</u-upload>
					<text class="upload-tip">最多上传3张</text>
				</view>
			</u-form-item>
			
			<u-form-item label="牵引车行驶证" prop="tractor_pic" borderBottom>
				<view class="upload-box">
					<u-upload :fileList="tractorPicList" @afterRead="afterReadTractor" @delete="deleteTractor" 
						name="tractor" :maxCount="3" multiple :previewFullImage="true">
					</u-upload>
					<text class="upload-tip">最多上传3张</text>
				</view>
			</u-form-item>
			
			<u-form-item label="驾驶证" prop="driver_pic" borderBottom>
				<view class="upload-box">
					<u-upload :fileList="driverPicList" @afterRead="afterReadDriver" @delete="deleteDriver" 
						name="driver" :maxCount="3" multiple :previewFullImage="true">
					</u-upload>
					<text class="upload-tip">最多上传3张</text>
				</view>
			</u-form-item>
			
			<u-form-item label="其他说明" prop="form.remark" borderBottom ref="item1">
				<u--textarea v-model="form.remark" placeholder="请输入其他说明（选填）" maxlength="100"></u--textarea>
			</u-form-item>

		</u--form>

		<u-button type="primary" class="btn" text="提交信息" shape="circle" @click="add"></u-button>

		<u-picker :show="show_mudi" :columns="columns_mudi" @confirm="confirmMudi" @cancel="show_mudi = false"></u-picker>
		<u-picker :show="show_cargo" :columns="columns_cargo" @confirm="confirmCargo" @cancel="show_cargo = false"></u-picker>

	</view>

</template>

<script>
import { config } from '../../common/config'
	import {
		get,
		post
	} from '@/common/request.js'
	export default {
		data() {
			return {
				show_mudi: false,
				show_cargo: false,
				columns_mudi: [
					['装货/卸货', '维修/洗车/停车', '常驻', '维修', '洗车', '停车', '检测', '洗罐']
				],
				columns_cargo: [],
				cargoList: [],
				
				transportPicList: [],
				tractorPicList: [],
				driverPicList: [],

				form: {
					has_mount: "0",
					mission: "",
					mission_name: "",
					tractor_license: "",
					mount_license: "",
					phone_num: uni.getStorageSync('driverInfo')?.phone || "",
					reporter_name: uni.getStorageSync('driverInfo')?.account || "",
					cargo_category_id: "",
					cargo_category_name: "",
					transport_pic: "",
					tractor_pic: "",
					driver_pic: "",
					remark: ""
				},
				rules: {}
			}
		},
		onLoad(option) {
			if(option.vehicleNo){
				this.form.tractor_license = option.vehicleNo
			}
			this.getCargoList()
		},
		methods: {
			async getCargoList() {
				await get('/myapi/api/yq_driver/getProductCate').then(res => {
					if (res.code == 1) {
						this.cargoList = res.data
						this.columns_cargo = [res.data.map(item => item.name)]
					}
				})
			},
			
			async add() {
				if(!this.form.tractor_license || this.form.tractor_license.trim().length < 7){
					uni.showToast({
						title:'请输入牵引车车牌',
						icon:'none'
					})
					return false
				}
				
				if(this.form.has_mount == 1 && (!this.form.mount_license || this.form.mount_license.trim().length < 7)){
					uni.showToast({
						title:'请输入挂车车牌',
						icon:'none'
					})
					return false
				}
				
				if(!this.form.mission){
					uni.showToast({
						title:'请选择入园目的',
						icon:'none'
					})
					return false
				}
				
				if(!this.form.cargo_category_id){
					uni.showToast({
						title:'请选择载货品类',
						icon:'none'
					})
					return false
				}
				
				await post('/myapi/api/yq_driver/enParkReport', {
					...this.form
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '上报成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			
			groupChange(e) {
				this.form.has_mount = e
			},
			
			confirmMudi(e) {
				this.form.mission_name = e.value[0]
				this.form.mission = e.indexs[0] + 1
				this.show_mudi = false
			},
			
			confirmCargo(e) {
				const index = e.indexs[0]
				this.form.cargo_category_name = this.cargoList[index].name
				this.form.cargo_category_id = this.cargoList[index].id
				this.show_cargo = false
			},
			
			numberInputResult(e) {
				this.form.tractor_license = e
			},
			
			numberInputResult2(e) {
				this.form.mount_license = e
			},
			
			async afterReadTransport(event) {
				const file = event.file
				await this.uploadImage(file, 'transport')
			},
			
			async afterReadTractor(event) {
				const file = event.file
				await this.uploadImage(file, 'tractor')
			},
			
			async afterReadDriver(event) {
				const file = event.file
				await this.uploadImage(file, 'driver')
			},
			
			async uploadImage(file, type) {
				uni.showLoading({ title: '上传中...' })
				
				const files = Array.isArray(file) ? file : [file]
				
				for(let f of files) {
					await new Promise((resolve) => {
						uni.uploadFile({
							url: '/myapi/api/yq_driver/upload',
							filePath: f.url,
							name: 'file',
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (res) => {
								try {
									const data = JSON.parse(res.data)
									if(data.code == 1) {
										const imageUrl = data.data.fullurl
										
										if(type === 'transport') {
											this.transportPicList.push({ url: imageUrl })
											this.form.transport_pic = this.transportPicList.map(item => item.url).join(',')
										} else if(type === 'tractor') {
											this.tractorPicList.push({ url: imageUrl })
											this.form.tractor_pic = this.tractorPicList.map(item => item.url).join(',')
										} else if(type === 'driver') {
											this.driverPicList.push({ url: imageUrl })
											this.form.driver_pic = this.driverPicList.map(item => item.url).join(',')
										}
									} else {
										uni.showToast({ title: data.msg || '上传失败', icon: 'none' })
									}
								} catch(e) {
									uni.showToast({ title: '上传失败，数据解析错误', icon: 'none' })
								}
								resolve()
							},
							fail: (err) => {
								console.error('上传失败', err)
								uni.showToast({ title: '上传失败', icon: 'none' })
								resolve()
							}
						})
					})
				}
				
				uni.hideLoading()
			},
			
			deleteTransport(event) {
				this.transportPicList.splice(event.index, 1)
				this.form.transport_pic = this.transportPicList.map(item => item.url).join(',')
			},
			
			deleteTractor(event) {
				this.tractorPicList.splice(event.index, 1)
				this.form.tractor_pic = this.tractorPicList.map(item => item.url).join(',')
			},
			
			deleteDriver(event) {
				this.driverPicList.splice(event.index, 1)
				this.form.driver_pic = this.driverPicList.map(item => item.url).join(',')
			}
		}
	}
</script>

<style scoped lang="less">
	.car-number-input {
		width: 100%;
	}

	.container {
		padding: 20px;

		.tag_title {
			width: 80px;
			height: 30px;
			display: flex;
			align-items: center;
		}
		
		.upload-box {
			width: 100%;
			
			.upload-tip {
				font-size: 12px;
				color: #999;
				margin-top: 10px;
				display: block;
			}
		}

		.btn {
			margin-top: 30px;
			margin-bottom: 30px;
		}
	}
</style>