<template>
  <div style="width: 100%;height: 100%">
    <div class="tableContent">
      <vxe-grid
        id="blakPowerData"
        border
        show-header-overflow
        show-overflow
        export-config
        highlight-hover-row
        @sort-change="sortChangeEvent"
        :toolbar="tableToolbar"
        :custom-config="{storage: true, checkMethod: checkColumnMethod}"
        :auto-resize="true"
        :header-cell-style="{background:'black',color:'white'}"
        max-height="100%"
        :cell-style="{background:'black',color:'white'}"
        align="center"
        :sort-config="{remote:'true'}"
        :loading="loading"
        :columns="tableColumn"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"></vxe-grid>
    </div>
    <div class="rtPageturning">
      <vxe-pager
        background
        :loading="loading"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="tableData.length"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
  export default {
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      queryTime: function (newQuestion, oldQuestion) {
        var queryTimeList = newQuestion.split(",")
        this.currentPage = 1
        this.startTime = Number(queryTimeList[0])
        this.endTime = Number(queryTimeList[1])
        this.windTowerInfoId = Number(queryTimeList[2])
        this.windTowerInfoName = queryTimeList[3]
        this.getTable()
      }
    },
    props: {
      queryTime: {
        type: String,
      },
      thFormat: {
        type: Array
      }
    },
    data() {
      return {
        startTime: new Date(new Date().toLocaleDateString()).getTime(),
        endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
        thLoadSign: true,
        loading: false,
        tableData: [],
        sortOrder: 'asc',
        pageSize: 10,
        currentPage: 1,
        windTowerInfoId: '',
        windTowerInfoName: '',
        tableHead: [],
        tableToolbar: {
          export: true,
          custom: true
        },
        tableColumn: [
          {
            title: '受阻电量查询',
            children: [
              {field: 'time', title: '时间', formatter: this.dateFormat, sortable: true, minWidth: "150"},
              {field: 'onSiteObstructed', title: '站内受阻', minWidth: "130"},
              {field: 'offSiteObstructed', title: '站外受阻', minWidth: "130"},
              {field: 'abandonmentRate', title: '弃电率指标', minWidth: "130"},
            ]

          },
          // { field: 'equipmentNo', title: '弃电率指标',minWidth:"130"  },
        ]
      }
    },
   created() {
      this.getTable()
   },
    methods: {
      getTable() {
        this.loading = true
        this.$emit('sendLoading', this.loading)
        this.$axios.get('/balkPower/' + this.startTime + '/' + this.endTime).then((res) => {
          this.tableData = res.data
          // // 表分页格数据总条数
          // this.total = res.data.count

          this.loading = false
          this.$emit('sendLoading', this.loading)
        }).catch((error) => {
          this.loading = false
          this.$emit('sendLoading', this.loading)
          this.$message.error('查询table出错' + error)
        })
      },
      handlePageChange({currentPage, pageSize}) {
        this.currentPage = currentPage
        this.pageSize = pageSize
        // this.getTable();
      },
      // dateFormat({ cellValue, row, column }) {
      //   return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      // },
      sortChangeEvent({column, property, order}) {
        if (order == null) {
          order = 'asc'
        }
        this.currentPage = 1
        this.sortOrder = order
        this.getTable()
      },
      checkColumnMethod({column}) {
        if (column.property === 'time') {
          return false
        }
        return true
      },
    }
  }
</script>
<style scoped>
  .tableContent {
    width: 100%;
    height: 90%;
  }

  .tableContent >>> td {
    border: 1px solid #ffffff;
  }

  .rtPageturning {
    width: 100%;
    height: 10%;
  }

  .rtPageturning >>> button,
  .rtPageturning >>> span,
  .rtPageturning >>> input,
  .rtPageturning >>> .vxe-pager--btn-wrapper li {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid #ffffff;
  }

  .rtPageturning >>> span {
    border: none
  }

  .rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {
    background-color: #9f9fa0 !important;
  }

  .tableContent >>> .vxe-button.type--button.is--circle {
    padding: 0 .5em;
    min-width: 34px;
    border-radius: 10%;
    border: none;
    background: transparent;
    color: white;
  }
</style>
