<template>
  <div class="foldPane-bottom">
    <div class="panel-container">
      <div class="fold-btn" @click="togglePanel()">
        <img
          :src="
            panel.bottomPanel
              ? require('@/assets/images/ui/arrow_left.jpg')
              : require('@/assets/images/ui/arrow_right.jpg')
          "
          alt=""
        />
      </div>
      <div :class="['panel-main', { collapsed: panel.bottomPanel }]">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["panel"]),
  },

  created() {},
  methods: {
    togglePanel() {
      this.$store.commit("SET_PANEL", { bottomPanel: !this.panel.bottomPanel });
    },
  },
};
</script>

<style lang="scss" scoped>
.foldPane-bottom {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 10;
  transform: translateX(-50%);
  width: calc(100% - (390px * 2));
  .panel-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    .fold-btn {
      cursor: pointer;
      margin: auto;
      transform: translateY(10px) rotate(-90deg);
      height: 40px;
      width: 20px;
      img {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    .panel-main {
      position: relative;
      width: 100%;
      height: 250px;
      overflow: hidden;
      transition: width 0.3s ease;
      background: url("~@/assets/images/ui/panel_bottom.png");
      background-size: 100% 100%;
      transition: height 0.3s ease;
    }
    .collapsed {
      height: 0;
    }
  }
}
</style>
