<template>
    <div class="charge-box">
      <div class="charge-tools">
        <el-form :inline="true" :model="queryParams">
  
          <el-form-item label="车型名称:" style="margin-left: 35px;">
            <el-input placeholder="请输入车型名称" v-model.trim="queryParams.modelName" clearable></el-input>
          </el-form-item>
  
          <el-form-item label="车辆状态:" style="margin-left: 50px;">
            <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="modelImage" label="车型照片">
              <template slot-scope="{row}">
                <img :src="row.modelImage" style="height: 40px;width: 40px" @click="imgshow(row.modelImage)" class="imgborder" title="点击可放大图片" v-if="row.modelImage">
                <img src="@/assets/cartype.png" style="height: 40px;width: 40px" v-else>
              </template>
            </el-table-column>
            <el-table-column
              prop="modelCode"
              label="车牌编号">
            </el-table-column>
            <el-table-column
              prop="modelName"
              label="车型"
              >
            </el-table-column>
            <el-table-column
              prop="modelDistance"
              label="前端电池距离(CM)"
              >
            </el-table-column>
            <el-table-column
              prop="batteryHighly"
              label="电池高度(MM)"
              >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              sortable
              width="400"
              >
            </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>
      <!-- 图片预览-->
      <el-dialog :visible.sync="lookdialogVisible" :modal="false">
          <img :src="previewpic" alt=""  width="100%" />
      </el-dialog>
      <!-- 图片预览 -->
    </div>
  </template>
  
  <script>
  import { modelList } from "@/api/car";
  import '../permission.scss';
  export default {
    name: "CarTypeManage",
    components: {},
    data() {
      return {
        datalist: [],
        //查询参数
        queryParams:{
          page: 1, //当前页
          pageSize:10,//每页条数
          modelName:undefined, //车型名称
          state:undefined, //车辆状态
          orderByField:undefined, //排序字段
          orderByWays:'desc'//排序方式
        },
        total:0,//总条数，
        tableheight:0,//表格高度设置
        lookdialogVisible:false,
        previewpic:''
      };
    },
    mounted() {
      this.modelList()
      this.onLoadHeight()
      this.changeWindow()
    },
    methods: {
      /*设置初始视窗高度*/
      onLoadHeight(){
        this.$nextTick(()=>{
          this.tableheight = document.body.clientHeight - 460
        })
      },
      /*设置窗口变化高度*/
      changeWindow(){
        window.onresize = () => {
          return (() => {
            this.tableheight = document.body.clientHeight - 460
          })()
        }
      },
      //车辆列表，
      modelList(){
        const params=this.queryParams
        modelList(params).then(res=>{
          this.datalist =res.data.records
          this.total=res.data.total
        });
      },
      /**分页下一页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.modelList()
      },
      /**分页选择页数 */
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.modelList()
      },
      //搜索
      handleQuery(){
        this.modelList()
      },
      //搜索重置
      resetForm(){
        this.queryParams.modelName = undefined
        this.queryParams.state = undefined
        this.modelList()
      },
      imgshow(modelImage){
        this.lookdialogVisible =true
        this.previewpic = modelImage
      }
    },
  };
  </script>