<template>
  <div class="env">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <i
          :class="`iconfont icon-${item.icon}`"
          :style="`font-size:25px; cursor: pointer; color: ${item.color};`"
        />
        <div class="right">
          <span>{{ item.label }}</span>
          <span style="color: #a0f0a0; font-size: 16px;">{{ item.value }} {{ item.d }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    propsTotal: {
      type: Object,
      default: () => {}
    },
    propsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [
        {
          key: 'coolingStatus',
          value: '制冷',
          d: '',
          label: '冷机',
          class: 'item-1',
          icon: 'lengji',
          color: '#F69B52'
        },
        {
          key: 'aircStatus',
          value: '开机',
          d: '',
          label: '空调',
          class: 'item-2',
          icon: 'kongdiaogongcheng',
          color: '#9BD801'
        },
        {
          key: 'envTemp',
          value: 24,
          d: '℃',
          label: '环境温度',
          class: 'item-3',
          icon: 'wenduji',
          color: '#3DFEFA'
        },
        {
          key: 'envhum',
          value: 26,
          d: '%',
          label: '环境湿度',
          class: 'item-4',
          icon: 'shidu',
          color: '#D83D6C'
        }
      ]
    }
  },

  watch: {
    propsTotal: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.list.forEach((item) => {
            if ( ['coolingStatus','aircStatus'].includes(item.key) ) {
              item.value =['关机','开机'][this.propsTotal[item.key]]
            } else {
              item.value = this.propsTotal[item.key]
            }
          })
        }
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.env {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: auto;
}

.content {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;

  .item {
    height: 50%;
    width: 25%;
    // height: 47px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // justify-content: center;
    // text-align: center;

    & > span:nth-child(1) {
      font-size: 12px;
      margin-bottom: 10px;
    }
    .d {
      margin-left: 1px;
      font-size: 12px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
}
</style>
