<template>
  <div style="width: 100%;height: 100%">
    <div style="width: 100%;background-color: transparent;height: 2%">
      <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>
          <el-select v-model="weatherStationInfoId" placeholder="请选择">
            <el-option
              v-for="item in weatherStationInfos"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="timeQuery">
          <el-button :loading="loading" @click="queryData()" size="small" >查询</el-button>
        </div>
      </div>
    </div>
    <div class="flex-container">
      <div class="item one" @click="clickChart('1')" style="transform: translate(-32.4%,-33.5%) scale(0.3)">
        <temperatureCharts :temperatureData=this.temperatureData></temperatureCharts>
      </div>
      <div class="item two" @click="clickChart('2')" style="transform: translate(-32.4%,0.5%) scale(0.3)">
        <otherCharts></otherCharts>
      </div>
      <div class="item three" @click="clickChart('3')" style="transform: translate(-32.4%,34.5%) scale(0.3)">
        <v-table :queryTime=this.queryTime @sendLoading="getLoadingFormTable"></v-table>
      </div>
      <div class="item four active" @click="clickChart('4')" style="transform: translate(30%, 0) scale(0.98)">
        <radiationCharts :radiationData = this.radiationData></radiationCharts>
      </div>
    </div>
  </div>

</template>

<script>
    import table from './table'
    import otherCharts from './otherCharts'
    import radiationCharts from './radiationCharts'
    import temperatureCharts from './temperatureCharts'
    import resize from '../../../components/Charts/mixins/resize'
    export default {
      mixins: [resize],
      data() {
        return {
          items: [],
          queryStartTime:"",
          queryEndTime:"",
          startTime: new Date(new Date().toLocaleDateString()).getTime(),
          endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
          queryTime:'',
          weatherStationInfos: [],
          weatherStationInfoId: '',
          drawData: [],
          radiationData:{data:[],time:[]},
          temperatureData:{data:[],time:[]},
          otherData:{data:[],time:[]},
          loading:false,
          tableLoading:true,
        }
      },
      mounted() {
        this.init();
      },
    methods:{
      init() {
        this.items = document.querySelectorAll('.flex-container .item')
        for (let i = 0; i < this.items.length; i++) {
          this.items[i].dataset.order = i + 1;
        }
        this.queryStartTime = this.startTime
        this.queryEndTime = this.endTime
        this.queryWeatherStationInfo()
      },
      queryWeatherStationInfo() {
        this.loading = true
        this.$axios.get('/weatherStationInfos').then((res) => {
          if (res.data != null && res.data.length > 0) {
            this.weatherStationInfos = res.data
            this.weatherStationInfoId = this.weatherStationInfos[0].id
            this.queryTime= this.queryStartTime+','+this.queryEndTime+','+this.weatherStationInfoId+','+Math.ceil(Math.random()*10)
            this.queryWeatherStationStatusDataForCharts(this.queryStartTime, this.queryEndTime, this.weatherStationInfoId)
          } else {
            this.loading = false
            this.$message.warning("没有气象设备信息")
          }
        }).catch((error) => {
          this.loading = false
          this.$message.error('查询气象设备信息出错' + error)
        })
      },
      queryWeatherStationStatusDataForCharts(startTime, endTime, no) {
        this.$axios.get('/weatherStationStatusData/' + startTime + '/' + endTime + '/' + no).then((res) => {
          this.drawData = res.data
          this.radiationData.data = this.drawData.radiationMap
          this.radiationData.time = this.drawData.times
         /* this.$store.commit('changeRadiation', this.radiationData)*/

          this.temperatureData.data = this.drawData.aAndCMap
          this.temperatureData.time = this.drawData.times
          /*this.$store.commit('changeTemperature', this.temperatureData)*/

          this.otherData.data = this.drawData.otherMap
          this.otherData.time = this.drawData.times
          this.$store.commit('changeOther', this.otherData)
          if(!this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          if(!this.tableLoading){
            this.loading = false
          }
          this.$message.error('气象数据查询echarts出错' + error)
        })

      },
      queryData(){
        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.queryTime =this.queryStartTime+','+this.queryEndTime+','+this.weatherStationInfoId+','+Math.ceil(Math.random()*10)
        this.queryWeatherStationStatusDataForCharts(this.queryStartTime, this.queryEndTime, this.weatherStationInfoId)


      },
      getLoadingFormTable(data){
        this.tableLoading = data
        this.loading= this.tableLoading
        this.startTime = this.queryStartTime
        this.endTime = this.queryEndTime
      },
      clickChart(clickIndex) {
        let activeItem = document.querySelector('.flex-container .active')
        let activeIndex = activeItem.dataset.order
        let clickItem = this.items[clickIndex - 1]
        if (activeIndex === clickIndex) {
          return
        }
        activeItem.classList.remove('active')
        clickItem.classList.add('active')
        this.setStyle(clickItem, activeItem)
      },
      setStyle(el1, el2) {
        let transform1 = el1.style.transform
        let transform2 = el2.style.transform
        el1.style.transform = transform2
        el2.style.transform = transform1
      },
    },
            components: {
              'v-table':table,
              radiationCharts,
              temperatureCharts,
              otherCharts
            }
    }

</script>

<style  scoped>
    /*.item{*/
        /*width: 68%;*/
        /*height: 90%;*/
        /*position:absolute;*/
        /*transition:all 0.8s;*/
        /*background:rgba(32, 32, 35, 0.5)*/
    /*}*/
    .flex-container{
        height: 90%;
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
        margin-right:  50px;
    }
    .active{
        height:90%;
        width: 77%;
    }
    /*.filter{*/
      /*position:relative;*/
      /*display:flex;*/
      /*padding:5px 0 0 35px;*/
      /*font-size:12px;*/
      /*line-height:6px;*/
      /*color:white;*/
    /*}*/
    /*.filter >>> 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;*/
    /*}*/
    /*.el-button{*/
      /*background:transparent;*/
      /*color:white;*/
    /*}*/

    /*.timeQuery{*/
      /*margin-left: 2%;*/
      /*background:transparent;*/
    /*}*/

</style>
