<template>
  <div class="popupBengji">
    <!-- 全局地图点位卡片 -->
    <!-- 感知网-厂站工情 -->
    <div class="publicMapBengji" id="bengjiPopup" v-if="showCzxq">
      <div class="content">
        <div class="part">
          <div class="name">当前水位：</div>
          <div class="value">15.47m</div>
        </div>
        <div class="part">
          <div class="name">坐标位置：</div>
          <div class="value">114.3022569,30.6724197</div>
        </div>
        <div class="part">
          <div class="name">抽排量：</div>
          <div class="value">0m³</div>
        </div>
        <div class="part">
          <div class="name">开机台数：</div>
          <div class="value">0</div>
        </div>
        <div class="part">
          <div class="name">起排水位：</div>
          <div class="value">17m</div>
        </div>
        <!-- <div class="part">
          <div class="name_1">开机时长：</div>
          <div class="value"></div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch, defineComponent, onBeforeUnmount, nextTick } from 'vue';
import { Close } from '@vicons/ionicons5';
import { NIcon } from 'naive-ui';
import bus from '@/utils/util';

import { formatDate } from '@/utils/util';

export default defineComponent({
  name: 'popupdefect',
  components: {
    Close,
    NIcon,
  },
  props: {
    params: {
      type: Object,
      default: () => new Object({}),
    },
  },
  setup(props) {
    const allData = reactive({
      popupInfo: null,
      showCzxq: false,
      echartHistorys: null,
    });

    onMounted(() => {
      bus.on('bengjiPopupShow', (e) => {
        allData.showCzxq = e;
      });
    });
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
    };
  },
});
</script>

<style lang="less">
.publicMapBengji {
  position: absolute;
  background: #034259d5;
  z-index: 99;
}
#bengjiPopup {
  .content {
    width: 280px;
    .part {
      display: flex;
      margin-left: 10px;
      font-size: 14px;
      line-height: 26px;
      .name {
        width: 80px;
        font-weight: bold;
        color: #14ccca;
      }
    }
    .img {
      width: 100%;
    }
    #echartHistory {
      width: 100%;
      height: 160px;
      margin-top: 10px;
    }
  }
  .gongyt {
    color: yellow;
    cursor: pointer;
  }
}
</style>