<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.name" clearable size="small" placeholder="请输入车辆名称" style="width:180px;"/>

				<label class="el-form-item-label" style="font-weight: 500;">派单名称</label>
				<el-input v-model="query.names" clearable size="small" placeholder="请输入派单名称" style="width:180px;"/>

				<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"></div>
						<div class="content">
							<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
								<el-table-column prop="id" label="单号" align="center"></el-table-column>
								<el-table-column prop="name" label="车辆名称" align="center"></el-table-column>
								<el-table-column prop="names" label="派单名称" align="center"></el-table-column>
								<el-table-column prop="zero" label="起点" align="center"></el-table-column>
								<el-table-column prop="end" label="终点" align="center"></el-table-column>
								<el-table-column prop="space" label="里程(Km)" align="center"></el-table-column>
								<el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
								<el-table-column prop="endTime" label="完成时间" align="center"></el-table-column>
								<el-table-column prop="status" label="状态" align="center" :formatter="statusChange"></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>

	</div>
</template>

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

export default {
	name: 'IntelligentDispatch',
	components: {},
	data() {
		return {
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			query:{},
			tableData: [],
			selectList:[],
			form: {
				title:'新增设备',
				visible:false,
				reqType:'add',
				status:{cu:0},
				item:{},
			},
			rules: {
				// number: [
				// 	{required: true, message: '请输入车牌号', trigger: 'blur' }
				// ],
			},
		}
	},
	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.IntelligentDispatchHistoryQuery(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()
		},
		//状态转换
		statusChange(row){
			return row.status == 0 ? '完成' : '进行中';
		}
	}
}
</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;}
			}
		}
	}
	
	.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>
