<template>
	<div>
		<el-dialog
			title="车辆信息"
			:close-on-click-modal="false"
			draggable
			width="1000px"
			append-to-body
			height="500px"
			@close="close"
			@keyup.enter.native="getDrive"
			v-model="visible">
			<div style="height: calc(100%);">
				<el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
					<!-- 搜索框-->
					<el-form-item label="车牌号" prop="driveNumber">
						<el-input v-model="searchForm.driveNumber" placeholder="请输入车牌号" clearable></el-input>
					</el-form-item>
					<el-form-item label="车辆识别号" prop="driveIdentifyNumber">
						<el-input v-model="searchForm.driveIdentifyNumber" placeholder="请输入车辆识别号" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="list()"  icon="el-icon-search">查询</el-button>
						<el-button @click="resetSearch()"  icon="el-icon-refresh-right">重置</el-button>
					</el-form-item>
				</el-form>

					<vxe-table
						border="inner"
						auto-resize
						resizable
						height="300"
						:loading="loading"
						size="small"
						ref="driveTable"
						show-header-overflow
						show-overflow
						highlight-hover-row
						:menu-config="{}"
						@sort-change="sortChangeHandle"
						:sort-config="{remote:true}"
						:data="dataList"
						:tree-config="{transform: true, rowField: 'id', parentField: 'parentId',expandAll: true}"
						:checkbox-config="{}">
						<vxe-column type="seq" width="60" title="序号"></vxe-column>
						<vxe-column type="radio" width="50"></vxe-column>
						<vxe-column min-width="200" title="车牌号" field="driveNumber"></vxe-column>
						<vxe-column min-width="200" title="车辆识别号" field="driveIdentifyNumber"></vxe-column>
					</vxe-table>


				<vxe-pager
					background
					size="small"
					:current-page="tablePage.currentPage"
					:page-size="tablePage.pageSize"
					:total="tablePage.total"
					:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
			<span slot="footer" class="dialog-footer" style="float: right">
      			<el-button size="primary" @click="close()" icon="el-icon-circle-close">关闭</el-button>
				<el-button size="primary" type="primary" v-if="method != 'view'" @click="getDrive()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
   	 		</span>
		</el-dialog>
	</div>
</template>

<script>
	import DriveInfoService from '@/api/jy/DriveInfoService'
	export default {
		data () {
			return {
				title: '',
				method: '',
				visible: false,
				loading: false,
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				dataList: [],
				searchForm: {
					driveNumber: '',
					driveIdentifyNumber: ''
				},

			}
		},
		DriveInfoService: null,
		created () {
			this.driveInfoService = new DriveInfoService()
		},
		components: {
		},
		methods: {
			init () {
				this.visible = true
				this.list()
			},
			// 表单提交
			getDrive () {
				let row = this.$refs.driveTable.getRadioRecord()
				if (this.commonJS.isEmpty(row)) {
					this.$message.error('请至少选择一条数据')
				} else {
					this.close()
					this.$emit('getDrive', row)
				}

			},
			list () {
				this.loading = true
				this.driveInfoService.list({
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm
				}).then((data) => {
					this.dataList = data.records
					this.tablePage.total = data.total
					this.loading = false
				})
			},
			// 当前页
			currentChangeHandle ({currentPage, pageSize}) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.list()
			},
			resetSearch () {
				this.$refs.searchForm.resetFields()
				this.list()
			},
			close () {
				this.$refs.searchForm.resetFields()
				this.visible = false
			}
		}
	}
</script>
<style>
	.messageZindex {
		z-index:9999 !important;
	}
</style>
