<template>
  <div class="devicea-wrapper">
    <div class="title">
      {{ deviceData.number }}
    </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.number }}</div>
          </div>

          <div class="group">
            <div class="left last">安装位置：</div>
            <div
              :title="deviceData.position"
              class="right last zzz"
            >
              {{ deviceData.position || "-" }}
            </div>
          </div>

          <div class="group">
            <div class="left">上报数值：</div>
            <div class="right zzz">{{ deviceData.nd }}</div>
          </div>
        </div>

        <div class="top-center">
          <div class="group">
             <div class="left">设备状态：</div>
             <div class="right zzz">
               {{ deviceStatusFormat(deviceData)}}
             </div>
           </div>

          <div class="group">
            <div class="left">报警开始时间：</div>
            <div class="right zzz">{{ deviceData.starttime }}</div>
          </div>

          <div class="group">
            <div class="left">报警状态：</div>
            <div class="right zzz">{{ statusFormat(deviceData) }}</div>
          </div>
        </div>
      </div>

      <div style="text-align: right">
        <el-button
          type="primary"
          size="small"
          @click="toDeal"
        >
          去处置
        </el-button>
      </div>

    </div>
  </div>
</template>

<script>
    export default {
      name: "device-info",
      data(){
        return{
          // 报警状态字典
          statusOptions: [],
          deviceStatus: [],
        }
      },
      created(){
        this.getDicts("t_gas_alarm_status").then(response => {
            this.statusOptions = response.data;
        });
        this.getDicts("t_device_status").then(response => {
            this.deviceStatus = response.data;
        });
      },
      methods:{
        close() {
          this.mapClass.infowindowClose();
        },
        // 报警状态字典翻译
        statusFormat(row) {
          return this.selectDictLabel(this.statusOptions, row.status);
        },
        deviceStatusFormat(row) {
          const deviceStatus = this.selectDictLabel(this.deviceStatus, row.reportStatus);
          return deviceStatus ? deviceStatus : "-";
        },
        toDeal(){
          this.vueRoot.$router.push({path:"/reportinfo/alarm"});
        }
      }
    }
</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>
