<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">
      <vxe-grid
        id="windTowerStatusDataTable"
        border
        show-header-overflow
        show-overflow
        export-config
        highlight-hover-row
        @sort-change="sortChangeEvent"
        :toolbar="tableToolbar"
        :custom-config="{storage: true, checkMethod: checkColumnMethod}"
        :auto-resize="true"
        :header-cell-style="styleStr"
        max-height="91%"
        :cell-style="styleTableStr"
         align="center"
        :sort-config="{remote:'true'}"
        :loading="loading"
        :columns="tableColumn"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"></vxe-grid>
    </div>
    <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>
</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.windTowerInfoId = Number(queryTimeList[2])
        this.windTowerInfoName = queryTimeList[3]
        this.eqTimeInterval()
      }
    },
    props: {
      queryTime:{
        type:String,
      },
      thFormat:{
        type:Array
      }
    },
    data() {
      return {
        styleStr:{},
        styleTableStr:{},
        startTime: new Date(new Date().toLocaleDateString()).getTime(),
        endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
        thLoadSign:true,
        loading:false,
        tableData:[],
        total:0,
        sortOrder:'asc',
        pageSize: 10,
        currentPage: 1,
        windTowerInfoId:'',
        windTowerInfoName:'',
        tableHead:[],
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          align: 'right',
          pageSizes: [10, 20, 50, 100, 200, 500],
          layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
          perfect: true
        },
        tableToolbar: {
          custom: true
        },
        tableColumn: [
          { field: 'time', title: '接入时间',formatter:this.dateFormat,sortable:true,width:"180" },
          { field: 'equipmentNo', title: '设备编号',minWidth:"130",formatter:this.nameFormat  },
        ],
        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/windTowerStatusData/'+this.startTime+'/'+this.endTime+'/'+this.windTowerInfoId+'/'+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('/windTowerStatusData/'+this.startTime+'/'+this.endTime+'/'+this.windTowerInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder).then((res) => {
          this.tableData = res.data.content
          // 表分页格数据总条数
          this.total = res.data.count
          //表头
          this.tableHead = res.data.tableHead

          this.tableColumn = [
            { field: 'time', title: '接入时间',formatter:this.dateFormat,sortable:true,width:"180" },
            { field: 'equipmentNo', title: '设备编号',minWidth:"130",formatter:this.nameFormat  },
          ]

            //只加载一次
            for(var i = 0 ;i<this.tableHead.length;i++){
              var th = new Object();
              th.field = this.tableHead[i]
              for(var j = 0;j<this.thFormat.length;j++){
                if(this.tableHead[i] == this.thFormat[j].key ){
                  th.title = this.thFormat[j].value
                }
              }
              th.minWidth = "130"
              this.tableColumn.push(th)
            }

            this.thLoadSign = false


          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')
      },
      nameFormat({ cellValue, row, column }) {
        return this.windTowerInfoName
      },
      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;*/
  /*}*/
  /*.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;*/
  /*}*/
</style>
