<template>
  <div id="transducer-list">
    <div v-for="(item,index) in socketData" :key="item.equipmentId">
      <div class="transducer-item">
        <img src="@/assets/images/transducer/sp_icon_dy.png"/>
        <div class="info">
          <div class="name-state">
            <div class="name">{{index===1?'二':'一'}}号变频器</div>
            <div class="state">
              <img src="@/assets/images/transducer/greenLight.png"/>
              <span>正常</span>
            </div>
          </div>
          <div class="one-item">
            <div>A相电压:{{ item.phaseVoltageA }}V</div>
            <div>B相电压:{{ item.phaseVoltageB }}V</div>
            <div>C相电压:{{ item.phaseVoltageC }}V</div>
          </div>
        </div>
      </div>
      <div class="transducer-item">
        <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
        <div class="info">
          <div class="name-state">
            <div class="name">{{index===1?'二':'一'}}号变频器</div>
            <div class="state" v-if="item.phaseCurrentB>'100'">
              <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
              <span style="color: red">异常</span>
            </div>
            <div class="state" v-else>
              <img src="@/assets/images/transducer/greenLight.png" alt=""/>
              <span>正常</span>
            </div>
          </div>
          <div class="one-item">
            <div>A相电流:{{ item.phaseCurrentA }}A</div>
            <div :style="{'color':item.phaseCurrentB>'100'?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
            <div>C相电流:{{ item.phaseCurrentC }}A</div>
          </div>
        </div>
      </div>
      <div class="transducer-item">
        <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
        <div class="info">
          <div class="name-state">
            <div class="name">{{index===1?'二':'一'}}号变频器</div>
            <div class="state">
              <img src="@/assets/images/transducer/greenLight.png"/>
              <span>正常</span>
            </div>
          </div>
          <div class="other-item frequency">
            <div>
              <img
                  src="@/assets/images/transducer/icon2.png"
                  alt=""
              /><span>给定频率:{{ item.frequencySetting }}HZ</span>
            </div>
            <div>
              <img
                  src="@/assets/images/transducer/icon2.png"
                  alt=""
              /><span>反馈频率:{{ item.frequencyFeedback }}HZ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: Array,
  feedback: Array,
});
const socketData = ref([
  {
    equipmentId: 23,
    phaseCurrentA: '124.01',
    phaseCurrentB: '124.51',
    phaseCurrentC: '125.01',
    phaseVoltageA: '404.01',
    phaseVoltageB: '404.51',
    phaseVoltageC: '414.01',
    frequencySetting: '23',
    frequencyFeedback: '23'
  },
  {
    equipmentId: 23,
    phaseCurrentA: '124.01',
    phaseCurrentB: '124.51',
    phaseCurrentC: '125.01',
    phaseVoltageA: '404.01',
    phaseVoltageB: '404.51',
    phaseVoltageC: '414.01',
    frequencySetting: '23',
    frequencyFeedback: '23'
  }
])
const contactData=ref([])
watch(() => props.list, (now, old) => {
  console.log('电流电压',now,contactData.value)
  let obj={}
  let arr=[]
  contactData.value.forEach(contactItem=>{
    now.forEach(item=>{
      if(contactItem.equipmentId===item.equipmentId){
        obj={
          ...item,
          frequencySetting: contactItem.frequencySetting,
          frequencyFeedback: contactItem.frequencyFeedback
        }
        arr.push(obj)
      }
    })
  })
  socketData.value=arr
}, {deep: true});
watch(() => props.feedback, (now, old) => {
  console.log('变频器频率',now)
  contactData.value=now
}, {deep: true});
</script>

<style lang="scss" scoped>
#transducer-list {
  color: rgb(226, 26, 26);
  position: absolute;
  top: 744px;
  left: 70px;
  width: 826px;
  height: 928px;
  background-image: url(@/assets/images/transducer/bg.png);
  padding: 0 30px;

  .transducer-item {
    border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
    //height: 148px;
    display: flex;
    align-items: center;
    padding: 30px 0 30px 8px;

    & > img {
      height: 70px;
      width: 70px;
    }

    .info {
      // border: white solid 1px;
      //padding: 2px 5px;
      flex: 1;
      //height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name-state {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0 18px;

        margin-bottom: 16px;

        .name {
          width: 155px;
          height: 40px;
          font-size: 30px;
          font-weight: bold;
          color: #38cafb;
          line-height: 40px;
        }

        .state {
          width: 80px;
          height: 31px;
          font-size: 24px;
          font-weight: bold;
          color: #19d172;
          line-height: 31px;

          img {
            height: 20px;
            margin-right: 5px;
          }
        }
      }

      .one-item,
      .other-item {
        //height: 47px;
        display: flex;
        justify-content: space-between;
        color: white;
        align-items: center;
        font-size: 26px;
        line-height: 37px;
        padding: 0 0 0 18px;

        img {
          margin-right: 14px;
        }
      }

      .frequency {
        justify-content: flex-start;

        > div:first-child {
          margin-right: 40px;
        }
      }
    }
  }

  .isFirst {
    border: none;
    height: calc(155px - 30px);
  }
}
</style>
