<template>
	<div class="common-page device-manage">

		<div class="option page-row">
			<!--工具栏-->
			<div class="head-container">
				<!-- 搜索 -->
				<label class="el-form-item-label" style="font-weight: 500;">调度单号</label>
				<el-input v-model="query.odd" clearable size="small" placeholder="请输入调度单号" style="width:180px;"/>

				<label class="el-form-item-label" style="font-weight: 500;">车辆类型</label>
				<el-select v-model="query.carname" placeholder="请选择车辆类型" style="width:180px;">
					<el-option label="挖机" value="挖机"></el-option>
					<el-option label="铲车" value="铲车"></el-option>
					<el-option label="卡车" value="卡车"></el-option>
					<el-option label="清扫车" value="清扫车"></el-option>
				</el-select>
				<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
			</div>
		</div>
    	<!-- 表格 -->
		<div class="panel-bottom page-row">
			<h3>订单历史</h3>
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="toolbar">
							<el-button type="primary" @click="toAdd()">人工补录</el-button>
						</div>
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<el-table-column prop="odd" label="调度单号" align="center"></el-table-column>
								<el-table-column prop="carclass" label="车辆类型" align="center"></el-table-column>
								<el-table-column prop="carNo" label="车牌号" align="center"></el-table-column>
								<el-table-column prop="createTime" label="调度时间" align="center"></el-table-column>
								<el-table-column prop="name" label="调度人" align="center"></el-table-column>
								<el-table-column prop="destination" label="调度目的地" align="center"></el-table-column>
								<el-table-column prop="flag" label="调度类型" align="center" :formatter="flagChange"></el-table-column>
								<el-table-column prop="carshow" label="说明" align="center"></el-table-column>
								<el-table-column label="操作" align="center" fixed="right">
									<template slot-scope="scope">
										<!-- <el-button size="mini" type="success" icon="el-icon-view" @click="showCars(scope.row)"></el-button> -->
										<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
									</template>
								</el-table-column>
							</el-table>
							<!--分页组件-->
							<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 表单渲染 -->
		<el-dialog append-to-body :close-on-click-modal="true" :visible.sync="form.visible" title="调度详情" width="700px">
			<el-form size="small" label-width="100px">
				<el-form-item label="调度车辆">
					<div class="checkboxViews">
						<div v-for="(obj,index) in carInformationData" :key="index">{{obj}}</div>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog append-to-body :visible.sync="form.toAddVisible" title="添加调度" width="1200px">
			<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="queryAdd.number" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>
				</el-form-item>
				<el-form-item label="所属车队" style="display: inline-block;">
					<el-select v-model="queryAdd.road" placeholder="请选择所属车队" style="width:180px;">
						<el-option v-for="(obj,index) in carFleetDataAdd" :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="queryAdd.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="toSearchAdd" style="display: inline-block;">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="clearLimitAdd" style="display: inline-block;">重置</el-button>

				<el-form-item label="选择车辆">
					<el-checkbox-group v-model="checkDataListAdd" class="checkboxViewsAdd">
						<el-checkbox v-for="(obj,index) in carInformationDataAdd" :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="formAdd.odd" clearable size="small" placeholder="请输入调度单号" style="width:220px;"/>
				</el-form-item>
				<!-- <el-form-item label="车辆类型" style="display: inline-block;">
					<el-select v-model="formAdd.carname" 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="formAdd.startad" placeholder="请选择目的地" style="width:220px;">
						<el-option v-for="(obj,index) in areaInformationDataAdd" :label="obj.number ? obj.number : obj.name" :value="obj.number ? obj.number : obj.name" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<br>
				<el-form-item label="调度时间" style="display: inline-block;">
					<el-date-picker v-model="formAdd.endTime" type="datetime" placeholder="选择日期时间" style="width:220px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="调度人" style="display: inline-block;">
					<el-select v-model="formAdd.name" placeholder="请选择调度人" style="width:220px;">
						<el-option v-for="(obj,index) in renyuanALLData" :label="obj.name" :value="obj.name" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<br>
				<el-form-item label="说明" style="display: inline-block;">
					<el-input type="textarea" v-model="formAdd.carshow" style="width:545px;"></el-input>
				</el-form-item>
				<br>
				<el-button type="primary" style="height:40px;width:100px;margin-left:100px;" round @click="toDispatchAdd">确认</el-button>
			</el-form>
		</el-dialog>

	</div>
</template>

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

export default {
	name: 'CarVoiceSupplement',
	components: {},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			selectList:[],
			carInformationData:[],
			renyuanALLData:[],
			form: {
				title:'',
				visible:false,
				toAddVisible:false,
				reqType:'add',
				status:{cu:0},
				item:{},
			},
			rules: {
				// odd: [
				// 	{required: true, message: '请输入调度单号', trigger: 'blur' }
				// ],
			},

			formAdd:{},
			queryAdd:{},
			checkDataListAdd:[],
			carFleetDataAdd:[],
			carInformationDataAdd:[],
			areaInformationDataAdd:[],
			carTypeData:[],
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		//获取人工调度数据
		loadData() {
			var sort = 'id,desc';
			var param = this.query;
			param.page = this.page - 1;
			param.size = this.size;
			param.sort = sort;
			
			this.$nextTick(()=>{
				HttpReq.truckDispatching.personRecordingQuery(param).then((res) => {
					if(res.code == 200){
						this.loading = false;
						this.tableData = res.data.content;
						this.total = res.data.totalElements;
					}
				})
			})

		},
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}
			return '';
		},
		// 点击搜索
		toSearch() {
			this.page = 1;
			this.loadData();
		},
		// 重置搜索
		clearLimit(){
			this.query = {};
			this.loadData()
		},
		pageChange(e) {
			this.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.page = 1
			this.size = e
			this.loadData()
		},
		//查看调度车辆
		showCars(item){
			this.form.visible = true;
			this.carInformationData = JSON.parse(item.carNo);
		},
		//添加提示
		toAdd() {
			this.queryAdd = {};
			this.formAdd = {};
			this.checkDataListAdd = [];
			this.loadDataAdd();
			this.form.toAddVisible = true;
		},
		//删除提示
		toDelete(item) {
			var id = item.id;
			var odd = item.odd;
			this.$confirm('确认删除该条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then((e) => {
				this.reqRemoveProject([id],odd)
			}).catch((e) => {})
		},
		//删除调度
		reqRemoveProject(item){
			HttpReq.truckDispatching.personRecordingDel(item).then((res) => {
				if(res.status == 400){
					this.$notify({
						title: res.msg,
						type: 'error',
						duration: 2500
					})
				}else{
					this.$notify({
						title: '删除成功！',
						type: 'success',
						duration: 2500
					});
				}
				this.loadData();
			})
			HttpReq.truckDispatching.personRecordingCarsQuery({size:9999,odd:itemOdd}).then((res) => {
				let delCheckCarsList = [];
				if(res.code == 200){
					res.data.content.forEach((itemSon) => {
						delCheckCarsList.push(itemSon.id);
					});	
					HttpReq.truckDispatching.personRecordingCarsDel(delCheckCarsList).then((res) => { })
				}
			})
		},
		currentTime(time){
			var date = new Date(time);
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			//获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
			let currentFormatDate = year + "-" + month + "-" + day;
			return currentFormatDate;
		},

		// 点击搜索
		toSearchAdd() {
			this.loadDataAdd();
		},
		// 重置搜索
		clearLimitAdd(){
			this.queryAdd = {};
			this.loadDataAdd();
		},
		loadDataAdd() {
			var param = this.queryAdd;
			param.size = 9999;

			this.$nextTick(()=>{
				//获取车辆信息
				HttpReq.truckDispatching.carInformationQuery(param).then((res) => {
					if(res.code == 200){
						this.carInformationDataAdd = res.data.content;
						let array1 = [];
						res.data.content.forEach((item,index)=>{
							if(item.carclass == '铲车'){
								array1.push(item);
							}
						})
						this.$nextTick(()=>{
							//获取卸点区域信息
							HttpReq.truckDispatching.onlyGetMiningAreaQuery({size:9999}).then((res) => {
								res.forEach((item,index)=>{
									array1.push(item);
								});
								this.areaInformationDataAdd = array1;
							})
						})
					}
				})
				//获取用于调度人的人员
				HttpReq.truckDispatching.driverManagementPCQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.renyuanALLData = res.data.content;;
					}
				})
				//获取车队
				HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carFleetDataAdd = res.data.content;
					}
				})
				//获取区域信息
				// HttpReq.truckDispatching.onlyGetMiningAreaQuery({size:9999}).then((res) => {
				// 	this.areaInformationDataAdd = res;
				// })
				//获取车辆类型
				HttpReq.truckDispatching.carTypeQuery({size:9999}).then((res) => {
					if(res.code == 200){
						this.carTypeData = res.data.content;
					}
				})
			})

		},
		//发起调度
		toDispatchAdd(){
			let that = this;
			this.checkDataListAdd.forEach((item,index)=>{
				let query1 = {...this.formAdd};
				query1.carNo = item;
				query1.flag = 2;
				HttpReq.truckDispatching.personRecordingAdd(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.loadDataAdd();
			this.loadData();

			
			this.form.toAddVisible = false;
			this.queryAdd = {};
			this.formAdd = {};
			this.checkDataListAdd = [];
		},
		//调度状态更改
		flagChange(row){
			return row.flag == 0 ? '智能调度' : row.flag == 1 ? '人工调度' : row.flag == 2 ? '人工补录' : row.flag
		},

	}
}
</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: 550px;
		height: 250px;
		border: 1px gainsboro solid;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	.checkboxViews>div{
		display: inline-block;
		width: 24%;
		text-align: center;
	}
	.checkboxViewsAdd{
		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>
