<template>
  <div>
    <div class="bg">

      <div class="typeSelect">
        <el-select v-model="typeData" placeholder="请选择" @change="getData" style="width: 120px">
          <el-option
              label="电"
              value="2">
          </el-option>
          <el-option
              label="水"
              value="3">
          </el-option>
          <el-option
              label="压缩空气"
              value="4">
          </el-option>
          <el-option
              label="蒸汽"
              value="5">
          </el-option>
          <el-option
              label="氮气"
              value="6">
          </el-option>
        </el-select>
      </div>
      <div class="title">正道能源监控系统</div>
      <div class="content">
        <div class="list" v-for="item in list" :key="item.name">
          <ListItem v-if="isShow" :itemData="item" :isRoot="true"></ListItem>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {realTimeData} from "@/api/board";
import ListItem from "./components/listItem.vue";

export default {
  name: 'Board1',
  components: {
    ListItem
  },
  data() {
    return {
      isShow: true,
      typeData: '2',
      fieldUnits: {
        vA: 'V', vB: 'V', vC: 'V',
        iA: 'A', iB: 'A', iC: 'A',
        zxyg: 'kwh', fxyg: 'kwh',
      },
      fieldFilter: ['vA', 'vB', 'vC', 'iA', 'iB', 'iC', 'zxyg', 'fxyg'],
      list: [],
    }
  },
  async mounted() {
    this.getData()
  },
  methods: {
    buildTree(data, fieldUnits, fieldFilter) {
      const map = {};
      const tree = [];

      data.forEach(item => {
        map[item.objId] = {...item, children: [], device: []};

        if (item.isAmmeter === "1") {
          map[item.objId].deviceData = fieldFilter
              .filter(f => f in item)
              .map(f => ({
                name: f,
                value: item[f],
                units: fieldUnits[f] || ''
              }));
        }
      });

      data.forEach(item => {
        const node = map[item.objId];
        if (item.parentId && map[item.parentId]) {
          map[item.parentId].children.push(node);
        } else {
          tree.push(node);
        }
      });

      return tree;
    },
    getData() {
      this.isShow = false
      realTimeData({
        monitorType: this.typeData
      }).then(res => {
        const tree = this.buildTree(res.data, this.fieldUnits, this.fieldFilter);
        this.list = tree
        this.isShow = true
      })
    }
  }
}
</script>
<style scoped lang="less">

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('~@/assets/board/bg1.jpg');
  overflow: hidden;
}

.title {
  position: absolute;
  top: 2%;
  left: 50%;
  color: #eee;
  font-size: 2vw;
  font-weight: 600;
  letter-spacing: 0.5vw;
  transform: translateX(-50%);
}

.content {
  position: absolute;
  top: 10%;
  left: 1%;
  width: 98%;
  height: 88%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .list {
  }
}

.typeSelect {
  position: absolute;
  top: 6%;
  left: 2%;

  /deep/ .el-input__inner {
    background-color: #0000;
    color: #fff;
  }
}
</style>