<template>
  <div class="main-container">
    <div class="container-left" v-if="$slots.left" :style="{ 'margin-right': showTree ? '16px' : '0px'}">
      <!-- 当有左侧树时使用这个布局 -->
      <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="toggle" :style="{ 'right': showTree ? '-16px' : '0px'}">
          <img src="./pick-left.png" alt="" v-show="showTree" />
          <img src="./pick-right.png" alt="" v-show="!showTree" />
        </div>
      </div>
    </div>
    <div class="container-right">
      <div class="container-page-hd">
        <div class="hd" v-if="hasPageHeader">
          <slot name="headLeft">
            <h2>{{ title }}</h2>
          </slot>
          <div class="hd-right">
            <slot name="headRight"></slot>
          </div>
        </div>
        <div class="page-hd-others">
          <slot name="headOthers"></slot>
        </div>
      </div>
      <div class="bd">
        <!-- 默认的布局 -->
        <slot />
      </div>
    </div>

    <!-- <div class="bd west-east-wrap" v-if="$slots.left">

      <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>

    </div> -->
  </div>
</template>

<script>
export default {
  name: 'SyLayout',
  props: {
    title: {
      // 标题
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showTree: true
    }
  },
  computed: {
    hasPageHeader() {
      return this.title || this.$slots.headLeft || this.$slots.headRight
    }
  },
  methods: {
    toggle() {
      this.showTree = !this.showTree
    },
    pickRight() {
      this.showTree = true
    }
  }
}
</script>

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