<template>
  <div class="c-info">
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">厂商名称</div>
        <div class="l-flex__fill c-info__value">{{ manufacturer }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">设备IP</div>
        <div class="l-flex__fill c-info__value">{{ ip }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">设备型号</div>
        <auto-text
          class="l-flex__fill c-info__value"
          :text="screen"
        />
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">设备类型</div>
        <div class="l-flex__fill c-info__value">{{ type }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">温度监测</div>
        <div class="l-flex__fill c-info__value">{{ temperature }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">电压监测</div>
        <div class="l-flex__fill c-info__value">{{ voltage }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReceivingCardInfo',
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  computed: {
    manufacturer () {
      return this.info.manufacturerName
    },
    screen () {
      return this.info.screen
    },
    type () {
      return this.info.async ? '异步盒' : '非异步盒'
    },
    temperature () {
      return this.info.temperature ? '支持' : '不支持'
    },
    voltage () {
      return this.info.voltage ? '支持' : '不支持'
    },
    ip () {
      return this.info.ip
    }
  }
}
</script>
