<template>
  <div id="used-ele">
    <div class="title">用电量</div>
    <div class="content">
      <div class="item" v-for="(item,index) in socketData" :key="item.equipmentId">
        <div class="name">{{index===1?'二':'一'}}号变频器</div>
        <ul>
          <li>
            <div></div>
            <span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
          </li>
          <li>
            <div></div>
            <span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
          </li>
          <li>
            <div></div>
            <span>日用电量：{{ item.electricityConsumptionDay }}v</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oneTransducer: Object,
  twoTransducer: Object,
  list: Array
});
const socketData = ref([
  {
    electricityConsumptionDay: 234,
    electricityConsumptionMonthly: 345,
    electricityConsumptionTotal: 235,
    equipmentId: 22,
  },
  {
    electricityConsumptionDay: 234,
    electricityConsumptionMonthly: 345,
    electricityConsumptionTotal: 235,
    equipmentId:23,
  }
])
watch(() => props.list, (now, old) => {
  console.log('用电量',now,old)
  socketData.value = now
}, {deep: true});
</script>

<style lang="scss" scoped>
#used-ele {
  width: 830px;
  height: 351px;
  color: aliceblue;
  position: absolute;
  top: 1711px;
  left: 68px;
  background-image: url(../../../assets/images/usedEle/bg.png);
  padding: 21px 62px 35px 62px;

  .title {
    width: 96px;
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .content {
    //border: white solid 1px;
    height: calc(100% - 30px);
    margin-top: 4px;
    display: flex;

    .item {
      flex: 1;
      font-size: 12px;

      .name {
        width: 150px;
        height: 40px;
        font-size: 30px;
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: bold;
        color: #ffffff;
        line-height: 40px;
        margin: 24px 0px 28px 0px;
      }

      ul {
        font-size: 14px;

        li {
          display: flex;
          align-items: center;
          //width: 270px;
          height: 37px;
          font-size: 28px;
          font-family: MicrosoftYaHei;
          color: #cb7c4b;
          line-height: 37px;
          margin-bottom: 25px;
          padding-left: 5px;

          &:hover {
            cursor: pointer;
            width: 280px;
            //height: 46px;
            background: #2E5589;
            border-radius: 7px;
            color: #FBF7F4;

            > div {
              background-image: url(../../../assets/images/usedEle/white-ele.png);
            }
          }

          > div {
            width: 29px;
            height: 33px;
            background-image: url(../../../assets/images/usedEle/icon-all.png);
            margin-right: 14px;
          }

          &:nth-child(2) {
            > div {
              background-image: url(../../../assets/images/usedEle/icon-month.png);
            }

            &:hover {
              > div {
                background-image: url(../../../assets/images/usedEle/white-ele.png);
              }
            }
          }

          &:nth-child(3) {
            > div {
              background-image: url(../../../assets/images/usedEle/icon-day.png);
            }

            &:hover {
              > div {
                background-image: url(../../../assets/images/usedEle/white-ele.png);
              }
            }
          }
        }

        & > :nth-child(2) {
          color: #4bcb6b;
        }

        & > :nth-child(3) {
          color: #4bcbbc;
        }
      }
    }

    & > :nth-child(2) {
      transform: translateX(25px);
    }
  }
}
</style>
