
<template>
  <div style="width:100%" v-loading="loading">
    <!--    搜索栏-->
    <el-form :inline="true" class="select-container">
      <el-form-item label="时间选择">
        <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :picker-options="pickerOptions"
            :default-value="defaultDateRange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table
          class="common-table"
          :data="tableData"
          stripe
          style="width: 100%;margin-top:25px;">
<!--        汇总列-->
          <el-table-column label="汇总">
            <el-table-column
              prop="dataTime"
              label="日期"
              width="120">
            </el-table-column>
          </el-table-column>
<!--充电量列-->
          <el-table-column  label="充电价格" align="center">
            <el-table-column
              align="center"
              prop="activePeakKwh"
              label="尖">
            </el-table-column>
            <el-table-column
              align="center"
              prop="activeHighKwh"
              label="峰">
            </el-table-column>
            <el-table-column
                align="center"
              prop="activeFlatKwh"
              label="平">
            </el-table-column>
            <el-table-column
                align="center"
              prop="activeValleyKwh"
              label="谷">
            </el-table-column>
            <el-table-column
                align="center"
              prop="activeTotalKwh"
              label="总">
            </el-table-column>
          </el-table-column>
        <!--充电量列-->
          <el-table-column  label="放电价格" align="center">
            <el-table-column
                align="center"
              prop="reActivePeakKwh"
              label="尖">
            </el-table-column>
            <el-table-column
                align="center"
              prop="reActiveHighKwh"
              label="峰">
            </el-table-column>
            <el-table-column
                align="center"
              prop="reActiveFlatKwh"
              label="平">
            </el-table-column>
            <el-table-column
                align="center"
              prop="reActiveValleyKwh"
              label="谷">
            </el-table-column>
            <el-table-column
                align="center"
              prop="reActiveTotalKwh"
              label="总">
            </el-table-column>
          </el-table-column>
<!--        效率-->
<!--          <el-table-column label="效率(%)" align="center">-->
<!--            <el-table-column-->
<!--                align="center"-->
<!--              prop="effect">-->
<!--            </el-table-column>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
            v-show="tableData.length>0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            style="margin-top:15px;text-align: center"
        >
        </el-pagination>
  </div>
</template>


<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterData} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
export default {
  name:'DzjkTjbbSybb',
  mixins: [getQuerySiteId],
  data() {
    return {
      loading:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDateRange:[],//默认展示的时间
      dateRange:[],
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 重置
    onReset(){
      this.dateRange=this.defaultDateRange
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
    // 获取数据
    getData(){
      this.loading=true
      const {siteId,pageNum,pageSize} =this
      const [startTime='',endTime='']=(this.dateRange || [])
      getAmmeterData({siteId:siteId,startTime,endTime,pageSize,pageNum}).then(response=>{
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(()=> {
        this.loading = false
      })
    },
    init(){
      this.dateRange=[]
      this.tableData=[]
      this.totalSize=0
      this.pageSize=10
      this.pageNum = 1
      const now = new Date().getTime();
      const lastMonth = new Date(now-30 * 24 * 60 * 60 * 1000).getTime();
      this.defaultDateRange = [formatDate(lastMonth), formatDate(now)];
      this.dateRange=[formatDate(lastMonth), formatDate(now)];
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep{
  .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
    border-bottom: 1px solid #dfe6ec;
  }
}

</style>
