<template>
	<div class="common-page device-manage">
		<div class="panel-bottom page-row">
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<el-form size="small" label-width="100px" :rules="rules">

							<div style="font-size:20px;font-weight:bold;margin-bottom:10px;">选择车辆</div>
							<el-form-item label="车牌号" style="display: inline-block;">
								<el-input v-model="query.number" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>
							</el-form-item>
							<el-form-item label="所属车队" style="display: inline-block;">
								<el-select v-model="query.road" placeholder="请选择所属车队" style="width:180px;">
									<el-option v-for="(obj,index) in carFleetData" :label="obj.name" :value="obj.name" :key="index"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="卡车类型" style="display: inline-block;">
								<el-select v-model="query.carclass" placeholder="请选择卡车类型" style="width:180px;">
									<el-option v-for="(obj,index) in carTypeData" :label="obj.name" :value="obj.name" :key="index"></el-option>
								</el-select>
							</el-form-item>
							<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch" style="display: inline-block;">搜索</el-button>
							<el-button size="mini" icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button>

							<el-form-item label="选择车辆">
								<el-checkbox-group v-model="checkDataList" class="checkboxViews">
									<el-checkbox v-for="(obj,index) in carInformationData" :label="obj.number" :key="index">{{obj.number}}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>

							<div style="font-size:20px;font-weight:bold;margin-bottom:10px;">调度详情</div>
							<el-form-item label="调度单号" style="display: inline-block;" prop="odd">
								<el-input v-model="form.odd" clearable size="small" placeholder="请输入调度单号" style="width:220px;"/>
							</el-form-item>
							<!-- <el-form-item label="车辆类型" style="display: inline-block;">
								<el-select v-model="form.carclass" placeholder="请选择卡车类型" style="width:220px;">
									<el-option v-for="(obj,index) in carTypeData" :label="obj.name" :value="obj.name" :key="index"></el-option>
								</el-select>
							</el-form-item> -->
							<el-form-item label="调度目的地" style="display: inline-block;">
								<el-select v-model="form.destination" placeholder="请选择目的地" style="width:220px;">
									<el-option v-for="(obj,index) in carInformationDataAll" :label="obj.number ? obj.number : obj.name" :value="obj.number ? obj.number : obj.name" :key="index"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="调度类型" style="display: inline-block;">
								<el-select v-model="form.orderClass" placeholder="请选择调度类型" style="width:220px;">
									<el-option label="装车" value="0"></el-option>
									<el-option label="卸车" value="1"></el-option>
								</el-select>
							</el-form-item>
							<br>
							<el-form-item label="调度时长" style="display: inline-block;">
								<el-select v-model="form.duration" placeholder="请选择调度时长" style="width:220px;">
									<el-option label="单次" value="单次"></el-option>
									<el-option label="一天" value="一天"></el-option>
									<el-option label="长期" value="长期"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="调度截止日期" style="display: inline-block;">
								<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" style="width:220px;" :disabled='form.duration != "长期" '></el-date-picker>
							</el-form-item>
							<br>
							<el-form-item label="说明" style="display: inline-block;">
								<el-input type="textarea" v-model="form.carshow" style="width:545px;"></el-input>
							</el-form-item>
							<br>
							<el-button type="primary" style="height:40px;width:100px;margin-left:100px;" round @click="toDispatch">调度</el-button>

						</el-form>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
	name: 'CarManualScheduling',
	data() {
		return {
			query:{},
			form:{},
			checkDataList:[],
			carFleetData:[],
			carInformationData:[],
			areaInformationData:[],
			carTypeData:[],
			carInformationDataAll:[],
			rules: {
				// odd: [
				// 	{required: true, message: '请输入调度单号', trigger: 'blur' }
				// ],
			},
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		// 点击搜索
		toSearch() {
			this.loadData();
		},
		// 重置搜索
		clearLimit(){
			this.query = {};
			this.loadData()
		},
		loadData() {
			var param = this.query;
			param.size = 9999;

			this.$nextTick(()=>{
				//获取车辆信息以及状态
				HttpReq.truckDispatching.carPeopStatus1Query(param).then((res) => {
					this.carInformationData = res;
				})
				//获取总的车辆信息
				HttpReq.truckDispatching.carInformationQuery({size:9999,carclass:'铲车'}).then((res) => {
					if(res.code == 200){
						this.carInformationDataAll = res.data.content;
						// let aa1 = [];
						// aa1 = res.data.content;
						// //获取卸点区域信息
						// HttpReq.truckDispatching.onlyGetMiningAreaQuery({size:9999}).then((res) => {
						// 	res.forEach((item,index)=>{
						// 		aa1.push(item);
						// 	});
						// 	this.carInformationDataAll = aa1;
						// })
					}
				})
				//获取车队
				HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carFleetData = res.data.content;
					}
				})
				//获取车辆类型
				HttpReq.truckDispatching.carTypeQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carTypeData = res.data.content;
					}
				})
			})

		},
		//发起调度
		toDispatch(){
			let that = this;
			this.checkDataList.forEach((item,index)=>{
				let query1 = {...that.form};
				query1.carNo = item;
				HttpReq.truckDispatching.manualSchedulingAdd(query1).then((res) => {
					if(res.code == 200){
						
					}else{
						this.$notify({
							title: res.msg,
							type: 'error',
							duration: 2500
						})
					}
				}).catch(function(error) { });
				HttpReq.truckDispatching.manualOrderAdd(query1).then((res) => {
					if(res.code == 200){
						
					}else{
						this.$notify({
							title: res.msg,
							type: 'error',
							duration: 2500
						})
					}
				}).catch(function(error) { });
			})
			this.$notify({
				title: '车辆调度发起成功！',
				type: 'success',
				duration: 2500
			});
			this.query = {};
			this.form = {};
			this.checkDataList = [];
			this.loadData();
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.el-table .warning-row {
		background: oldlace;
	}
	.el-table .success-row {
		background: #f0f9eb;
	}
	
	.device-manage{
		.panel-bottom{
			.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
			.btn-groub2{
				display:inline-block;
				.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
				.el-button--warning {
					background-color: #e6a23c;
					border-color: #e6a23c;
				}
				.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
			}
		}
	}
	.checkboxViews{
		padding-top: 10px;
		padding-left: 10px;
		box-sizing: border-box;
		width: 920px;
		height: 150px;
		border: 1px gainsboro solid;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	.ecahrt1-dialog{
		display:flex;align-items:center;
		.el-dialog{
			margin-top:inherit !important;display:table !important;width:fit-content;
			.el-form-item{margin-right:0;}
		}

		.el-dialog__header{height:0;padding:0;display:block;}
		.form-body{
			border:1px solid #999;width:800px;height:500px;position:relative;
			>div{position:absolute;top:0;left:0;height:100%;width:100%;}
		}
	}
</style>
