<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 v-model="queryParams.swapId" placeholder="请输入换电编号" clearable />
        </el-form-item>

        <el-form-item label="车牌号:" style="margin-left: 50px;">
          <el-input v-model="queryParams.vehiclePlate" placeholder="请输入车牌号" clearable />
        </el-form-item>

        <el-form-item label="换电时间:" style="margin-left: 50px">
          <el-date-picker
            v-model="dateArr.swapDate"
            class="times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="serch actve" @click="handleQuery">查询</el-button>
          <el-button type="primary" class="serch" @click="resetForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div class="charge-table">
      <div class="charge-table-top">
        <el-button type="primary" class="daochu" @click="swapExport">导出结果</el-button>
      </div>
      <div class="charge-table-bottom">
        <el-table
          :data="datalist"
          :header-cell-style="{
            background: '#1d283e',
            borderColor: '#2f3c86',
            height: '36px',
            lineHeight: '36px',
            color:'white',
            fontSize: '16px',
          }"
          fit
          :height="tableheight"
          style="width: 100%"
          :default-sort="{prop: 'swapId', order: 'descending'}"
        >
          <el-table-column
            prop="swapId"
            label="换电编号"
            fixed
            width="300"
          />
          <el-table-column
            prop="vehiclePlate"
            label="车牌号"
            width="120"
          />
          <el-table-column
            prop="vehicleVin"
            label="车辆识别码"
            width="150"
          />
          <el-table-column
            prop="vehicleOdo"
            label="车辆ODO(KM)"
            width="130"
          />
          <el-table-column
            prop="connTime"
            label="车站连接时间"
            width="230"
          />
          <el-table-column
            prop="driverName"
            label="换电司机"
            width="120"
          />
          <el-table-column
            prop="swapBeginTime"
            label="换电开始时间"
            width="180"
          />
          <el-table-column
            prop="swapEndTime"
            label="换电结束时间"
            width="180"
          />
          <el-table-column
            prop="swapDuration"
            label="换电时长"
            sortable
            width="120"
          />
          <el-table-column
            prop="vehicleSn"
            label="车辆电池编号"
            width="220"
          />
          <el-table-column
            prop="vehicleSoc"
            label="车辆电池SOC"
            sortable
            width="150"
          />
          <el-table-column
            prop="vehicleSoh"
            label="换电电池SOH"
            width="150"
          />
          <el-table-column
            prop="swapSn"
            label="换电电池编号"
            width="228"
          />
          <el-table-column
            prop="swapSoc"
            label="换电电池SOC"
            width="150"
          />
          <el-table-column
            prop="swapSoh"
            label="换电电池SOH"
            width="150"
          />
        </el-table>
      </div>

      <div class="pageblock">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import './permission.scss'
import { swapList, swapExport } from '@/api/records'
import serverUrl from '../../../vue.config.js'
export default {
  name: 'DirectivePermission',
  components: {},
  data() {
    return {
      // 查询时间数组
      dateArr: {
        swapDate: []
      },
      // 数据列表
      datalist: [],
      // 查询参数
      queryParams: {
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        vehiclePlate: undefined, // 车牌号
        swapId: undefined, // 换电编号
        swapBeginTime: undefined,
        swapEndTime: undefined,
        orderByField: undefined, // 排序字段
        orderByWays: 'desc'// 排序方式
      },
      total: 0, // 总条数，
      tableheight: 0// 表格高度设置
    }
  },
  watch: {
    tableheight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.heightTimer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.heightTimer = true
        setTimeout(function() {
          this.heightTimer = false
        }, 400)
      }
    }
  },
  mounted() {
    this.swapList()
    this.onLoadHeight()
    this.changeWindow()
  },
  methods: {
    /* 设置初始视窗高度*/
    onLoadHeight() {
      this.$nextTick(() => {
        this.tableheight = document.body.clientHeight - 460
      })
    },
    /* 设置窗口变化高度*/
    changeWindow() {
      window.onresize = () => {
        return (() => {
          this.tableheight = document.body.clientHeight - 460
        })()
      }
    },
    // 换电记录列表，
    swapList() {
      const params = this.queryParams
      swapList(params).then(res => {
        this.datalist = res.data.records
        this.total = res.data.total
      })
    },
    /** 分页下一页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.swapList()
    },
    /** 分页选择页数 */
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.swapList()
    },
    // 搜索
    handleQuery() {
      if (this.dateArr.swapDate.length !== 0) {
        this.queryParams.swapBeginTime = this.dateArr.swapDate[0]
        this.queryParams.swapEndTime = this.dateArr.swapDate[1]
      }
      this.swapList()
    },
    // 搜索重置
    resetForm() {
      this.queryParams.swapBeginTime = undefined
      this.queryParams.swapEndTime = undefined
      this.queryParams.swapId = undefined
      this.queryParams.vehiclePlate = undefined
      this.swapList()
    },
    // 导出结果
    swapExport() {
      this.$confirm('确认导出结果？', '导出结果', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async() => {
          const res = await swapExport(this.queryParams)
          const execlUrl=serverUrl.devServer.proxy['/api'].target+'/excel/'+res.data
          window.open(execlUrl,'_blank')
        })
      .catch(err => { console.error(err) })
    }
  }
}
</script>
