<template>
  <div class="app-container">
    <!-- 搜索 -->
    <SearchBlock v-model="query" :menus="queryOption" @change="queryTable"></SearchBlock>
    <!-- 表格 -->
    <el-table
      ref="table"
      tooltip-effect="dark"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      highlight-current-row
      border
      @sort-change="sortChange"
      :default-sort="sort"
      @row-click="handleRowClick"
    >
      <el-table-column label="车辆编号" align="center" prop="vehicleNumber" sortable='custom' show-overflow-tooltip min-width='120' />
      <el-table-column label="车牌号" align="center" prop="vehicleNo" show-overflow-tooltip min-width='120' />
    </el-table>
    <!-- 表格页脚 -->
    <el-pagination style="float: right;margin-top: 10px;margin-bottom: 10px;" layout="prev, pager, next, jumper" :total="total" small
      hide-on-single-page :current-page.sync="page.pageNum" :page-size.sync="page.pageSize"
      @current-change="getTableList" />
  </div>
</template>

<script>
import TableMixin from "@/mixins/table-mixin";
import { pageListVehicle, delVehicle } from "@/api/gangkou/vehicle/vehicle";

export default {
  mixins: [TableMixin],
  data() {
    return {
      queryOption: [
        {
          label: '车牌号', 
          prop: 'vehicleNo',
          type: 'text',
          default: '',
        },
        {
          label: '车辆编号', 
          prop: 'vehicleNumber',
          type: 'text',
          default: '',
        },
      ]
    };
  },
  methods: {
    mx_pageInfo() {
      return {
        title: '车辆档案',
        exportUrl: '',
        pageListApi: pageListVehicle,
        deleteApi: delVehicle,
        query: {},
      };
    },
    handleRowClick(row) {
      this.$emit('rowClick', row);
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  width: 400px;
}
</style>

