<template>
  <div class="flexContainer flexColumn">
    <div class="flexItems flexRow flexStretch">
      <!-- left -->
      <div
        v-if="left"
        class="flexItem noChild bordered"
        :class="[{ 'class-collapse': leftCollapse }, leftWithRate]"
      >
        <section class="message">
          <div
            class="message-header level"
            :class="{ 'collapse-message': leftCollapse }"
          >
            <div
              class="level-left"
              :class="{ 'collapse-item': leftCollapse }"
            >
              <b-button
                class="collapse-btn"
                @click="leftCollapse = !leftCollapse"
              >
                {{ leftCollapse ? "▼" : "▶" }}
              </b-button>
              <p v-show="!leftCollapse">
                {{ leftTitle }}
              </p>
            </div>
          </div>
          <div
            v-show="!leftCollapse"
            class="message-body"
          >
            <slot name="left" />
          </div>
        </section>
      </div>

      <!-- Center  -->
      <div
        class="flexItem"
        :class="[{ mainItem: rightCollapse || leftCollapse }, mainWithRate]"
      >
        <div class="flexItems flexColumn">
          <!-- Top -->
          <div
            v-if="top"
            class="flexItem is-12 noChild bordered"
          >
            <section class="message">
              <div
                class="message-header level"
                :class="{ 'collapse-message': topCollapse }"
              >
                <div class="level-left">
                  <b-button
                    class="collapse-btn"
                    @click="topCollapse = !topCollapse"
                  >
                    {{ topCollapse ? "▼" : "▶" }}
                  </b-button>
                  <p v-show="!topCollapse">
                    {{ topTitle }}
                  </p>
                </div>
              </div>
              <div
                v-show="!topCollapse"
                class="message-body"
              >
                <slot name="top" />
              </div>
            </section>
          </div>
          <!-- Main -->
          <div
            class="flexItem is-12 noChild bordered"
            :class="{ 'main-fullscreen': fullScreen }"
          >
            <section class="message">
              <div class="message-header level">
                <p class="level-left">
                  {{ mainTitle }}
                </p>
                <div class="main-fullscreen-btn-wrap">
                  <b-button @click="fullScreen = !fullScreen">
                    ↕
                  </b-button>
                </div>
              </div>
              <div class="message-body">
                <slot name="main" />
              </div>
            </section>
          </div>
        </div>
      </div>

      <!-- Right -->
      <div
        v-if="right"
        class="flexItem noChild bordered"
        :class="[{ 'class-collapse': rightCollapse }, rightWithRate]"
      >
        <div
          class="message-header level"
          :class="{ 'collapse-message': rightCollapse }"
        >
          <div
            class="level-left"
            :class="{ 'collapse-item': rightCollapse }"
          >
            <b-button
              class="collapse-btn"
              @click="rightCollapse = !rightCollapse"
            >
              {{ rightCollapse ? "▼" : "▶" }}
            </b-button>
            <p v-show="!rightCollapse">
              {{ rightTitle }}
            </p>
          </div>
        </div>
        <div
          v-show="!rightCollapse"
          class="message-body"
        >
          <slot name="right" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    top: {
      default: false,
      type: Boolean,
    },
    left: {
      default: false,
      type: Boolean,
    },
    right: {
      default: false,
      type: Boolean,
    },
    leftWidth: {
      type: Number,
      default: 3,
    },
    mainWidth: {
      type: Number,
      default: 6,
    },
    rightWidth: {
      type: Number,
      default: 3,
    },
    topTitle: String,
    leftTitle: String,
    rightTitle: String,
    mainTitle: String,
  },
  data() {
    return {
      rightCollapse: false,
      leftCollapse: false,
      topCollapse: false,
      fullScreen: false,
      widthRate: [
        { 'is-1': true },
        { 'is-2': true },
        { 'is-3': true },
        { 'is-4': true },
        { 'is-5': true },
        { 'is-6': true },
        { 'is-7': true },
        { 'is-8': true },
        { 'is-9': true },
        { 'is-10': true },
        { 'is-11': true },
        { 'is-12': true },
      ],
    };
  },
  computed: {
    mainWithRate() {
      return this.widthRate[this._props.mainWidth - 1];
    },
    leftWithRate() {
      return this.widthRate[this._props.leftWidth - 1];
    },
    rightWithRate() {
      return this.widthRate[this._props.rightWidth - 1];
    },
  },
};
</script>

<style scoped>
/* Collapse 버튼 테두리 제거 */
.collapse-btn,
.collapse-btn:hover {
  border: none;
}
/* Collapse일때 버튼 및 텍스트를 세로로 배치 */
.collapse-item {
  flex-direction: column;
  margin-top: 0.3em;
}
/* Collapse일때 padding 0 */
.collapse-message {
  padding: 0 !important;
}
/* Collapse일때 접히는 부분 너비를 컨텐츠 크기에 맞게 변경 */
.class-collapse {
  flex: none !important;
  width: auto !important;
}
/* Collapse일때 가운데 메인 컨텐츠부분이 남은 영역 차지하게 변경 */
.mainItem {
  flex: auto !important;
}
/* fullScreen */
.main-fullscreen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1031;
}
/* grid button 오른쪽부터 배치 */
.main-fullscreen-btn-wrap {
  display: flex;
  justify-content: flex-end;
}
</style>
