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

<script>
import { mapGetters } from "vuex";
import introduceTitle from "@/views/components/introduceTitle";
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  components: {
    introduceTitle,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["panel"]),
  },
  methods: {
    togglePanel() {
      this.$store.commit("SET_PANEL", { leftPanel: !this.panel.leftPanel });
    },
  },
};
</script>

<style lang="scss" scoped>
.fold-panel {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  height: 100%;
  box-sizing: border-box;
  padding-top: 100px;
  cursor: pointer;
  background: url("~@/assets/images/ui/panel_left.png");
  background-size: 100% 100%;
  .panel-container {
    position: relative;
    height: 100%;
    .fold-btn {
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      height: 40px;
      width: 20px;
      img {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    .panel-main {
      position: relative;
      width: 390px;
      height: 100%;
      overflow: hidden;
      transition: width 0.3s ease;
      .panel-box {
        position: absolute;
        left: 25px;
        right: 25px;
        height: 100%;
        width: calc(390px - 50px);
        display: flex;
        flex-direction: column;
      }
    }
    .collapsed {
      width: 0;
    }
  }
}
</style>
