<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-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>
        </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: 'nwpOne',
    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

      }
    },
    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/nwpOne/'+this.startTime+'/'+this.endTime, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      init(){
        this.$axios.get("nwpOne/getNwpDay").then(res=>{
          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('/nwpOne/'+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('/nwpOne/'+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('/nwpOne/'+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>
</style>

