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

          <div class="group">
            <div class="left last">联系人：</div>
            <div
              :title="deviceData.stationDetail"
              class="right last zzz"
            >
              {{ deviceData.username }}
            </div>
          </div>

          <div class="group">
            <div class="left">流量计品牌：</div>
            <div class="right zzz">{{ meterCompanyFormatte(deviceData) }}</div>
          </div>

          <div class="group">
            <div class="left">营业网点：</div>
            <div class="right zzz">{{ getbranch(deviceData) }}</div>
          </div>

          <!--<div class="group">
            <div class="left">最大储气量：</div>
            <div class="right zzz">{{ deviceData.bigStorage }}(m³/t)</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
              :title="deviceData.address"
              class="right zzz"
            >
              {{ deviceData.address }}
            </div>
          </div>


        </div>
        <div class="top-center">
          <div class="group">
             <div class="left">生产品种：</div>
             <div class="right zzz">

               {{ deviceData.contract }}
             </div>
           </div>

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

          <div class="group">
            <div class="left">流量计型号：</div>
            <div class="right zzz">{{ gasSourceFormatte(deviceData.type) }}</div>
          </div>

          <div class="group">
            <div class="left">安检类型：</div>
            <div class="right zzz" >
              <span v-if="deviceData.taskType == '1'" title="华鑫季度一检">华鑫季度一检</span>
              <span v-else-if="deviceData.taskType == '2'" title="鸿海季度一检"> 鸿海季度一检</span>
              <span v-else>-</span>
            </div>
          </div>

          <div class="group">
            <div class="left">开通状态：</div>
            <div class="right zzz">{{ statusFormatte(deviceData) }}</div>
          </div>


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

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

<script>
    export default {
      name: "device-info",
      data(){
        return{
          meterCompany: [],
          branchOptions: [],
          statusOptions: []
        }
      },
      created(){
        this.getMeterCompany();
        this.getGasSource();
        this.getStatusType();
        this.getDangerousType();

      },
      methods:{
        close() {
          this.mapClass.infowindowClose();
        },
        //流量计品牌
        getMeterCompany(){
          this.getDicts("t_business_factory_meter_type").then((response) => {
              this.meterCompany = response.data;
          });
        },
        //气源中类
        getGasSource(){
          this.getDicts("t_gas_source").then((response) => {
              this.gasSource = response.data;
          });
        },
        //营业网点
        getDangerousType(){
          this.getDicts("t_branch").then((response) => {
              this.branchOptions = response.data;
          });
        },
        getStatusType(){
          this.getDicts("t_user_status").then((response) => {
            this.statusOptions = response.data;
        });
        },

        //品牌
        meterCompanyFormatte(row){
          return this.selectDictLabel(
            this.meterCompany,
            row.usernum
          );
        },
        //流量计型号
        gasSourceFormatte(num){
          if(num==1){
            return "DN25";
          }else if(num==2){
            return "DN50";
          }else if(num==3){
            return "DN80";
          }else if(num==4){
            return "DN100";
          }else if(num==5){
            return "DN150";
          }else if(num==5){
            return "DN200";
          }
            return "";
        },
        getbranch(row){
          return this.selectDictLabel(
            this.branchOptions,
            row.branch
          );
        },

        //危险源级别
        statusFormatte(row){
          return this.selectDictLabel(
            this.statusOptions,
            row.status
          );
        },
      }
    }
</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.2;
        .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>
