<template>
    <div class="charge-box">
      <div class="charge-tools">
        <el-form :inline="true" :model="queryParams">
  
          <el-form-item label="司机姓名:">
            <el-input placeholder="请输入司机姓名" v-model.trim="queryParams.driverName" clearable></el-input>
          </el-form-item>
  
          <el-form-item label="身份证号:">
            <el-input placeholder="请输入身份证号" v-model.trim="queryParams.driverCardNum" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号码:">
            <el-input placeholder="请输入手机号码" v-model.trim="queryParams.driverMobile" clearable></el-input>
          </el-form-item>
          <el-form-item label="车辆状态:">
            <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="date" label="头像">
              <template slot-scope="{row}">
                <img :src="row.driverImage" style="height: 36px;width: 36px" v-if="row.driverImage">
                <img src="@/assets/default.png" style="height: 36px;width: 36px" v-else>
              </template>
            </el-table-column>
            <el-table-column
              prop="driverNickName"
              label="昵称">
            </el-table-column>
            <el-table-column
              prop="driverCode"
              label="司机编号"
              >
            </el-table-column>
            <el-table-column
              prop="driverName"
              label="司机姓名"
              >
            </el-table-column>
            <el-table-column
              prop="driverMobile"
              label="手机号">
            </el-table-column>
            <el-table-column
              prop="driverCardNum"
              label="身份证号">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              sortable
              >
            </el-table-column>
            <el-table-column prop="name" 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 { driverList } from "@/api/car";
  import '../permission.scss';
  export default {
    name: "DriverManage",
    components: {},
    data() {
      return {
        datalist: [],
        //查询参数
        queryParams:{
          page: 1, //当前页
          pageSize:10,//每页条数
          driverName:undefined, //司机姓名
          driverCardNum:undefined, //身份证号
          driverMobile:undefined, //手机号
          state:undefined, //车辆状态
          orderByField:undefined, //排序字段
          orderByWays:'desc'//排序方式
        },
        total:0,//总条数，
        tableheight:0,//表格高度设置,
        defaultpng:'this.src="' + require('@/assets/default.png') + '"'
      };
    },
    mounted() {
      this.driverList()
      this.onLoadHeight()
      this.changeWindow()
    },
    methods: {
      /*设置初始视窗高度*/
      onLoadHeight(){
        this.$nextTick(()=>{
          this.tableheight = document.body.clientHeight - 460
        })
      },
      /*设置窗口变化高度*/
      changeWindow(){
        window.onresize = () => {
          return (() => {
            this.tableheight = document.body.clientHeight - 460
          })()
        }
      },
      //车辆列表，
      driverList(){
        const params=this.queryParams
        driverList(params).then(res=>{
          this.datalist =res.data.records
          this.total=res.data.total
        });
      },
      /**分页下一页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.driverList()
      },
      /**分页选择页数 */
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.driverList()
      },
      //搜索
      handleQuery(){
        this.driverList()
      },
      //搜索重置
      resetForm(){
        this.queryParams.driverName = undefined
        this.queryParams.driverCardNum = undefined
        this.queryParams.driverMobile = undefined
        this.queryParams.state = undefined
        this.driverList()
      },
    },
  };
  </script>