<template>
  <div :class="['menu', {active:collapse}]" @click="fnCollapse">
    <img src="../../../assets/map/menu/back.png" alt="">
  </div>
</template>

<script>

export default {
  props: {
    collapse: {
      type: Boolean,
      default: true
    },
    componentKey: {
      type: Number,
      default: Math.random()
    }
  },
  methods: {
    fnCollapse() {
      this.$emit('update:collapse', !this.collapse)
      this.$emit('update:componentKey', Math.random())
    }
  }
}
</script>

<style lang="scss" scoped>
.menu {
  width: 30px;
  height: 89px;
  position: absolute;
  z-index: 99;
  left: 410px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../../../assets/map/menu/bg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;

  &.active {
    left: 0;

    img {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }

  img {
    width: 10px;
    height: 17px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
  }
}
</style>
