<template>
  <div class="deviceList">
    <div class="deviceItem" v-for="d in devices" :key="d.id">
      <div class="line"></div>
      <div class="title">
        {{ d.monitorCode }}
      </div>
      <div class="content">
        <div class="name">
          {{ d.monitorName }}
        </div>
        <div class="list" v-for="i in d.data">
          <div class="value">{{ i.value }}</div>
          <div class="units">{{ i.units }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceList',
  props: ['devices'],
}
</script>

<style scoped lang="less">
.deviceList {
  display: flex;
  flex-direction: row; /* 横向排列设备 */
  gap: 20px;
  position: relative;
}


.line {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(100%, -50%);
  height: 1px;
  width: 20px;
  background: #fff;
}

.deviceItem {
  padding: 6px 20px;
  color: #fff;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 100px;

  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #fff;
    border-bottom: 0;
  }

  .content {
    width: 100%;
    height: auto;
    border: 1px solid #fff;

    .name {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-bottom: 1px solid #fff;
    }

    .list {
      height: 40px;
      line-height: 40px;
      white-space: nowrap;

      .value {
        display: inline-block;
        min-width: 100px;
        margin-right: 20px;
        text-align: center;
      }

      .units {
        display: inline-block;
        min-width: 50px;
      }
    }
  }
}
</style>
