<template>
  <div class="main-container" :class="{ 'no-head': !headVisiable }">
    <div class="hd" v-if="headVisiable">
      <slot name="headLeft">
        <h2>{{ title }}</h2>
      </slot>
      <div class="hd-right">
        <slot name="headRight"></slot>
      </div>
    </div>
    <div class="bd west-east-wrap" v-if="$slots.left">
      <!-- 当有左侧树时使用这个布局 -->
      <div class="west-tree-box" :style="{ width: showTree ? '260px' : '0' }">
        <!-- 左侧树 -->
        <div class="west-tree-content">
          <slot name="left"></slot>
        </div>
        <div class="pick-left" @click="pickLeft" v-show="showTree">
          <img src="./pick-left.png" alt="" />
        </div>
      </div>
      <div class="east-content" :class="{ 'no-padding': noPadding }" :style="{ width: showTree ? 'calc(100% - 261px)' : 'calc(100% - 1px)' }">
        <!-- 右侧主区域 -->
        <slot />
        <div class="pick-right" @click="pickRight" v-show="!showTree">
          <img src="./pick-right.png" alt="" />
        </div>
      </div>
    </div>
    <div class="bd" v-else>
      <!-- 默认的布局 -->
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SyLayout',
  props: {
    title: {
      // 标题
      type: String,
      default: ''
    },
    noPadding: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showTree: true
    }
  },
  computed: {
    headVisiable() {
      // 不提供左侧头，右侧头和标题的视为没有头的布局
      return this.$slots.headLeft || this.$slots.headRight || this.title
    }
  },
  methods: {
    pickLeft() {
      this.showTree = false
    },
    pickRight() {
      this.showTree = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
