<template>
  <div id="switchLeft" @click="changeLeftBoard()" :class="[mapStore.left_board?'switch-left-active':'switch-left']">
  </div>
  <div id="switchRight" @click="changeRightBoard()" :class="[mapStore.right_board?'switch-right-active':'switch-right']">
  </div>
</template>

<script>
import {useMapStore} from "@/store/mapStore.js";

export default {
  name: "BoardSwitch",
  setup(){
    const mapStore = useMapStore()
    const changeLeftBoard = () => {
      mapStore.left_board = !mapStore.left_board
    }
    const changeRightBoard = () => {
      mapStore.right_board = !mapStore.right_board
    }
    return {
      mapStore,
      changeLeftBoard,
      changeRightBoard
    }
  }
}
</script>

<style scoped langs="scss">
#switchLeft,#switchRight{
  position: absolute;
  z-index: 2;
  top: 500px;
  width: 26px;
  height: 56px;
  cursor: pointer;
}
#switchLeft{
  background-size: 100% 100%;
  left: 446px;
}
#switchRight{
  background-size: 100% 100%;
  right: 446px;
}
.switch-left-active{
  background: url("../../assets/imgs/switch-left.png") no-repeat;
  transition-property: transform;
  transition-duration:1s;
}
.switch-left{
  background: url("../../assets/imgs/switch-right.png") no-repeat;
  transition-property: transform;
  transition-duration:1s;
  transform: translateX(-460px);
}
.switch-right-active{
  background: url("../../assets/imgs/switch-right.png") no-repeat;
  transition-property: transform;
  transition-duration:1s;
}
.switch-right{
  background: url("../../assets/imgs/switch-left.png") no-repeat;
  transition-property: transform;
  transition-duration:1s;
  transform: translateX(460px);
}
</style>