<template>
  <div class="app-container">
    <el-form :inline="true" size="small" class="dark-el-input dark-el-button">
      <el-form-item label="时间">
        <el-date-picker
          :clearable="false"
          v-model="dateTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          popper-class="cpp-popper"
        />
      </el-form-item>
      <el-form-item label="场站名称">
        <el-select v-model="stationCode" placeholder="请选择" style="width: 255px" popper-class="cpp-popper" clearable @change="changStationCode">
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search"
                   @click="queryByStationCode">查询
        </el-button>
      </el-form-item>
    </el-form>
    <div style="padding-top: 10px">
      <vxe-table
        ref="xTable"
        align="center"
        class="mytable-style"
        auto-resize
        border
        resizable
        export-config
        highlight-current-row
        show-overflow
        max-height="700"
        :loading="loading"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      >
        <vxe-table-column field="stationCode" title="场站名称" :formatter="codeChangeName"></vxe-table-column>
        <vxe-table-column field="time" title="日期"></vxe-table-column>
        <vxe-table-column field="timeSlot" title="限电时间段"></vxe-table-column>
        <vxe-table-column field="duration" title="限电时长（h）"></vxe-table-column>
        <vxe-table-column field="totalPowerLimit" title="总限电量（MWh)"></vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        :loading="loading"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>


<script>
export default {
  name: 'electricityRestriction',
  data() {
    return {
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1],
      title: "",
      total: 0,
      pageSize: 10,
      currentPage: 1,
      stationList: [],
      stationCode: null,
      stationName: undefined,
      tableData: [],
      loading: false,
      electricFieldTypeEnum: '',
    }
  },
  created() {
    this.queryByStationCode()
    this.getStationCode()
  },
  mounted() {
  },
  computed: {},
  methods: {
    changStationCode(){
      this.getElectricFieldTypeEnum()
    },
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      if (this.pageSize != pageSize) {
        this.changePageSize(pageSize)
      }
      this.pageSize = pageSize
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
      })
    },
    queryByStationCode() {
      this.loading = true
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      if (endTime <= startTime) {
        this.$message.warning("开始时间不能大于结束时间")
        return
      }
      const param = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }
      this.$axios.get('/electricityRestriction/getData', {params: param}).then(response => {
        this.tableData = response.data
        this.total = this.tableData.length
        this.loading = false
      })
    },
    codeChangeName(row) {
      var codeList = this.stationList
      for (let i = 0; i < codeList.length; i++) {
        if (row.cellValue == codeList[i].value) {
          return codeList[i].label
        }
      }
    },
  }
}
</script>

<style scoped>
</style>
