<template>
  <div class="chejian-container">
    <div class="page-title"></div>
    <div class="tri-colorLight" ref="flexDivGroup1">
      <div
        class="item-content item_content_rad"
        ref="itemFlexDiv1"
        v-for="(item, index) in tpmequipmentstatusList1"
        :key="index"
        cl
      >
        <div class="item-title">{{ item.equipmentname }}</div>
        <div class="item-title"></div>
        <div>
          {{ item.equipmentcode }}
        </div>
        <div>当天用电量：{{ item.tagvalue }} kW</div>
        <br />
        <div>A相电流：{{ item.tagvalueca }} A | A相电压：{{ item.tagvalueva }} V</div>
        <div>B相电流：{{ item.tagvaluecb }} A | B相电压：{{ item.tagvaluevb }} V</div>
        <div>C相电流：{{ item.tagvaluecc }} A | C相电压：{{ item.tagvaluevc }} V</div>
        <router-link :to="'/equipment/info/detail/' + item.equipmentid">
          <a-button type="primary" plain icon="search" style="margin-top: 10px">查看详情 </a-button>
        </router-link>
      </div>
    </div>
    <div class="tri-colorLight" ref="flexDivGroup">
      <div class="item-content" ref="itemFlexDiv" v-for="(item, index) in tpmequipmentstatusList" :key="index" cl>
        <div class="item-title">{{ item.equipmentid_dictText }}</div>
        <div class="item-title"></div>
        <div>
          {{ item.equipmentcode }}
        </div>
        <div>当天用电量：{{ item.tagvalue }} kW</div>
        <br />
        <div>A相电流：{{ item.tagvalueca }} A | A相电压：{{ item.tagvalueva }} V</div>
        <div>B相电流：{{ item.tagvaluecb }} A | B相电压：{{ item.tagvaluevb }} V</div>
        <div>C相电流：{{ item.tagvaluecc }} A | C相电压：{{ item.tagvaluevc }} V</div>
        <!-- <div>功率：{{ item.tagvaluep }} kW·h</div> -->
        <div class="light-con">
          <div class="item-light" :class="item.status === '1' ? 'green' : ''"></div>
          <!-- <div
            class="item-light"
            :class="item.status === '2' ? 'yellow' : ''"
          ></div> -->
          <div class="item-light" :class="item.status === '3' ? 'red' : ''"></div>
        </div>
        <router-link :to="'/equipment/info/detail/' + item.equipmentid">
          <a-button type="primary" plain icon="search" style="margin-top: 10px">查看详情 </a-button>
        </router-link>
      </div>
      <!-- 优化布局 -->
      <div ref="completion" v-for="item in completionNumber" :key="'com' + item" class="completion"></div>
    </div>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'equipmentStatusShow',
  data() {
    return {
      //设备状态列表
      tpmequipmentstatusList: [],
      tpmequipmentstatusList1: [],
      completionNumber: 0, // 布局使用参数
      completionNumber1: 0, // 布局使用参数
      url: {
        list: '/equipmentStatus/equipmentStatus/getElectricity',
      },
    }
  },
  created() {
    this.getList()
    var _this = this
    setInterval(function () {
      _this.getList()
    }, 60000)
  },
  mounted() {
    // 监听窗口改变设置最后一行布局
    window.addEventListener('resize', () => {
      this.WindowOnresize()
    })
  },
  // computed:{
  //   List(){
  //     return this.tpmequipmentstatusList.concat(this.tpmequipmentelectricy);
  //   }
  // },
  methods: {
    //获取设备运行状态
    getList() {
      getAction(this.url.list).then((response) => {
        this.tpmequipmentstatusList1 = []
        this.tpmequipmentstatusList = []
        // 拆分数据
        response.result.forEach((item) => {
          if (
            item.equipmentcode == 'M20230061' ||
            item.equipmentcode == 'M20230062' ||
            item.equipmentcode == 'M20230064' ||
            item.equipmentcode == 'M20230063'
          ) {
            this.tpmequipmentstatusList1.push(item)
          } else {
            this.tpmequipmentstatusList.push(item)
          }
        })
        this.$nextTick(() => {
          this.WindowOnresize()
        })
      })
    },

    // 设置最后一行布局
    WindowOnresize() {
      const equipmentGroupWidth = this.$refs.flexDivGroup.offsetWidth
      const itemEquipmentList = this.$refs.itemFlexDiv
      const itemEquipmentCount = itemEquipmentList.length // 现有item数量
      // console.log("现有的item的数量:--->"+itemEquipmentCount);
      const itemEquipmentWidth = itemEquipmentList[0].offsetWidth
      // console.log("宽度:--->"+itemEquipmentWidth);
      // const itemEquipmentWidth = itemEquipmentList[0].getBoundingClientRect().width + 6;
      const rowEquipmentCount = parseInt(equipmentGroupWidth / itemEquipmentWidth) // 每一行有几个item
      // console.log("每一行有几个item:--->"+rowEquipmentCount);
      const lastItemLenth = itemEquipmentCount % rowEquipmentCount // 最后一行有几个
      // console.log(equipmentGroupWidth,itemEquipmentWidth, itemEquipmentCount, rowEquipmentCount, lastItemLenth)
      // console.log("最后一行有几个item:--->"+lastItemLenth);
      this.completionNumber = lastItemLenth === 0 ? 0 : rowEquipmentCount - lastItemLenth
      // console.log("需要补上的空白格子的个数:"+this.completionNumber)
    },
  },
}
</script>
  
<style lang="less" scoped>
@import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
.chejian-container {
  width: 100%;
  // height: 100vh;
  background-color: #040634;
  .page-title {
    height: 20px;
  }
  // 三色灯
  .tri-colorLight {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    // width: 20%;
    .item-container {
      padding: 10px;
      box-sizing: border-box;
    }
    .item-content {
      width: 254px;
      border: 2px solid #314977;
      color: #63b4ca;
      // padding: 16px 50px 20px;
      padding-top: 16px;
      padding-bottom: 20px;
      margin: 10px 6px;
      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-title {
        font-weight: bold;
      }
      .light-con {
        margin-top: 20px;
        display: flex;
      }
      .item-light {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        margin: 0 15px;
        background: #7c7ea6;
      }
      .green {
        background-color: #0df708;
        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
      }
      .yellow {
        background-color: #f8fa12;
        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
      }
      .red {
        background-color: #fb0301;
        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
      }
    }
    .item_content_rad {
      border-radius: 18px;
    }
    .completion {
      width: 254px;
      margin: 10px 6px;
    }
  }
  // 三色灯
  .tri-colorLight1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    // width: 20%;
    .item-container {
      padding: 10px;
      box-sizing: border-box;
    }
    .item-content {
      width: 254px;
      border: 2px solid #314977;
      color: #63b4ca;
      // padding: 16px 50px 20px;
      padding-top: 16px;
      padding-bottom: 20px;
      margin: 10px 6px;
      box-shadow: 0 2px 10px 2px rgba(59, 78, 128, 0.5) inset;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-title {
        font-weight: bold;
      }
      .light-con {
        margin-top: 20px;
        display: flex;
      }
      .item-light {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        margin: 0 15px;
        background: #7c7ea6;
      }
      .green {
        background-color: #0df708;
        box-shadow: 0 0 18px 6px rgba(13, 247, 8, 0.5);
      }
      .yellow {
        background-color: #f8fa12;
        box-shadow: 0 0 18px 6px rgba(248, 250, 18, 0.5);
      }
      .red {
        background-color: #fb0301;
        box-shadow: 0 0 18px 6px rgba(251, 3, 1, 0.5);
      }
    }
    .completion {
      width: 254px;
      margin: 10px 6px;
    }
  }
}
</style>
  