<template>
  <div class="devicea-wrapper">
    <div class="title">
      {{ deviceData.deviceName }}
    </div>
    <div class="close" @click="close">
      <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
    </div>
    <p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
    <div>
      <div class="top flex">
        <div class="top-left">
          <div class="group">
            <div class="left">设备名称：</div>
            <div class="right zzz">{{ deviceData.deviceName }}</div>
          </div>

          <div class="group">
            <div class="left last">所在地址：</div>
            <div
              :title="deviceData.deviceAddr"
              class="right last zzz"
            >
              {{ deviceData.deviceAddr || "-" }}
            </div>
          </div>

          <div class="group">
            <div class="left">联系人：</div>
            <div class="right zzz">{{ deviceData.linkman }}</div>
          </div>

          <div class="group">
            <div class="left">安装时间：</div>
            <div class="right zzz">{{ deviceData.installationTime }}</div>
          </div>

        </div>
        <div class="top-center">
          <div class="group">
             <div class="left">设备编号：</div>
             <div class="right zzz">
               {{ deviceData.deviceCode }}
             </div>
           </div>

          <div class="group">
            <div class="left">设备型号：</div>
            <div class="right zzz">{{ deviceData.deviceModel }}</div>
          </div>

          <div class="group">
            <div class="left">电话：</div>
            <div class="right zzz">{{ deviceData.phone }}</div>
          </div>

        </div>
        <div class="top-right">
          <div class="left last">照片：</div>
          <el-image
            v-if="deviceData.iconUrl"
            style="width: 80px; height: 80px"
            :src="deviceData.iconUrl"
            :preview-src-list="[deviceData.iconUrl ]"
            :z-index="999999"
          >
          </el-image>
          <div class="imgtext" v-else>暂无图片</div>
        </div>
      </div>

      <!--<div class="foot">
         <div class="thead flex" v-if="list.length > 0">
           <div class="first">设备类型</div>
           <div>设备数量</div>
           <div>在线设备</div>
           <div>离线设备</div>
           &lt;!&ndash; <div>历史报警</div>
           <div>已处理报警</div> &ndash;&gt;
           <div class="last">报警中</div>
         </div>
         <template v-if="list.length > 0">
           <div
             class="tbody flex"
             v-for="deviceData in list"
             :key="deviceData.inAlarm + Math.random()"
           >
             <div v-unValue class="first zzz">
               {{ typeList[deviceData.dataType] }}
             </div>
             <div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
             <div v-unValue class="">
               {{ deviceData.onlineEquipment }}
             </div>
             <div v-unValue class="">
               {{ deviceData.offlineEquipment }}
             </div>
             &lt;!&ndash; <div v-unValue class="">
               {{ deviceData.historicalAlarm }}
             </div>
             <div v-unValue class="">
               {{ deviceData.alarmProcessed }}
             </div> &ndash;&gt;
             <div v-unValue class="last">
               {{ deviceData.inAlarm }}
             </div>
           </div>
         </template>
      </div>-->
    </div>
  </div>
</template>

<script>
    export default {
      name: "device-info",
      methods:{
        close() {
          this.mapClass.infowindowClose();
        },
      }
    }
</script>

<style scoped lang="scss">
  .devicea-wrapper {
    box-shadow: 0px 0px 10px #54e0ef inset;
    background-color: #071738;
    padding: 10px;
    position: relative;
    width: 670px;
    border-radius: 7px;
    .title {
      // padding-top: 10px;
      // padding-left: 10px;
      font-size: 14px;
      line-height: 14px;
      color: #ffffff;
    }
    .close {
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;
    }

    .top {
      margin-top: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      .top-left {
        flex: 1.8;
        .group {
          height: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          div {
            flex: 1;
            box-sizing: border-box;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            padding: 0 5px;
            &.last {
              border-bottom: none;
            }
          }
          .left {
            text-align: right;
          }
          .right {
            flex:2;
          }
        }
      }
      .top-center {
        flex: 1.8;
        .group {
          height: 30px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          div {
            flex: 1;
            box-sizing: border-box;
            font-size: 14px;
            color: #ffffff;
            line-height: 30px;
            padding: 0 5px;
            &.last {
              border-bottom: none;
            }
          }
          .left {
            text-align: right;
          }
          .right {
            flex:0.9;
          }
        }
      }
      .top-right {
        flex: 1;
        display: flex;
        justify-content: center;
        div {
          width: 50px;
          font-size: 14px;
          color: #ffffff;
          &.last {
            border-bottom: none;
          }
        }
        .imgtext {
          color: #ffffff;
          font-size: 30px;
        }
      }
    }
    .foot {
      font-size: 14px;
      color: #ffffff;
      background: url(~@/assets/firstimage/box-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 1px;
      .thead,
      .tbody {
        div {
          flex: 1;
          text-align: left;
          box-sizing: border-box;
          text-align: center;
          border: 1px solid #1b365d;
        }
      }
      .tbody {
        border-top: none;
      }
    }

    .btn {
      position: relative;
      margin-top: 10px;
      div {
        font-size: 14px;
        color: #ffffff;
        background: url(~@/assets/firstimage/boxbtn-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 7px 15px;
      }
    }
    .flex {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
