<template>
	<div class="page">
		<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="refreshList()"  icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()"  icon="el-icon-refresh-right">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="jp-table" style="">
			<vxe-toolbar ref="toolbarRef"  :refresh="{query: refreshList}" export custom>
				<template #buttons>
					<el-button  type="primary"  icon="el-icon-plus" @click="add()">新建</el-button>
<!--					<el-button  type="danger"   icon="el-icon-delete" @click="del()" :disabled="$refs.typeDictTable && $refs.typeDictTable.getCheckboxRecords().length === 0" plain>删除</el-button>-->
				</template>
			</vxe-toolbar>
			<div class="jp-table-body">
				<vxe-table
					border="inner"
					auto-resize
					resizable
					height="auto"
					:loading="loading"
					size="small"
					ref="driveInfoTable"
					show-header-overflow
					show-overflow
					highlight-hover-row
					:menu-config="{}"
					:export-config="{
									remote: true,
									filename: `嘉溢车辆信息数据${moment(new Date()).format('YYYY-MM-DD')}`,
									sheetName: `嘉溢车辆信息数据${moment(new Date()).format('YYYY-MM-DD')}`,
									exportMethod: exportMethod,
									types: ['xls'],
									modes: ['current', 'selected', 'all']
								  }"
					@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 min-width="350" title="车牌号" field="driveNumber"></vxe-column>
					<vxe-column min-width="350" title="车辆识别号" field="driveIdentifyNumber"></vxe-column>
					<vxe-column title="操作" width="230px" fixed="right" align="center">
						<template  #default="scope">
							<el-button text type="primary" size="small"    @click="edit(scope.row.id)">修改</el-button>
							<el-button text type="primary" size="small"    @click="del(scope.row.id)">删除</el-button>
						</template>
					</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>
		</div>
		<DriveInfoAddForm  ref="driveInfoAddForm" @refreshDataList="refreshList"></DriveInfoAddForm>
	</div>
</template>

<script>
	import DriveInfoService from '@/api/jy/DriveInfoService'
	import DriveInfoAddForm from './DriveInfoAddForm'
	export default {
		data () {
			return {
				searchForm: {
					driveNumber: '',
					driveIdentifyNumber: ''
				},
				dataList: [],
				tablePage: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					orders: []
				},
				loading: false
			}
		},
		DriveInfoService: null,
		created () {
			this.driveInfoService = new DriveInfoService()
		},
		components: {
			DriveInfoAddForm
		},
		mounted () {
			this.$nextTick(() => {
				// 将表格和工具栏进行关联
				const $table = this.$refs.driveInfoTable;
				const $toolbar = this.$refs.toolbarRef;
				$table.connect($toolbar);
			});
			this.refreshList()
		},
		methods: {
			// 新增
			add () {
				this.$refs.driveInfoAddForm.init('add', '')
			},
			// 修改
			edit (id) {
				id = id || this.$refs.typeDictTable.getCheckboxRecords().map(item => {
					return item.id
				})[0]
				this.$refs.driveInfoAddForm.init('edit', id)
			},
			// 查看
			view (id) {
				this.$refs.driveInfoAddForm.init('view', id)
			},
			// 获取数据列表
			refreshList () {
				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
					this.$nextTick(() => {
						this.$refs.typeDictTable.setAllTreeExpand(true)
					})
				})
			},
			// 当前页
			currentChangeHandle ({ currentPage, pageSize }) {
				this.tablePage.currentPage = currentPage
				this.tablePage.pageSize = pageSize
				this.refreshList()
			},
			// 排序
			sortChangeHandle (column) {
				this.tablePage.orders = []
				if (column.order != null) {
					this.tablePage.orders.push({column: this.$utils.toLine(column.property), asc: column.order === 'asc'})
				}
				this.refreshList()
			},
			// 删除
			del (id) {
				let ids = id || this.$refs.typeDictTable.getCheckboxRecords().map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.driveInfoService.delete(ids).then((data) => {
						this.$message.success(data)
						this.refreshList()
						this.loading = false
					})
				})
			},
			resetSearch () {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			},
			// 自定义服务端导出
			exportMethod ({ options }) {
				// 传给服务端的参数
				const params = {
					'current': this.tablePage.currentPage,
					'size': this.tablePage.pageSize,
					'orders': this.tablePage.orders,
					...this.searchForm,
					filename: options.filename,
					sheetName: options.sheetName,
					isHeader: options.isHeader,
					original: options.original,
					mode: options.mode,
					selectIds: options.mode === 'selected' ? options.map(item => item.id) : [],
					exportFields: options.columns.map(column => column.property)
				}
				return this.driveInfoService.exportFile(params).then((res) => {
					// 将二进制流文件写入excel表，以下为重要步骤
					this.$utils.downloadExcel(res, options.filename+ ".xls")
				}).catch(function (err) {
					if (err.response) {
						console.log(err.response)
					}
				})
			},
		}
	}
</script>
