<template>
  <div
    v-show="visible"
    class="c-content-menu"
    :style="styleObj"
    @click="closeMenu"
    @mousedown.stop
  >
    <div
      class="c-content-menu__item"
      @click="deleteLayer"
    >
      <i class="iconfont iconguanbi" />
      删除图层
    </div>
    <div
      class="c-content-menu__item"
      @click="copyLayer"
    >
      <i class="iconfont iconfuzhi1" />
      复制图层
    </div>
    <div
      class="c-content-menu__item"
      @click="topLayer"
    >
      <i class="iconfont iconjinlingyingcaiwangtubiao01" />
      置顶图层
    </div>
    <div
      class="c-content-menu__item"
      @click="lowLayer"
    >
      <i class="iconfont iconleft-copy" />
      置底图层
    </div>
    <div
      class="c-content-menu__item"
      @click="upLayer"
    >
      <i class="iconfont iconjinlingyingcaiwangtubiao01" />
      上移一层
    </div>
    <div
      class="c-content-menu__item"
      @click="downLayer"
    >
      <i class="iconfont iconleft-copy" />
      下移一层
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentMenu',
  props: {
    styleObj: {
      type: Object,
      default () {
        return {}
      }
    },
    visible: {
      type: [Boolean, String],
      default: false
    }
  },
  watch: {
    visible (value) {
      if (value) {
        document.body.addEventListener('mousedown', this.closeMenu)
      } else {
        document.body.removeEventListener('mousedown', this.closeMenu)
      }
    }
  },
  methods: {
    closeMenu () {
      this.$emit('update:visible', false)
    },
    deleteLayer () {
      this.$confirm(
        '删除所选图层？',
        { type: 'warning' }
      ).then(() => {
        this.$emit('delete')
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    copyLayer () {
      this.$emit('copy')
    },
    topLayer () {
      this.$emit('top')
    },
    lowLayer () {
      this.$emit('low')
    },
    upLayer () {
      this.$emit('up')
    },
    downLayer () {
      this.$emit('down')
    }
  }
}
</script>

<style lang="scss" scoped>
.c-content-menu {
  position: fixed;
  width: 160px;
  padding: 0;
  list-style: none;
  color: #bcc9d4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: #27343e;
  z-index: 99999;

  &__item {
    z-index: 10000;
    list-style: none;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
    font-size: 12px;

    &:hover {
      background-color: darken(#27343e, 5%);
    }
  }

  .iconfont {
    padding-right: 6px;
    font-size: 12px;
  }
}
</style>
