<!-- 弹框 -->
<template>
  <div class="topo_tooltip">
    <div v-if="havItem" class="tooltip-card">
      <ul>
        <li @click="editItem">编辑</li>
        <li @click="setLock">{{isLock?'解锁':"锁定"}}</li>
        <li @click="toTop">置顶</li>
        <li @click="toBottom">置底</li>
        <li @click="deleteItem">删除</li>
      </ul>
    </div>
    <div v-else class="tooltip-card">
      <ul>
        <li @click="saveGraph">保存</li>
        <li @click="publishGraph">发布</li>
        <li @click="downPng">下载</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { SItemStatus } from "@persagy-web/big";
import bus from "@/bus/bus";
export default {
  props: ["havItem","isLock"],
  name: "topoTooltip",
  data() {
    return {};
  },
  methods: {
    // 编辑图例
    editItem() {
      bus.$emit("setItemStatus");
      this.closetooltip();
    },
    setLock() {
      bus.$emit("tooltipLock");
      this.closetooltip();
    },
    // 置顶
    toTop() {
      bus.$emit("setOrder", "Top");
      this.closetooltip();
    },
    // 置底
    toBottom() {
      bus.$emit("setOrder", "Bottom");
      this.closetooltip();
    },
    // 删除
    deleteItem() {
      bus.$emit("deleteItem");
      this.closetooltip();
    },
    // 保存图
    saveGraph() {
      bus.$emit('saveTopo');
      this.closetooltip();
    },
    // 发布图
    publishGraph() {
      bus.$emit('issueTopo');
      this.closetooltip();
    },
    // 下载
    downPng() {
      bus.$emit('saveTopoImg');
      this.closetooltip();
    },
    // 关闭窗口
    closetooltip() {
      this.$emit("closeTooltip");
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.topo_tooltip {
  position: relative;
  .tooltip-card {
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(31, 35, 41, 0.1);
    background: #fff;
    font-size: 0;
    ul {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        width: 100px;
        box-sizing: border-box;
        border-radius: 0;
        padding: 8px 0 8px 12px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #ffff;
        color: #1f2328;
        font-size: 12px;
      }
      li:hover {
        background: #f5f6f7;
      }
    }
  }
}
</style>