<template>
  <transition
    enter-active-class="animate__animated animate__slideInRight"
    leave-active-class="animate__animated animate__slideOutRight"
    :duration="500"
    mode="out-in"
  >
    <div v-show="show" class="layer-choose-window">
      <div class="window-title">
        <div>
          <i class="el-icon-suitcase-1" /> 工具箱
        </div>
        <i class="el-icon-close close-icon" @click="close" />
      </div>
      <div class="menu-list">
        <div class="menu-item" @click="clickMenu">
          <i class="el-icon-coordinate" /> 位置纠偏
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'PopupLayerChoose',
  props: {
    show: {
      type: Boolean,
      default: false
    } // 是否显示窗口
  },
  data() {
    return {
    }
  },
  methods: {
    // 关闭窗口
    close() {
      this.$emit('close')
    },
    // 点击工具箱中菜单项 (子组件向父组件传参)
    clickMenu() {
      this.$emit('click-menu')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menu-list{
  padding: 10px 20px;
  .menu-item{
    width: 100%;
    padding: 5px 10px;
    i{
      margin-right: 5px;
    }
    &:hover{
      cursor: pointer;
      background-color: #8cc5ff;
      color: #FFF;
    }
  }
}
.layer-choose-window{
  position: absolute;
  right: 10px;
  top: 50px;
  width: 200px;
  background-color: rgba(255,255,255,0.9);
}
.window-title{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255,255,255,0.9);
  padding: 0px 10px;
  .close-icon:hover{
    cursor: pointer;
    color: #36a3f7;
  }
}
</style>