<template>
  <div>
    <div class="device" v-for="i in list" :key="i">
      <div class="device-name">{{ i.devName }}</div>
      <div class="info">
        <img class="image" :src="i.installationImage" />
        <div class="detail">
          <div class="detail-item green">状态：{{ i.devOnline == 1 ? '在线' : '离线' }}</div>
          <div class="detail-item grey">设备状态：{{devStateList[i.devState]}}</div>
          <div class="detail-item orange">类型：{{i.elevatorType==0?'单笼':'多笼'}}</div>
          <div class="detail-item">额定人数:{{i.ratedPeopleNum}}</div>
          <div class="detail-item">最大载重：{{i.maxLoad}}</div>
          <div class="detail-item">最大高度：{{i.maxHeight}}</div>
          <div class="detail-item">承包企业：{{i.generalContractorsName}}</div>
        </div>
      </div>
    </div>
    <div v-if="(list.length==0)" style="font-size: 14px;color: #999;text-align: center;margin-top: 120px;">暂无数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      devStateList:{
        1:'设备进场',2:'设备安装',3:'设备验收',4:'设备使用',5:'设备拆除',6:'设备退场'
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {

  },
  created() {

  },
}
</script>
<style lang="less" scoped>
.devices {
  padding-left: 20px;
  height: 100%;
  color: #fff;

  .device {
    width: 100%;
    // margin-top: 12px;

    .device-name {
      // margin-top: 20px;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
    }

    .info {

      line-height: 22px;
      font-size: 12px;
      color: #68d8e4;
      display: flex;

      .image {
        margin-right: 20px;
        width: 170px;
        height: 140px;
      }
    }
  }

  .green {
    color: #46d7b6;
  }

  .grey {
    color: #9da1aa;
  }

  .orange {
    color: #e7622a;
  }
}
</style>