<template>
  <div class="popupdefect">
    <!-- 全局地图点位卡片 -->
    <!-- 厂站工情 -->
    <div class="publicMapTips2"
         id="czgqBox"
         v-if="showCzxq">
      <div class="close">
        <n-icon size="24"
                @click="closepopupdefect()">
          <Close />
        </n-icon>
      </div>
      <div class="title">{{params.name}}</div>
      <div class="content">
        <div class="part">
          <div class="name">养护情况：</div>
          <div class="value">—</div>
        </div>
        <div class="part">
          <div class="name">巡检问题：</div>
          <div class="value"
               id="warn">18</div>
        </div>
        <div class="part">
          <div class="name">设备完好率：</div>
          <div class="value">17%</div>
        </div>
        <div class="part">
          <div class="name">巡检工单：</div>
          <div class="value">—</div>
        </div>
        <div class="part">
          <div class="name">保养工单：</div>
          <div class="value">12</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";


export default defineComponent({
  name: "YWPopup",
  components: {
    Close,
    NIcon,
  },
  props: {
    params: {
      type: Object,
      default: () => new Object({}),
    },
  },
  setup(props) {
    const allData = reactive({
      showCzxq: false,

    });
    // 关闭事件
    const closepopupdefect = () => mapbox.closeMarkerPopup();
    const popupData = (object) => {
      console.log("点位数据--", object);
      allData.showCzxq = true;
    };

    onMounted(() => {
      if (Object.keys(props.params).length == 0) return;
      popupData(props.params);
    });
    onBeforeUnmount(() => {

    })
    return {
      ...toRefs(allData),
      closepopupdefect,
    };
  },
});
</script>

<style scoped lang="less">
.popupdefect {
  position: absolute;
  bottom: 223px;
  background: #034259d5;
  z-index: 99999999;
  #czgqBox {
    .part {
      width: 50%;
      padding-left: 20px;
      font-size: 14px;
      line-height: 26px;
      .name {
        width: 100px;
        font-weight: bold;
        color: #14ccca;
      }
    }
    .gongyt {
      color: yellow;
      cursor: pointer;
    }
  }
}
</style>