<template>
  <div style="width: 100%;height: 100%" >
    <div style="width: 100%;background-color: transparent;height: 1%;display:inline-block">
      <div class="filter">
        <div class="startTime">
          <span class="timeText">间隔时间</span>
          <el-select v-model="jgTime"  placeholder="请选择" @change="changeJgTime">
            <el-option
              v-for="item in jgTimes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <vxe-button class="downloadButton" style="border:none;"  @click="exportDataEvent"><i class="vxe-icon--download" ></i></vxe-button>
        </div>
      </div>
    </div>
    <div class="tableContent" style="padding-top: 10px">

      <vxe-table
        id="weatherStationStatusDataTable"
        ref="wTable"
        border
        @sort-change="sortChangeEvent"
        :loading="loading"
        export-config
        :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="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
        <vxe-table-column field="globalR" title="总辐射" min-width="60"></vxe-table-column>
        <vxe-table-column field="directR" title="直接辐射" min-width="60"></vxe-table-column>
        <vxe-table-column field="diffuseR" title="散射辐射" min-width="60"></vxe-table-column>
        <vxe-table-column field="obliqueR" title="斜面辐射" min-width="60"></vxe-table-column>
        <vxe-table-column field="airT" title="环境温度" min-width="60"></vxe-table-column>
        <vxe-table-column field="p" title="气压" min-width="60"></vxe-table-column>
        <vxe-table-column field="rh" title="湿度"min-width="60"></vxe-table-column>
        <vxe-table-column field="cellT" title="背板温度" min-width="60"></vxe-table-column>
        <vxe-table-column field="ws" title="风速" min-width="60"></vxe-table-column>
        <vxe-table-column field="wd" title="风向" min-width="60"></vxe-table-column>
        <vxe-table-column field="hourDA" title="日照小时数" min-width="60"></vxe-table-column>
        <vxe-table-column field="globalRDA" title="总辐射日累计" min-width="60"></vxe-table-column>
        <vxe-table-column field="directRDA" title="直接辐射日累计" min-width="60"></vxe-table-column>
        <vxe-table-column field="diffuseRDA" title="散射辐射日累计" min-width="60"></vxe-table-column>
        <vxe-table-column field="obliqueRDA" title="斜面辐射日累计" min-width="60"></vxe-table-column>
      </vxe-table>
    </div>
    <div class="rtPageturning">
      <vxe-pager
        :loading="loading"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
  </div>
</template>

<script>
  export default {
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      queryTime: function(newQuestion, oldQuestion) {
        var queryTimeList = newQuestion.split(",")
        this.currentPage = 1
        this.startTime=Number(queryTimeList[0])
        this.endTime=Number(queryTimeList[1])
        this.weatherStationInfoId = Number(queryTimeList[2])
        this.eqTimeInterval()
      }
    },
    props: {
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      },
      queryTime:{
        type:String,
      },
    },
    data() {
      return {
        styleStr:{},
        styleTableStr:{},
        startTime:'',
        endTime: '',
        tableData:[],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        weatherStationInfoId:'',
        columns:[],
        loading:false,
        jgTime:3600000,
        jgTimes:[
          {label: "1分钟",value:60000},
          {label: "5分钟",value:300000},
          {label: "10分钟",value:600000},
          {label: "15分钟",value:900000},
          {label: "1小时",value:3600000}
        ],
        displayConfigJgTime:{
          id:"",
          displayCode:"timeInterval",
          showCode:"",
          hiddenCode:""
        },
        displayConfigPageSize:{
          id:"",
          displayCode:"pageSize",
          showCode:"",
          hiddenCode:""
        },
      }
    },
    mounted() {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
    },

    methods: {
      exportDataEvent() {
        this.loading = true
        this.$axios.get('export/weatherStationStatusData/'+this.startTime+'/'+this.endTime+'/'+this.weatherStationInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      eqTimeInterval(){
        this.$axios.get('displayConfig/eqTimeInterval').then((res) => {
          this.displayConfigJgTime = res.data
          this.jgTime = parseInt(this.displayConfigJgTime.showCode)
          this.getTable()
          // this.$message.success('间隔时间获取成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('间隔时间获取出错' + error)
        })
        this.$axios.get('displayConfig/pageSize').then((res) => {
          this.displayConfigPageSize = res.data
          this.pageSize = parseInt(this.displayConfigPageSize.showCode)
          // this.$message.success('PageSize获取成功' )
          this.dialogVisible = false
        }).catch((error) => {
          this.$message.error('PageSize获取出错' + error)
        })
      },
      changeJgTime(){
        this.displayConfigJgTime.showCode = this.jgTime
        this.$axios.post('displayConfig/',this.displayConfigJgTime).then((res) => {
          this.displayConfigJgTime = res.data
          // this.$message.success('间隔时间设置成功' )
          this.dialogVisible = false
          this.getTable(this.startTime,this.endTime)
        }).catch((error) => {
          this.$message.error('间隔时间设置出错' + error)
        })
      },
      getTable(){
        this.loading = true
        this.$emit('sendLoading', this.loading)
        this.$axios.get('/weatherStationStatusData/'+this.startTime+'/'+this.endTime+'/'+this.weatherStationInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder).then((res) => {
          this.tableData = res.data.content
          // 表分页格数据总条数
          this.total = res.data.count
          this.loading = false
          this.$emit('sendLoading', this.loading)
        }).catch((error) => {
          this.loading = false
          this.$emit('sendLoading', this.loading)
          this.$message.error('查询table出错' + error)
        })

      },
      changePageSize(pageSize){
        this.displayConfigPageSize.showCode = pageSize
        this.$axios.post('displayConfig/',this.displayConfigPageSize).then((res) => {
          this.displayConfigPageSize = res.data
          // this.$message.success('PageSize设置成功' )
        }).catch((error) => {
          this.$message.error('PageSize设置出错' + error)
        })
      },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        if(this.pageSize!=pageSize){
          this.changePageSize(pageSize)
        }
        this.pageSize = pageSize
        // 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.getTable()
      },
      checkColumnMethod ({ column }) {
        if (column.property === 'time') {
          return false
        }
        return true
      },
    }
  }
</script>
<style scoped>
  /*.tableContent{*/
    /*width: 100%;*/
    /*height:90%;*/
  /*}*/
  /*.tableContent >>> td{*/
    /*border:1px solid #ffffff;*/
  /*}*/
  /*.rtPageturning{*/
    /*width: 100%;*/
    /*height: 10%;*/
  /*}*/
  /*.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 >>> .vxe-button.type--button.is--circle {*/
    /*padding: 0 .5em;*/
    /*min-width: 34px;*/
    /*border-radius: 10%;*/
    /*border: none;*/
    /*background: transparent;*/
    /*color: white;*/
  /*}*/
  .timeText{

    display:inline-block;
    /*opacity:0.69;*/
    /*padding-right:7px;*/
    /*font-size:14px;*/
  }
  /*.filter{*/
    /*position:relative;*/
    /*display:flex;*/
    /*padding:0px 0px 10px 10px;*/
    /*font-size:12px;*/
    /*line-height:11px;*/
    /*color:white;*/
  /*}*/
  /*.filter >>> input{*/
    /*background:transparent;*/
    /*border:none;*/
    /*color:white;*/
  /*}*/
  /*.startTime{*/
    /*display:inline-block;*/
  /*}*/
</style>
