<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 class="timeQuery">
        <el-button  size="small" :loading="loading"  @click="dateQuery">查询</el-button>
      </div>
      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="fstToolBar" custom >
        <template v-slot:buttons>
          <vxe-button style="background:transparent;border:none"  @click="exportDataEvent"><i class="vxe-icon--download" style="color: white"></i></vxe-button>
        </template>
      </vxe-toolbar></div>
    </div>

    <div class="content">
      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
        <el-tab-pane label="图表" name="first">
          <chart :drawData = this.drawData :resizeKey=this.resizeKey  />
        </el-tab-pane>
        <el-tab-pane label="表格" name="second">
          <div class="tableContent">
            <vxe-table
              id="fstTable"
              ref="fstRef"
              border
              export-config
              beforeExportMethod=""
              :loading="loading"
              @sort-change="sortChangeEvent"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              :auto-resize="true"
              highlight-hover-row
              :header-cell-style="{background:'black',color:'white',border:'white'}"
              max-height="90%"
              :cell-style="{background:'black',color:'white'}"
              align="center"
              :data="tableData">
              <vxe-table-column  field="forecastTime" title="预测时间" :formatter="dateFormat" sortable minWidth="150" width="180"></vxe-table-column>
<!--              <vxe-table-column field="genDate" title="生成时间" min-width="60" :formatter="dateMoment"></vxe-table-column>-->
              <vxe-table-column field="fpValue" title="预测功率"></vxe-table-column>
<!--              <vxe-table-column field="predictionModelEnum" title="预测模型" min-width="60" :formatter="enumToWord"></vxe-table-column>-->
            </vxe-table>
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>
            </div>
          </div>
          <!-- <Table height="100%" width="100%" :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></Table>-->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Chart from './charts'
  import resize from '../../../components/Charts/mixins/resize'
  import moment from "moment";
  export default {
    name: 'nwp',
    components: { Chart},
    mixins: [resize],
    data(){
      return{
        chart: null,
        queryStartTime:'',
        queryEndTime:'',
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
        loading:true,
        drawLoading:true,
        tableLoading:true,
        resizeKey:1,
        activeName: 'first',
        drawData:{datas:[],times:[]},
        tableData:[],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        showToolBar:false,
        /*menuKey:1,
        isRenderingTime : new Date().getTime()*/

      }
    },
    created () {
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.fstRef.connect(this.$refs.fstToolBar)
      })
    },
    mounted() {
      this.getPageSize()


    },
    methods:{
        exportDataEvent() {
          this.loading = true
          const params = new URLSearchParams()
          params.append('startTime', this.queryStartTime)
          params.append('endTime', this.queryEndTime)
          params.append('eqId', this.equipmentId)
          this.$axios.get('/exportFile/exportForecastPowerShortTerm/'+this.queryStartTime+"/"+this.queryEndTime, {
            responseType: 'blob'// 用于解决中文乱码
          }).then((response) => {
            this.loading = false
          }).catch((error) => {
            this.loading = false
            this.$message.error('导出失败' + error)
          })
        },

      getPageSize(){
        this.$axios.get('displayConfig/pageSize').then((res) => {
          this.displayConfigPageSize = res.data
          this.pageSize = parseInt(this.displayConfigPageSize.showCode)
          // this.$message.success('PageSize获取成功' )
          this.init()
        }).catch((error) => {
          this.$message.error('PageSize获取出错' + error)
        })

      },
      init(){
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.loading = true
        this.getDraw(this.queryStartTime,this.queryEndTime)
        this.getTable()

      },
      getDraw(startTime,endTime){
        this.drawLoading = true
        this.$axios.get('/forecastPowerShortTerm/'+startTime+'/'+endTime).then((res) => {
          this.drawData = res.data
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.$message.error('查询实时预测短期echarts出错' + error)
        })
      },
      getTable(){
        this.tableLoading = true
        this.$axios.get('/forecastPowerShortTerm/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPage+'/'+this.pageSize+'?sortOrder='+this.sortOrder).then((res) => {
          this.tableData = res.data.content
          // 表分页格数据总条数
          this.total = res.data.count
          this.tableLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          this.tableLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.$message.error('查询table出错' + error)
        })

      },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        if(this.pageSize!=pageSize){
          this.changePageSize(pageSize)
        }
        this.pageSize = pageSize
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
        this.loading = true
        this.getTable();
      },
      changePageSize(pageSize){
        this.displayConfigPageSize.showCode = pageSize
        this.$axios.post('displayConfig/',this.displayConfigPageSize).then((res) => {
          this.displayConfigPageSize = res.data
          // this.$message.success('PageSize设置成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('PageSize设置出错' + error)
        })
      },
      dateFormat({ cellValue, row, column }) {
        return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      },
      enumToWord({ cellValue, row, column }) {
        if(cellValue == "E1"){
          return "云端模型"
        }
        if(cellValue == 'E2'){
          return "物理模型"
        }
        if(cellValue == 'E3'){
          return "统计模型"
        }
        if(cellValue == 'E4'){
          return "补录数据"
        }
        if(cellValue == 'E5'){
          return "差值模型"
        }
      },
      dateMoment({ cellValue, row, column }) {
        return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
      },
      sortChangeEvent ({ column, property, order }) {
        if(order == null){
          order = 'asc'
        }
        this.currentPage = 1
        this.sortOrder = order
        this.loading = true
        this.getTable()
      },

      checkColumnMethod ({ column }) {
        if (column.property === 'preTime') {
          return false
        }
        return true
      },
      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
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.getDraw(this.queryStartTime,this.queryEndTime)
        this.getTable()
      },
      Byresize(tab){
        if(tab.name =='first'){
          this.resizeKey++
          this.showToolBar = false
        }else{
          this.showToolBar = true
        }

      },
    }
  }
</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;
  }

  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{
    background:transparent;
  }

  .el-button{
    background:transparent;
    color:white;
  }
  .filter{
    width: 100%;background-color: transparent;height: 10%
  }
  .filter >>> input{
    background:transparent;
    border:none;
    color:white;
  }
  .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;
  }


  .tableContent{
    width: 100%;
    height:calc(80vh - 50px);
  }
  .tableContent >>> td{
    border:1px solid #ffffff;
  }

  .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;
  }
  .toolbar{
    position:absolute;right:0px;
  }
  .toolbar >>> .vxe-button.type--button.is--circle {
    padding: 0 .5em;
    min-width: 34px;
    border-radius: 10%;
    border: none;
    background: transparent;
    color: white;
  }


</style>

