<template>
  <div>
  <div style="width: 100%;height: 100%"  v-if="this.electricFieldTypeEnum == 'E1'">
    <div style="width: 100%;background-color: transparent;height: 2%;display:inline-block;padding-left: 5px;padding-top: 5px">
      <div class="filter">
        <span>选择气象站</span>
        <el-select v-model="weatherInfoId" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in weatherInfos"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <span>选择日期类型</span>
        <el-select v-model="dateType" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in dates"
            :key="item.key"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span>选择数据类型</span>
        <el-select v-model="dataType" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in dataTypes"
            :key="item.key"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="tableContent">
      <vxe-grid
        id="blakPowerData"
        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="{background:'black',color:'white'}"
        :cell-style="{background:'black',color:'white'}"
        align="center"
        :sort-config="{remote:'true'}"
        :loading="loading"
        :tree-config="{children: 'children'}"
        :columns="tableColumn"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"></vxe-grid>
    </div>
    <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>






  <div style="width: 100%;height: 100%" v-if="this.electricFieldTypeEnum == 'E2'">
    <div style="width: 100%;background-color: transparent;height: 2%;display:inline-block;padding-left: 5px;padding-top: 5px">
      <div class="filter">
        <span>选择测风塔</span>
        <el-select v-model="windTowerInfoId" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in windTowerInfos"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <span>选择日期类型</span>
        <el-select v-model="dateType1" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in dates1"
            :key="item.key"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span>选择层高</span>
        <el-select v-model="dataType1" @change="getTable" placeholder="请选择">
          <el-option
            v-for="item in heights1"
            :key="item.key"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="tableContent">
      <vxe-grid
        id="blakPowerData1"
        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="{background:'black',color:'white'}"
        :cell-style="{background:'black',color:'white'}"
        align="center"
        :sort-config="{remote:'true'}"
        :loading="loading"
        :columns="tableColumn1"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"></vxe-grid>
    </div>
    <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>
</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.getTable()
      }

    },
    props: {
      queryTime: {
        type: String,
      },
      thFormat: {
        type: Array
      }
    },
    data() {
      return {
        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,
        weatherInfos:[],
        windTowerInfos:[],
        weatherInfoId:'',
        windTowerInfoId: '',
        weatherInfoName: '',
        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: {
          export: true,
          custom: true
        },
        tableColumn: [{
          title: '气象站数据统计',
          children: [
            {field: 'time', title: '日期', minWidth: "130",treeNode: true},
            // {field: 'dataType', title: '数据类型', minWidth: "130"},
            {field: 'maxValue', title: '最大值', minWidth: "130"},
            {field: 'minValue', title: '最小值', minWidth: "130"},
            {field: 'avgValue', title: '平均值', minWidth: "130"}
          ]
        }],
        dates:[
          {key: 'year', label: '年', value: "year"},
          {key: 'month', label: '月', value: "month"},
          {key: 'day', label: '日', value: "day"},
        ],
        dateType:'day',
        dataType:"总辐射",
        dataTypes:[
          {key: '总辐射', label: '总辐射', value: "总辐射"},
          {key: '直接辐射', label: '直接辐射', value: "直接辐射"},
          {key: '散射辐射', label: '散射辐射', value: "散射辐射"},
          {key: '斜面辐射', label: '斜面辐射', value: "斜面辐射"},
          {key: '环境温度', label: '环境温度', value: "环境温度"},
          {key: '气压', label: '气压', value: "气压"},
          {key: '湿度', label: '湿度', value: "湿度"},
          {key: '光伏电池板温度', label: '光伏电池板温度', value: "光伏电池板温度"},
          {key: '风速', label: '风速', value: "风速"},
          {key: '风向', label: '风向', value: "风向"},
          {key: '日照小时数', label: '日照小时数', value: "日照小时数"},
          {key: '总辐射日累计', label: '总辐射日累计', value: "总辐射日累计"},
          {key: '直接辐射日累计', label: '直接辐射日累计', value: "直接辐射日累计"},
          {key: '斜面辐射日累计', label: '斜面辐射日累计', value: "斜面辐射日累计"},
        ],
        tableColumn1: [{
          title: '测风塔风速统计',
          children: [
            {field: 'time', title: '日期', minWidth: "130"},
            {field: 'maxValue', title: '风速最大值', minWidth: "130"},
            {field: 'minValue', title: '风速最小值', minWidth: "130"},
            {field: 'avgValue', title: '风速平均值', minWidth: "130"}
          ]
        }],
        dates1:[
          {key: 'year', label: '年', value: "year"},
          {key: 'month', label: '月', value: "month"},
          {key: 'day', label: '日', value: "day"},
        ],
        dateType1:'day',
        heights1:[
          {key: '10', label: '10', value: "10"},
          {key: '30', label: '30', value: "30"},
          {key: '50', label: '50', value: "50"},
          {key: '70', label: '70', value: "70"},
          {key: '80', label: '80', value: "80"},
          {key: '90', label: '90', value: "90"},
          {key: '100', label: '100', value: "100"},
          {key: '110', label: '110', value: "110"},
        ],
        dataType1:"10",
        electricFieldTypeEnum:'E1'
      }
    },
    created() {
      this.queryWeatherStationInfo()
    },
    methods: {
      queryWeatherStationInfo() {
        this.$axios.get('/electricField').then(res=> {
          this.electricFieldTypeEnum = res.data.electricFieldTypeEnum
          if (res.data.electricFieldTypeEnum == 'E1') {
            this.loading = true
            this.$axios.get('/weatherStationInfos').then((res) => {
              if (res.data != null && res.data.length > 0) {
                this.weatherInfos = res.data
                this.weatherInfoId = this.weatherInfos[0].id
                this.weatherInfoName = this.weatherInfos[0].name
                this.getTable()
              } else {
                this.loading = false
                this.$message.warning("没有气象站设备信息")
              }
            }).catch((error) => {
              this.loading = false
              this.$message.error('查询气象站设备信息出错' + error)
            })
          }else {
            this.loading = true
            this.$axios.get('/windTowerInfos').then((res) => {
              if (res.data != null && res.data.length > 0) {
                this.windTowerInfos = res.data
                this.windTowerInfoId = this.windTowerInfos[0].id
                this.windTowerInfoName = this.windTowerInfos[0].name
                this.getTable()
              } else {
                this.loading = false
                this.$message.warning("没有测风塔设备信息")
              }
            }).catch((error) => {
              this.loading = false
              this.$message.error('查询测风塔设备信息出错' + error)
            })
          }})
      },
      getTable() {
          if(this.electricFieldTypeEnum == 'E1'){
            this.loading = true
            this.$emit('sendLoading', this.loading)
            this.$axios.get('/weatherData/' + this.startTime+'/'+this.endTime+'/'+this.weatherInfoId+'/'+this.dateType+'/'+this.dataType).then((res) => {
              this.tableData = res.data

              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)
            })
          }else {
            this.loading = true
            this.$emit('sendLoading', this.loading)
            this.$axios.get('/queryAnemometerSpeed/' + this.startTime+'/'+this.endTime+'/'+this.windTowerInfoId+'/'+this.dateType1+"/"+this.dataType1).then((res) => {
              this.tableData = res.data
              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)
            })
          }




      },
      handlePageChange({currentPage, pageSize}) {
        this.currentPage = currentPage
        this.pageSize = pageSize
      },
      // 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;
  }
  span{
    opacity:0.69;
    padding-right:7px;
    font-size:14px;
    color: white;
  }
  .filter >>> input{
    background:transparent;
    border:none;
    color:white;
  }
</style>
