<!--
 * @Author: your name
 * @Date: 2022-04-21 13:50:28
 * @LastEditTime: 2022-04-21 16:51:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/Infowindow.vue
-->
<template>
  <div class="tooltip-box all-flex-h" ref="self">
    <div class="title">{{ data.name }}详情信息</div>
    <!-- <div v-show="true" @click="close" class="close"></div> -->
    <div class="bottom-wrapper all-flex-h">
      <div class="bottom flex">
        <div class="left">驻村安全员</div>
        <div class="middle"></div>
        <div class="right">{{data.index}}名</div>
      </div>

      <div class="bottom flex">
        <div class="left">燃气协管员</div>
        <div class="middle"></div>
        <div class="right">{{data.b}}名</div>
      </div>

      <div class="bottom flex">
        <div class="left">气代煤</div>
        <div class="middle"></div>
        <div class="right">{{data.c}}个</div>
      </div>

      <div class="bottom flex">
        <div class="left">电代煤</div>
        <div class="middle"></div>
        <div class="right">{{data.d}}个</div>
      </div>

      <div class="bottom flex">
        <div class="left">隐患处置</div>
        <div class="middle"></div>
        <div class="right">{{data.e}}件</div>
      </div>

      <div class="bottom flex">
        <div class="left">事故数量</div>
        <div class="middle"></div>
        <div class="right">{{data.f}}件</div>
      </div>

      <div class="bottom flex">
        <div class="left">城镇用户/加装率</div>
        <div class="middle"></div>
        <div class="right">{{data.g}}%</div>
      </div>

      <div class="bottom flex">
        <div class="left">农村用户/加装率</div>
        <div class="middle"></div>
        <div class="right">{{data.h}}%</div>
      </div>

      <div class="bottom flex">
        <div class="left">单位用户/加装率</div>
        <div class="middle"></div>
        <div class="right">{{data.i}}%</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      data: null,
    };
  },
  methods: {
    close() {
      const dom = document.getElementsByClassName("tooltip-box")[0];
      const parent = dom.parentElement;
      parent.removeChild(dom);
      this.parent.closeToolTip();
    },
  },
  mounted(){
    console.log("data",this.data)
  }
};
</script>
<style lang="scss" scoped>
.tooltip-box {
  width: 213px;
  height: 255px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  box-shadow: inset 0px 0px 7px 1px rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  font-size: 12px;
  position: relative;
  pointer-events: auto !important;
  justify-content: space-between;

  .title {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 3px 0 3px 0;
    padding: 4px 14px;
  }
  .close {
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 14px;
    width: 10px;
    height: 10px;
    cursor: pointer;
    opacity: 1;
    &:hover {
      opacity: 0.8;
    }
    &:before,
    &:after {
      position: absolute;
      right: 5px;
      top: 0px;
      content: "";
      height: 12px;
      width: 1px;
      background-color: #fff;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
  .bottom-wrapper {
    justify-content: space-between;
    flex: 1;
    box-sizing: border-box;
    padding: 5px 0;
    .bottom {
      flex: 1;
      padding: 0 14px;
      font-size: 12px;

      .left {
      }
      .right {
        color: #eec25b;
      }
      .middle {
        margin: 10px 2px;
        flex: 1;
        height: 1px;
        background: repeating-linear-gradient(
          90deg,
          transparent 0px,
          #fff 10px,
          #fff 10px,
          #fff 10px
        );
      }
    }
  }
}
</style>

