<template>
  <div class="chart-container">
    <div class="filter">
      <div class="startTime">
        <span class="timeText">时间</span>
        <el-date-picker
          v-model="startTime"
          :clearable="false"
          type="date"
          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 class="downloadButton" style="border:none;"  @click="exportData"><i class="vxe-icon--download" ></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
              :loading="loading"
              @sort-change="sortChangeEvent"
              :custom-config="{storage: true, checkMethod: checkColumnMethod}"
              :auto-resize="true"
              highlight-hover-row
              :header-cell-style="styleStr"
              max-height="90%"
              :cell-style="styleTableStr"
              align="center"
              :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
              <vxe-table-column  field="times" title="预测时间" :formatter="dateFormat" width="180" sortable min-width="150"></vxe-table-column>
              <vxe-table-column field="realValue" title="实际功率" min-width="60"></vxe-table-column>
              <vxe-table-column field="value1" title="第1个时刻" min-width="60" ></vxe-table-column>
              <vxe-table-column field="value2" title="第2个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value3" title="第3个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value4" title="第4个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value5" title="第5个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value6" title="第6个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value7" title="第7个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value8" title="第8个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value9" title="第9个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value10" title="第10个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value11" title="第11个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value12" title="第12个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value13" title="第13个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value14" title="第14个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value15" title="第15个时刻" min-width="60"></vxe-table-column>
              <vxe-table-column field="value16" title="第16个时刻" min-width="60"></vxe-table-column>
            </vxe-table>
            <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>
          <!-- <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{
        styleStr:{},
        styleTableStr:{},
        outer:'outer',
        chart: null,
        queryStartTime:'',
        queryEndTime:'',
        startTime:new Date(new Date().toLocaleDateString()).getTime(),
        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 () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.fstRef.connect(this.$refs.fstToolBar)
      })
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        this.queryStartTime = this.startTime
        this.loading = true
        this.getDraw(this.queryStartTime)
        // this.getTable()

      },
      getDraw(startTime){
        this.drawLoading = true
        this.$axios.get('/findByForecastRealTimeUltraShortTerm16/'+startTime).then((res) => {
          const value = res.data.value
          this.tableData = []
          for(let i = 1;i< res.data.realDatas.length;i++){
            const temp = {}
            temp.times = res.data.times[i]
            temp.realValue = res.data.realDatas[i]
            temp.value1 = value.value1[i]
            temp.value2 = value.value2[i]
            temp.value3 = value.value3[i]
            temp.value4 = value.value4[i]
            temp.value5 = value.value5[i]
            temp.value6 = value.value6[i]
            temp.value7 = value.value7[i]
            temp.value8 = value.value8[i]
            temp.value9 = value.value9[i]
            temp.value10 = value.value10[i]
            temp.value11 = value.value11[i]
            temp.value12 = value.value12[i]
            temp.value13 = value.value13[i]
            temp.value14 = value.value14[i]
            temp.value15 = value.value15[i]
            temp.value16 = value.value16[i]
            this.tableData.push(temp)
          }
          // for(let i = 1;i<res.data.realDatas;i++) {
          //
          // }
          this.loading = false
          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)
        })
      },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        this.pageSize = pageSize
        this.startTime = this.queryStartTime
        // this.endTime = this.queryEndTime
        // this.loading = true
        // this.getTable();
      },
      dateFormat({ cellValue, row, column }) {
        return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
      },
      dateFormatForTitle(cellValue) {
        return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
      },
      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
        // }
        this.queryStartTime = this.startTime
        // this.queryEndTime = this.endTime
        this.getDraw(this.queryStartTime)
        // this.getTable()
      },
      Byresize(tab){
        if(tab.name =='first'){
          this.resizeKey++
          this.showToolBar = false
        }else{
          this.showToolBar = true
        }
      },
      exportData(){
        const data = this.tableData
        this.$refs.fstRef.exportData({
          filename: this.dateFormatForTitle(this.startTime)+' 超短期16时刻数据',
          type: 'csv',
          isHeader: true,
          isFooter: true,
          data
        })
      }
    }
  }
</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>

