<template>
  <div class="chart-container">
    <div class="filter">
        <div class="startTime">
          <span class="timeText">起始时间</span>
          <el-date-picker
            v-model="startTime"
            :clearable="false"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="endTime">
          <span class="timeText">截止时间</span>
          <el-date-picker
            v-model="endTime"
            :clearable="false"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div>
          <span class="timeText">设备编号</span>
          <el-select v-model="inverterInfoId" multiple filterable  placeholder="请选择">
            <el-option
              v-for="item in inverterInfos"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="timeQuery">
          <el-button  :loading=loading  size="small"  @click="dateQuery">查询</el-button>
        </div>
      </div>
    <div class="content">
      <!--<el-tabs type="card" v-model="activeName" >-->
        <!--<el-tab-pane  label="指定逆变器" name="first">-->
          <div class="tableContent">
            <vxe-table
              id="inverterNoTable"
              ref="inTable"
              :loading="loading"
              border
              @sort-change="sortChangeEventNo"
              :auto-resize="true"
              highlight-hover-row
              :header-cell-style="styleStr"
              max-height="90%"
              :resizable="true"
              :cell-style="styleTableStr"
              align="center"
              :data="inverterStatusDataNo">
              <vxe-table-column  field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
              <vxe-table-column field="equipmentNo" title="编号" min-width="60" :formatter="nameFormat"></vxe-table-column>
              <vxe-table-column field="activePower" title="有功（KW）" min-width="60"></vxe-table-column>
              <vxe-table-column field="reactivePower" title="无功（KW）" min-width="60"></vxe-table-column>
              <vxe-table-column field="powerFactor" title="功率因数" min-width="60"></vxe-table-column>
              <vxe-table-column field="voltage" title="电压（V）" min-width="60"></vxe-table-column>
              <vxe-table-column field="electricalCurrent" title="电流（A）" min-width="60"></vxe-table-column>
              <vxe-table-column field="dayElectricQuantity" title="当日发电量（kW·h）" min-width="60"></vxe-table-column>
              <vxe-table-column field="dayGridConnectedHours" title="当日并网小时"min-width="60"></vxe-table-column>
              <vxe-table-column field="status" title="状态"min-width="60"></vxe-table-column>
            </vxe-table>
            <div class="rtPageturning">
              <div class="toolbar1">
                <vxe-toolbar ref="fstToolBar" >
                <template v-slot:buttons>
                  <vxe-button class="downloadButton" style="border:none;"   @click="exportDataEvent"><i class="vxe-icon--download" ></i></vxe-button>
                </template>
              </vxe-toolbar></div>
              <vxe-pager
                background
                :loading="loading"
                :current-page.sync="currentPageNo"
                :page-size.sync="pageSizeNo"
                :total="totalNo"
                @page-change="handlePageChangeNo"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="所有逆变器" name="second">-->
          <!--<div class="tableContent">-->
            <!--<vxe-table-->
              <!--id="inverterAllTable"-->
              <!--ref="iaTable"-->
              <!--border-->
              <!--:loading="loading"-->
              <!--export-config-->
              <!--@sort-change="sortChangeEventAll"-->
              <!--:sync-resize="startTime"-->
              <!--:auto-resize="true"-->
              <!--:sort-config="{remote:'true'}"-->
              <!--highlight-hover-row-->
              <!--:header-cell-style="{background:'black',color:'white',border:'white'}"-->
              <!--max-height="90%"-->
              <!--:resizable="true"-->
              <!--:cell-style="{background:'black',color:'white'}"-->
              <!--align="center"-->
              <!--:data="inverterStatusDataAll">-->
              <!--<vxe-table-column  field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>-->
              <!--<vxe-table-column field="equipmentNo" title="编号" min-width="60" sortable></vxe-table-column>-->
              <!--<vxe-table-column field="activePower" title="有功（KW）" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="reactivePower" title="无功（KW）" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="powerFactor" title="功率因数" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="voltage" title="电压（V）" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="electricalCurrent" title="电流（A）" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="dayElectricQuantity" title="当日发电量（kW·h）" min-width="60"></vxe-table-column>-->
              <!--<vxe-table-column field="dayGridConnectedHours" title="当日并网小时"min-width="60"></vxe-table-column>-->
            <!--</vxe-table>-->
            <!--<div class="rtPageturning">-->
              <!--<vxe-toolbar ref="inverterAllToolbar" export></vxe-toolbar>-->
              <!--<vxe-pager-->
                <!--:loading="loading"-->
                <!--background-->
                <!--:current-page.sync="currentPageAll"-->
                <!--:page-size.sync="pageSizeAll"-->
                <!--:total="totalAll"-->
                <!--@page-change="handlePageChangeAll"-->
                <!--:layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">-->
              <!--</vxe-pager>-->
            <!--</div>-->
          <!--</div>-->
        <!--</el-tab-pane>-->
      <!--</el-tabs>-->
    </div>
  </div>
</template>

<script>

  export default {
    name: 'inverterTable',
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        loading:false,
        queryStartTime:"",
        queryEndTime:"",
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
        inverterInfoId:[],
        inverterInfos:[],
        inverterStatusDataNo:[],
        inverterStatusDataAll:[],
        activeName: 'first',
        totalNo:0,
        pageSizeNo: 10,
        currentPageNo: 1,
        sortOrderNo:'asc',
        totalAll:0,
        pageSizeAll: 10,
        currentPageAll: 1,
        sortOrderTime:'asc',
        sortOrderNumber:'asc',


      }
    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.inTable.connect(this.$refs.inverterToolbar)
        // this.$refs.iaTable.connect(this.$refs.inverterAllToolbar)
      })
    },
    mounted(){
      this.queryInverterInfo()
    },
    methods:{
      queryInverterInfo() {
        this.loading = true
        this.$axios.get('/inverterInfos').then((res) => {
          if (res.data != null && res.data.length > 0) {
            this.inverterInfos = res.data
            // console.log(this.inverterInfos)
            this.inverterInfoId.push(this.inverterInfos[0].id)
            this.queryStartTime = this.startTime
            this.queryEndTime = this.endTime
            this.queryInverterDataNo()
            // this.queryInverterDataAll()
          } else {
            this.loading = false
            this.$message.warning("没有逆变器设备信息")
          }
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询逆变器设备信息出错' + error)
        })
      },

      queryInverterDataNo(){
        this.loading=true
        this.$axios.get('/inverterStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPageNo+'/'+this.pageSizeNo+'/'+this.inverterInfoId+'?timeSortOrder='+this.sortOrderTime+'&noSortOrder='+this.sortOrderNumber).then((res) => {
          this.inverterStatusDataNo = res.data.content
          // 表分页格数据总条数
          this.totalNo = res.data.count
          this.loading=false
        }).catch((error) => {
          this.loading=false
          this.$message.error('查询逆变器根据number出错' + error)
        })
      },
      // queryInverterDataAll(){
      //   this.loading=true
      //   this.$axios.get('/inverterStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPageAll+'/'+this.pageSizeAll+'?timeSortOrder='+this.sortOrderTime+'&noSortOrder='+this.sortOrderNumber).then((res) => {
      //     this.inverterStatusDataAll = res.data.content
      //     // 表分页格数据总条数
      //     this.totalAll = res.data.count
      //     this.loading=false
      //   }).catch((error) => {
      //     this.loading=false
      //     this.$message.error('查询所有逆变器错' + error)
      //   })
      // },
      dateQuery(){
        this.loading=true
        if(this.endTime<=this.startTime){
          this.$message.error("开始时间不能大于结束时间")
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.loading=false
          return
        }
        if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*31){
          this.startTime = this.queryStartTime
          this.endTime = this.queryEndTime
          this.$message.error("只能最多查询31天的数据哦")
          this.loading = false
          return
        }
        if(this.windTurbineInfoId=="") {
          this.$message.error("设备选项不能为空")
          this.loading=false
          return
        }

        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.currentPageNo = 1
        this.queryInverterDataNo()
        this.currentPageAll = 1
        // this.queryInverterDataAll()
      },
      sortChangeEventNo ({ column, property, order }) {
        if(order == null){
          order = 'asc'
        }
        this.currentPageNo = 1
        this.sortOrderNo = order
        this.queryInverterDataNo()
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
      },
      sortChangeEventAll ({ column, property, order }) {
        if(order == null){
          order = 'asc'
        }

        if(property == 'time'){
          this.sortOrderTime = order
        }

        if(property == 'equipmentNo'){
          this.sortOrderNumber = order
        }
        this.currentPageAll = 1
        // this.queryInverterDataAll()
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
      },
      checkColumnMethod ({ column }) {
        if (column.property === 'time') {
          return false
        }
        return true
      },
      dateFormat({ cellValue, row, column }) {
        const date = new Date(cellValue) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + '-'
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '    '
        const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
        const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
        const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
        return Y + M + D + H + m + s
      },
      nameFormat({ cellValue, row, column }) {
        var name ='未知设备'
        for(let index in this.inverterInfos) {
          if(cellValue == this.inverterInfos[index].id){
            name = this.inverterInfos[index].name
          }
        };
        return name
      },
      handlePageChangeNo ({ currentPage, pageSize }) {
        this.currentPageNo = currentPage
        this.pageSizeNo = pageSize
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.queryInverterDataNo();
      },
      handlePageChangeAll({ currentPage, pageSize }){
        this.currentPageAll = currentPage
        this.pageSizeAll = pageSize
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        // this.queryInverterDataAll();
      },
      exportDataEvent() {
        this.loading = true
        this.$axios.get('/export/inverterStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.inverterInfoId, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
    }
  }
</script>

<style scoped>

  /*.chart-container{*/
    /*position:relative;*/
    /*width:100%;*/
    /*height:calc(100vh - 50px);*/
  /*}*/

  /*.filter{*/
    /*position:relative;*/
    /*display:flex;*/
    /*padding:20px 0 10px 15px;*/
    /*font-size:12px;*/
    /*line-height:11px;*/
    /*color:white;*/
    /*width: 100%;*/
    /*background-color: transparent;*/
    /*height: 10%;*/
  /*}*/

  /*input{*/
    /*background:transparent;*/
    /*border:none;*/
    /*color:white;*/
  /*}*/

  /*.timeText{*/
    /*opacity:0.69;*/
    /*padding-right:7px;*/
    /*font-size:14px;*/
  /*}*/

  /*.startTime{*/
    /*display:inline-block;*/
  /*}*/

  /*.endTime{*/
    /*display:inline-block;*/
    /*padding-left:42px;*/
  /*}*/


  /*.timeQuery{*/
    /*margin-left: 2%;*/
    /*!*background:transparent;*!*/
  /*}*/

  /*.el-button{*/
    /*background:transparent;*/
    /*color:white;*/
  /*}*/

  /*.filter >>> input{*/
    /*background:transparent;*/
    /*border:none;*/
    /*color:white;*/
  /*}*/

  .rtPageturning{
    /*width: 100%;*/
    /*height: 10%;*/
    display: flex;
    justify-content:space-between
  }
  /*.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{*/
    /*width: 100%;*/
    /*height:calc(80vh - 50px);*/
  /*}*/
  /*.tableContent >>> td{*/
    /*border:1px solid #ffffff;*/
  /*}*/
/*.content{*/
  /*width: 100%;*/
  /*background-color: transparent;*/
  /*height: 90%;*/
  /*padding-left: 5px;*/
  /*padding-right: 5px;*/
/*}*/
  /*.content >>> .el-tabs__item{*/
    /*color: white;*/
  /*}*/
  /*.content >>> .el-tabs__item.is-active {*/
    /*color: #409EFF;*/
  /*}*/

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

