<template>
	<!-- logisticsEntruckingLogs -->
	<view>
		<view style="height: 90%;overflow: scroll;">
			<view v-for="(item,index) in upCarList" :key="index" style="width: 95%;height: 250rpx;margin: 20rpx auto 0;line-height: 50rpx;border: 2px solid #eee;border-radius: 20rpx;padding: 10px;">
				<view>线路名：{{item.circuitName}}</view>
				<view>车牌号：{{item.carNumber}}</view>
				<view>司机电话：{{item.carPhone}}</view>
				<view>运输费：{{item.carFee}} <text style="padding-left: 20rpx;">装车费：{{item.carFreight}}</text></view>
			</view>
			<view style="width: 95%;margin: 20rpx auto 0;">
				<uni-forms-item label="装车时间" labelWidth='80px' name="nickName">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
				</uni-forms-item>
			</view>
		</view>
		<view style="position: fixed;bottom: 0;width: 100%;display: flex;height: 140rpx;padding-top: 20rpx;">
			<view @tap="$refs.inputDialog.open()" class="bottom-btn">新增一条</view>
			<view @tap="submit" class="bottom-btn" style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">确认</view>
		</view>
		<uni-popup ref="inputDialog" background-color="#fff" :is-mask-click="true">
			<view class="type-popup">
				<view style="height: 120rpx;font-size: 36rpx;font-weight: bold;line-height: 120rpx;text-align: center;">
					新增装车记录
				</view>
				
				<uni-forms-item label="线路" labelWidth='80px' name="nickName">
					<uni-data-select v-model="lineValue" :localdata="lineList" @change="lineChange" placeholder="请选择线路" style="width: 100%;"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="车牌号" labelWidth='80px' name="mobile">
					<uni-easyinput type="text" v-model="formData.carNumber" placeholder="请输入车牌号" />
				</uni-forms-item>
				<uni-forms-item label="司机电话" labelWidth='80px' name="mobile">
					<uni-easyinput type="number" v-model="formData.carPhone" placeholder="请输入司机电话" />
				</uni-forms-item>
				<uni-forms-item label="运输费" labelWidth='80px' name="address">
					<uni-easyinput type="number" v-model="formData.carFee" placeholder="请输入运输费" />
				</uni-forms-item>
				<uni-forms-item label="装车费" labelWidth='80px' name="address">
					<uni-easyinput type="number" v-model="formData.carFreight" placeholder="请输入装车费" />
				</uni-forms-item>
				
				<view
					style="width: 100%;height: 90rpx;line-height: 90rpx;text-align: center;border-radius: 0;background: linear-gradient(90deg, #60F3FF, #088FEB);color: #fff;display: flex;">
					<view style="width:50%;" @tap="$refs.inputDialog.close()">取消</view>
					<view style="width:50%;background: linear-gradient(90deg, #FF9797, #FFC1E0);"
						@tap="addUpCar">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upCarList:[],
				lineValue:'',
				lineList:[],
				single: '',
				formData:{
					createBy:uni.getStorageSync('mobile'),
					companyId:uni.getStorageSync('transCompany'),
					companyName:uni.getStorageSync('companyName'),
					circuitId:"",
					carUserName:'',
					circuitName:"",
					carNumber:'',
					carPhone:'',
					carFee:'',
					carFreight:""
				}
			};
		},
		onShow(){
			this.getLine()
		},
		methods: {
			lineChange(e){
				
				for(let i=0;i<this.lineList.length;i++){
					
					if(this.lineList[i].circuitId == e){
						
						this.formData.circuitId = this.lineList[i].circuitId
						this.formData.circuitName = this.lineList[i].circuitName
					}
				}
			},
			getLine(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsCompanyRoute/getLogisticsCompanyRoutePageList',
					data:{
						pageNum:1,
						pageSize:100,
						companyId:uni.getStorageSync('transCompany'),
						companyName:"",
						circuitId:"",
						circuitName:""
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							for (let i = 0; i < res.data.result.records.length; i++) {
								res.data.result.records[i].value = res.data.result.records[i].circuitId
								res.data.result.records[i].text = res.data.result.records[i].circuitName
							}
							setTimeout(res1=>{
								this.lineList = res.data.result.records
							},500)
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			submit(){
				let that = this;
				if(this.single == ''){
					this.tui.toast('请选择装车时间')
					return
				}else{
					for(let i=0;i<this.upCarList.length;i++){
						this.upCarList[i].createTime = this.single + ' 00:00:00'
					}
					uni.showModal({
						title:'提示',
						content:'确认保存今日装车记录吗？',
						confirmText:'装车',
						success(res1) {
							if (res1.confirm) {
								let logisticsEntruckingLogs = that.upCarList
								uni.request({
									url: that.tui.interfaceUrl() + '/app/logisticsEntruckingLog/batchAddLogisticsEntruckingLog',
									data:logisticsEntruckingLogs,
									header: {
										'content-type': 'application/json',
										'appWLToken': that.tui.getToken()
									},
									method: 'POST', //'GET','POST'
									dataType: 'json',
									success: (res) => {
										if(res.data.code == 401){
											uni.clearStorage()
											uni.navigateTo({
												url: '/package2/login/login'
											})
										}
										if (res.data.code == 200){
											that.tui.toast('保存成功')
											
											setTimeout(res1=>{
												that.$refs.inputDialog.close()
											},1000)
										}
									},
									fail: (res) => {
										that.tui.toast("网络不给力，请稍后再试~")
									}
								})
							}
						}
					})
				}
			},
			addUpCar(){
				this.upCarList.push(this.formData)
				this.formData = {
					createBy:uni.getStorageSync('mobile'),
					companyId:uni.getStorageSync('transCompany'),
					companyName:uni.getStorageSync('companyName'),
					carUserName:'',
					circuitId:this.formData.circuitId,
					circuitName:this.formData.circuitName,
					carNumber:'',
					carPhone:'',
					carFee:'',
					carFreight:""
				}
				this.$refs.inputDialog.close()
				this.$forceUpdate()
				
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.type-popup {
		width: 600rpx;
		height: 820rpx;
		background: #fff;
		border-radius: 10px;
		position: relative;
		padding: 0 20rpx;
	}
	.bottom-btn{
		width: 45%;
		height: 100rpx;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 20px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 36rpx;
		margin: 0 3%;
	}
</style>