<template>
  <div id="centreLeft2">
    <div class="percent">
      <div class="poItem">
        <span v-if="currentData && currentData.length > 0">{{currentData[0].name}}</span>
      </div>
      <div class="item">
        <span>当前温度</span>
        <dv-decoration-9 style="width: 1.5rem;height: 1.5rem;margin-left: 35px;" :color="colors1">
          <span style="font-size: 0.25rem;color: rgb(61,231,201);font-weight: bold;" v-if="currentData && currentData.length > 0">{{ currentData[0].temperature }}</span>
        </dv-decoration-9>
      </div>
      <div class="item">
        <span>当前湿度</span>
        <dv-water-level-pond :config="water1" style="width: 1.5rem;height: 1.5rem;margin-left: 30px;" />
      </div>
    </div>
    <div class="percent">
      <div class="poItem">
        <span v-if="currentData && currentData.length > 0">{{currentData[1].name}}</span>
      </div>
      <div class="item">
        <span>当前温度</span>
        <dv-decoration-9 style="width: 1.5rem;height: 1.5rem;margin-left: 35px;" :color="colors2">
          <span style="font-size: 0.25rem;color: rgb(61,231,201);font-weight: bold;" v-if="currentData && currentData.length > 0">{{ currentData[1].temperature }}</span>
        </dv-decoration-9>
      </div>
      <div class="item">
        <span>当前湿度</span>
        <dv-water-level-pond :config="water2" style="width: 1.5rem; height: 1.5rem;margin-left: 30px;" />
      </div>
    </div>
    <centerChartLine ref="ccl" style="margin-top: 10px;"/>
  </div>
</template>

<script>
import centerChartLine from "@/components/echart/center/centerChartLine";
import centerChartWd from "@/components/echart/center/centerChartWd";
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      water1: {},
      water2: {},
      url: '/big/getHumitureLog',
      getHumitureConfig: '/big/getHumitureConfig',
      getHumitureNow: '/big/getHumitureNow',
      humidityMax: '',
      humidityMin: '',
      temperatureMax: '',
      temperatureMin: '',
      currentData: {},
      colors1: [],
      colors2: [],
      device1Name: '',
      device2Name: ''
    };
  },
  components: {
    centerChartLine,
    centerChartWd
  },
  mounted() {
    this.getData()
    setInterval(() => {
      this.getData()
    }, window._CONFIG['refreshTime'])
  },
  methods: {
    getData() {
      const _this = this
      let params = window._CONFIG['isLTK'] ? {storeCode: this.$route.query.storeCode} : ''
      getAction(this.url, params).then(res => {
        this.$refs.ccl.draw(res.data)
      })
      getAction(this.getHumitureConfig, params).then(res => {
        _this.humidityMax = res.data.humidityMax
        _this.humidityMin = res.data.humidityMin
        _this.temperatureMax = res.data.temperatureMax
        _this.temperatureMin = res.data.temperatureMin
        getAction(this.getHumitureNow, params).then(res => {
          this.currentData = res.data
          const colors1 = parseFloat(res.data[0].humidity).toFixed(2) > _this.humidityMax ? ['#FFA500', '#FF7F50'] : parseFloat(res.data[0].humidity).toFixed(2) < _this.humidityMin ? ['#F0F8FF','#ADD8E6'] : ['#00BAFF', '#3DE7C9']
          const colors2 = parseFloat(res.data[1].humidity).toFixed(2) > _this.humidityMax ? ['#FFA500', '#FF7F50'] : parseFloat(res.data[1].humidity).toFixed(2) < _this.humidityMin ? ['#F0F8FF','#ADD8E6'] : ['#00BAFF', '#3DE7C9']
          _this.colors1 = parseFloat(res.data[0].temperature).toFixed(2) > _this.temperatureMax ? ['#FFA500', '#FF7F50'] : parseFloat(res.data[0].temperature).toFixed(2) < _this.temperatureMin ? ['#F0F8FF','#ADD8E6'] : []
          _this.colors2 = parseFloat(res.data[1].temperature).toFixed(2) > _this.temperatureMax ? ['#FFA500', '#FF7F50'] : parseFloat(res.data[1].temperature).toFixed(2) < _this.temperatureMin ? ['#F0F8FF','#ADD8E6'] : []
          const waveNum1 = parseFloat(res.data[0].humidity).toFixed(2) > _this.humidityMax ? 4 : parseFloat(res.data[0].humidity).toFixed(2) < _this.humidityMin ? 2 : 3
          const waveNum2 = parseFloat(res.data[1].humidity).toFixed(2) > _this.humidityMax ? 4 : parseFloat(res.data[1].humidity).toFixed(2) < _this.humidityMin ? 2 : 3
          this.water1 = {
            data: [parseFloat(res.data[0].humidity).toFixed(2)],
            shape: "roundRect",
            formatter: "{value}%",
            waveNum: waveNum1, // 波浪数量	
            waveHeight: 20, // 波浪高度
            colors: colors1
          }
          this.water2 = {
            data: [parseFloat(res.data[1].humidity).toFixed(2)],
            shape: "roundRect",
            formatter: "{value}%",
            waveNum: waveNum2,
            waveHeight: 20,
            colors: colors2
          }
        })
      })
    }
  }
};
</script>

<style lang="scss">
#centreLeft2 {
  margin-top: 40px;
  width: 100%;
  .text {
    color: #c3cbde;
  }
  .percent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .poItem {
      width: 20%;
      height: 1.875rem;
      span {
        margin-top: 0.0875rem;
        display: flex;
        font-size: 0.2rem;
        line-height: 1.5rem;
        justify-content: center;
      }
    }
    .item {
      width: 40%;
      height: 1.875rem;
      .centerRate {
        margin-left: 1rem;
      }
      span {
        margin-top: 0.0875rem;
        display: flex;
        justify-content: center;
      }
    }
    .water {
      width: 100%;
    }
  }
}
</style>