<template>
  <div class="user-wrapper">
    <div class="title">{{ deviceData.pipeName }}</div>
    <div class="close" @click="close">
      <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
      <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
    </div>

    <div class="group flex first">
      <div class="left first">管道名称：</div>
      <div class="right zzz">{{ deviceData.pipeName }}</div>
      <div class="left">管道长度：</div>
      <div class="right last">{{ deviceData.pipeLength }}m</div>
    </div>

    <div class="group flex">
      <div class="left first">管径：</div>
      <div class="right zzz">
        {{ deviceData.pipeDiameter }}mm
      </div>
      <div class="left">管道壁厚：</div>
      <div class="right last">{{ deviceData.pipeThickness }}mm</div>
    </div>

    <div class="group flex">
      <div class="first left">压力：</div>
      <div class="right">{{ deviceData.pipePressure }}kpa</div>
      <div class="left">材质：</div>
      <div class="right last">{{ materialFormatte(deviceData) }}</div>
    </div>

    <div class="group flex">
      <div class="left first">管道地址：</div>
      <div class="right zzz" :title="deviceData.pipeAddr">{{ deviceData.pipeAddr }}</div>
      <div class="left">敷设方式：</div>
      <div class="right last zzz">
        {{ layTypeFormatte(deviceData) }}
      </div>
    </div>
    <div class="group flex">
      <div class="first left">埋深：</div>
      <div class="right">{{ deviceData.buriedDepth }}m</div>
      <div class="left">架空高度：</div>
      <div class="last right">{{ deviceData.overhead }}m</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "pipe-info",
    created(){
      this.getMaterialType();
      this.getLayType();
    },
    data(){
      return{
        materialType: [],
        layType: []
      }
    },
    methods:{
      close() {
        this.mapClass.infowindowClose();
      },
      //材质类型
      getMaterialType(){
        this.getDicts("t_pipe_material").then((response) => {
            this.materialType = response.data;
        });
      },
      //敷设方式类型
      getLayType(){
        this.getDicts("t_lay_type").then((response) => {
            this.layType = response.data;
        });
      },
      //材质格式化
      materialFormatte(row){
        return this.selectDictLabel(
          this.materialType,
          row.pipeMaterial
        );
      },
      //敷设方式格式化
      layTypeFormatte(row){
        return this.selectDictLabel(
          this.layType,
          row.layType
        );
      },
    }
  }
</script>

<style scoped lang="scss">
  .user-wrapper {
    box-shadow: 0px 0px 10px #54e0ef inset;
    background-color: #071738;
    padding: 10px;
    position: relative;
    width: 500px;
    border-radius: 7px;
    .title {
      font-size: 14px;
      line-height: 14px;
      color: #ffffff;
    }
    .close {
      position: absolute;
      right: 10px;
      top: 5px;
      cursor: pointer;
    }
    .group {
      border-top: none;
      height: 28px;
      font-size: 14px;
      line-height: 28px;
      color: #ffffff;
      &.first {
        margin-top: 10px;
      }
      div {
        flex: 1;
      }
      .left {
        text-align: right;
      }
      .right {
        box-sizing: border-box;
        text-align: left;
        padding: 0 1em;
      }
      .last {
        border: none;
      }
      .once {
        flex: 1;
      }
      .pipeAddr {
        flex: 3;
        padding: 0 3em 0 1em;
      }
    }
    .flex {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
