<template>
    <div class="charge-box">
      <div class="charge-tools">
        <el-form :inline="true" :model="queryParams">
  
          <el-form-item label="车牌号:" style="margin-left: 25px;">
            <el-input placeholder="请输入车牌号" v-model.trim="queryParams.vehiclePlate" clearable></el-input>
          </el-form-item>
  
          <el-form-item label="车型:" style="margin-left: 20px;">
            <el-select v-model="queryParams.modelId" clearable placeholder="请选择车型">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="司机姓名:" style="margin-left: 20px;">
            <el-input placeholder="请输入司机姓名" v-model.trim="queryParams.driverName" clearable></el-input>
          </el-form-item>
          <el-form-item label="车辆状态:" style="margin-left: 20px;">
            <el-select v-model="queryParams.state" clearable placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery" class="serch actve">查询</el-button>
            <el-button type="primary" @click="resetForm" class="serch">重置</el-button>
          </el-form-item>
  
        </el-form>
      </div>
      <div class="charge-table">
        <div class="charge-table-bottom">
          <el-table
            :data="datalist"
            :header-cell-style="{
              background: '#1d283e',
              borderColor: '#2f3c86',
              height: '36px',
              lineHeight: '36px',
              color:'white',
              fontSize: '16px',
            }"
            stripe
            fit
            :height="tableheight"
            style="width: 100%"
            :default-sort = "{prop: 'id', order: 'descending'}"
            >
            <el-table-column
              prop="driver"
              label="关联司机/手机号">
            </el-table-column>
            <el-table-column
              prop="vehiclePlate"
              label="车牌号"
              >
            </el-table-column>
            <el-table-column
              prop="vehicleVin"
              label="车辆识别码"
              >
            </el-table-column>
            <el-table-column
              prop="modelName"
              label="车型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              sortable
              >
            </el-table-column>
            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="{row}">
                  <el-badge is-dot class="item" :class="{disable:row.state === 0}">{{row.state === 0 ? '停用' : '启用'}}</el-badge>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div class="pageblock">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { vehicleList } from "@/api/car";
  import '../permission.scss';
  export default {
    name: "CarManage",
    components: {},
    data() {
      return {
        options: [
        {
          value: "01号",
          label: "01号",
        },
        {
          value: "02号",
          label: "02号",
        },
        {
          value: "03号",
          label: "03号",
        },
        {
          value: "04号",
          label: "04号",
        },
        {
          value: "05号",
          label: "05号",
        },
        ],
        datalist: [],
        //查询参数
        queryParams:{
          page: 1, //当前页
          pageSize:10,//每页条数
          vehiclePlate:undefined, //车牌号
          modelId:undefined, //车型ID
          driverName:undefined, //司机姓名
          state:undefined, //车辆状态
          orderByField:undefined, //排序字段
          orderByWays:'desc'//排序方式
        },
        total:0,//总条数，
        tableheight:0,//表格高度设置
      };
    },
    mounted() {
      this.vehicleList()
      this.onLoadHeight()
      this.changeWindow()
    },
    methods: {
      /*设置初始视窗高度*/
      onLoadHeight(){
        this.$nextTick(()=>{
          this.tableheight = document.body.clientHeight - 460
        })
      },
      /*设置窗口变化高度*/
      changeWindow(){
        window.onresize = () => {
          return (() => {
            this.tableheight = document.body.clientHeight - 460
          })()
        }
      },
      //车辆列表，
      vehicleList(){
        const params=this.queryParams
        vehicleList(params).then(res=>{
          this.datalist =res.data.records
          this.total=res.data.total
        });
      },
      /**分页下一页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.alarmList()
      },
      /**分页选择页数 */
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.alarmList()
      },
      //搜索
      handleQuery(){
        this.vehicleList()
      },
      //搜索重置
      resetForm(){
        this.queryParams.vehiclePlate = undefined
        this.queryParams.state = undefined
        this.queryParams.modelId = undefined
        this.queryParams.driverName = undefined
        this.vehicleList()
      },
    },
  };
  </script>