<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 class="downloadButton" style="border:none;"  @click="exportDataEvent"><i class="vxe-icon--download" ></i></vxe-button>
          </template>
        </vxe-toolbar></div>
        <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="nwpToolBar" custom></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-grid
              id="nwpTable"
              ref="nwpRef"
              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"
              :columns="tableColumn"
              :data="tableData">
<!--              <vxe-table-column  field="preTime" title="预测时间" :formatter="dateFormat" width="180" sortable min-width="150"></vxe-table-column>-->
<!--              <vxe-table-column field="scTime" title="生成时间" min-width="180" ></vxe-table-column>-->
<!--              <vxe-table-column field="t" title="温度" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="rh" title="湿度" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="swr" title="总辐射" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="directRadiation" title="直辐射" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="diffuseRadiation" title="散辐射" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="senf" title="热感通量" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws10" title="10米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws30" title="30米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws50" title="50米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws70" title="70米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws80" title="80米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws90" title="90米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws100" title="100米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="ws170" title="170米风速" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd10" title="10米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd30" title="30米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd50" title="50米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd70" title="70米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd80" title="80米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd90" title="90米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd100" title="100米风向" min-width="90" ></vxe-table-column>-->
<!--              <vxe-table-column field="wd170" title="170米风向" min-width="90" ></vxe-table-column>-->
            </vxe-grid>
            <div class="rtPageturning">
              <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>
         <!-- <Table height="100%" width="100%" :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></Table>-->
        </el-tab-pane>
        <el-tab-pane label="平均值统计" name="third">
          <div class="tableContent">
            <vxe-grid
              id="nwpStatisticsTable"
              ref="nwpRef"
              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"
              :columns="tableColumn"
              :data="statisticsData">
              </vxe-grid>
          </div>
         </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import Chart from './charts'
  import resize from '../../../components/Charts/mixins/resize'
  export default {
    name: 'nwp',
    components: { Chart},
    mixins: [resize],
    data(){
      return{
        styleStr:{},
        styleTableStr:{},
        tableColumn:[],
        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:[],
        statisticsData:[],
        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.nwpRef.connect(this.$refs.nwpToolBar)
      })
    },
    mounted() {
      this.init()
    },
    methods:{
      exportDataEvent() {
        this.loading = true
        this.$axios.get('export/nwp/'+this.startTime+'/'+this.endTime, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      init(){
        this.$axios.get("nwp/getNwpDay").then(res=>{
          // var days = res.data + 1
          this.endTime = new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1
          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('/nwp/'+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('/nwp/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPage+'/'+this.pageSize+'?sortOrder='+this.sortOrder).then((res) => {
          this.tableData = res.data.content
          // 表分页格数据总条数
          this.total = res.data.count
          this.statisticsData = res.data.statistics
          const cName = res.data.cName

          this.tableColumn = [
            { field: 'preTime', title: cName.preTime,formatter:this.dateFormat,minWidth:"150",width: "180"},
            { field: 'scTime', title: cName.scTime,minWidth:"150"},
              { field: 't', title: cName.t, minWidth:"90"},
              { field: 'rh', title: cName.rh, minWidth:"90"},
              { field: 'pressure', title: cName.pressure, minWidth:"90"},
              { field: 'swr', title: cName.swr, minWidth:"110"},
              { field: 'directRadiation', title: cName.directRadiation, minWidth:"110"},
              { field: 'diffuseRadiation', title: cName.diffuseRadiation, minWidth:"110"},
              { field: 'ws10', title: cName.ws10, minWidth:"120"},
              { field: 'ws30', title: cName.ws30, minWidth:"120"},
              { field: 'ws50', title: cName.ws50, minWidth:"120"},
              { field: 'ws70', title: cName.ws70, minWidth:"120"},
              { field: 'ws80', title: cName.ws80, minWidth:"120"},
              { field: 'ws90', title: cName.ws90, minWidth:"120"},
              { field: 'ws100', title: cName.ws100, minWidth:"130"},
              { field: 'ws170', title: cName.ws170, minWidth:"130"},
              { field: 'wd10', title: cName.wd10, minWidth:"110"},
              { field: 'wd30', title: cName.wd30, minWidth:"110"},
              { field: 'wd50', title: cName.wd50, minWidth:"110"},
              { field: 'wd70', title: cName.wd70, minWidth:"110"},
              { field: 'wd80', title: cName.wd80, minWidth:"110"},
              { field: 'wd90', title: cName.wd90, minWidth:"110"},
              { field: 'wd100', title: cName.wd100, minWidth:"110"},
              { field: 'wd170', title: cName.wd170, minWidth:"110"},
          ]
          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)
        })

      },
      getStatisticsTable(){
        this.tableLoading = true
        this.$axios.get('/nwp/'+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
        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')
      },
      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>

