<template>
  <div class="charge-box">
    <div class="charge-tools">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="充电机ID：">
          <el-select v-model="queryParams.chargerId" clearable placeholder="请选择">
            <el-option v-for="item in chargerArr" :key="item.value" :label="item + '号充电机'" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="电池编号:">
          <el-input v-model.trim="queryParams.chgSn" placeholder="请输入电池编号" clearable />
        </el-form-item>

        <el-form-item label="充电时间:">
          <el-date-picker v-model="dateArr.chargerDate" class="times" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </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" style="color: white;">

        <el-button type="primary" class="daochu" @click="chargeExport">导出结果</el-button>
      </div>
      <div class="charge-table-bottom">
        <el-table :data="datalist" :header-cell-style="{
          background: '#1d283e',
          borderColor: '#2f3c86',
          color: 'white',
        }" stripe fit :height="tableheight" style="width: 100%">
          <el-table-column prop="chargerId" label="充电机ID" fixed width="120" />
          <el-table-column prop="chgId" label="充电流水号" width="270" />
          <el-table-column prop="chgSn" label="电池编号" width="180" />
          <el-table-column prop="chgBeginTime" label="充电开始时间" width="180" />
          <el-table-column prop="chgEndTime" label="充电结束时间" width="180" />
          <el-table-column prop="chgDuration" label="充电时长(秒)" sortable width="160" />
          <el-table-column prop="chgBeginSoc" label="开始SOC(%)" width="150" />
          <el-table-column prop="chgEndSoc" label="结束SOC" width="150" />
          <el-table-column prop="chgCapacity" label="充电量" sortable width="120" />
          <el-table-column prop="chgBeginAmmeter" label="充电前电表数" width="160" />
          <el-table-column prop="chgEndAmmeter" label="充电后电表数" width="160" />
          <el-table-column prop="chgEndReason" label="充电结束原因" width="160" />
          <el-table-column prop="chgAccumCapacity" label="累计充电量" sortable width="160" />
          <el-table-column label="时段明细" width="100" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" class="handle" size="small" @click="chargeShow(scope.row.interval)">明细</el-button>
            </template>
          </el-table-column>
        </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 class="rolemanage chargeshow">
      <el-dialog title="充电明细" :visible.sync="dialogChargeVisible" :destroy-on-close="true">
        <div class="charge-table-bottom">
          <el-table :data="chargeShowList" :header-cell-style="{
            background: '#1d283e',
            borderColor: '#2f3c86',
            color: 'white',
          }" stripe fit :height="tableheight - 80" style="width: 100%">
            <el-table-column prop="index" label="序号" />
            <el-table-column prop="startTime" label="开始时间段" />
            <el-table-column prop="endTime" label="结束时间段" />
            <el-table-column prop="chargePower" label="充电量kWh" />
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer" />
      </el-dialog>
    </div>
    <!--时段明细弹窗结束-->
  </div>
</template>

<script>
import './permission.scss'
import { chargeList, chargeExport, getChargeCode, RecordFile } from '@/api/records'
export default {
  name: 'PagePermission',
  components: {},
  data() {
    return {
      // 查询时间数组
      dateArr: {
        chargerDate: []
      },
      // 充电机ID下拉列表
      chargerArr: null,
      // 数据列表
      datalist: [],
      // 查询参数
      queryParams: {
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        chargerId: undefined, // 充电机ID
        chgSn: undefined, // 电池编号
        chgBeginTime: undefined,
        chgEndTime: undefined,
        orderByField: undefined, // 排序字段
        orderByWays: 'desc'// 排序方式
      },
      total: 0, // 总条数，
      tableheight: 0, // 表格高度设置
      dialogChargeVisible: false, // 弹窗显示
      chargeShowList: []// 充电机明细弹窗列表
    }
  },
  mounted() {
    this.chargeList()
    this.getChargeCode()
    this.onLoadHeight()//设置初始视窗高度
    this.changeWindow()//设置窗口变化高度
  },
  methods: {    
    // 充电明细弹窗显示
    chargeShow(list) {
      this.dialogChargeVisible = true
      this.chargeShowList = list
    },
    // 获取充电机ID
    getChargeCode() {
      getChargeCode().then(res => {
        this.chargerArr = res.data
      })
    },
    // 充电记录列表，
    chargeList() {
      const params = this.queryParams
      chargeList(params).then(res => {
        this.datalist = res.data.records
        this.total = res.data.total
      })
    },
    /** 分页下一页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.chargeList()
    },
    /** 分页选择页数 */
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.chargeList()
    },
    // 搜索
    handleQuery() {
      if (this.dateArr.chargerDate?.length !== 0 &&this.dateArr.chargerDate) {
        this.queryParams.chgBeginTime = this.dateArr.chargerDate[0]+' '+'00:00:00'
        this.queryParams.chgEndTime = this.dateArr.chargerDate[1]+' '+'23:59:59'
      }else{
        this.queryParams.chgBeginTime=undefined
        this.queryParams.chgEndTime=undefined
      }
      this.chargeList()
    },
    // 搜索重置
    resetForm() {
      this.queryParams.chgBeginTime = undefined
      this.queryParams.chgEndTime = undefined
      this.queryParams.chargerId = undefined
      this.queryParams.chgSn = undefined
      this.dateArr.chargerDate=[]
      this.chargeList()
    },
    // 导出结果
    chargeExport() {
      this.$confirm('确认导出结果？', '导出结果', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await chargeExport(this.queryParams)
          // const execlUrl=process.env.VUE_APP_BASE_API+'/excel/'+res.data
          // window.open(execlUrl,'_blank')
          const execlUrl = process.env.VUE_APP_BASE_API + '/excel/' + res.data
          const resUrl = await RecordFile(execlUrl, res.data)
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>
