
<template>
  <div :class="isIframe ? 'content-space-between is-iframe' : 'content-space-between'">
    <div
      class="left"
      :style="`width:${width}`"
    >
      <div
        class="header"
        v-if="$slots.leftHeader"
      >
        <slot name="leftHeader"></slot>
      </div>
      <div class="content">
        <slot name="leftContent"></slot>
      </div>
    </div>
    <div class="right">
      <div
        class="header"
        v-if="$slots.rightHeader"
      >
        <slot name="rightHeader"></slot>
      </div>
      <div class="content">
        <slot name="rightContent"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ContentSpaceBetween",
  props: {
    width: {
      type: String,
      default: function () {
        return '30vw'
      }
    },
  },
  computed: {
    isIframe() {
      return top == self ? false : true
    },
  }
}
</script>

<style lang='scss'>
  .content-space-between{
    width: 100%;
    height: calc(100vh - 104px);
    box-sizing: border-box;
    padding: 10px;
    display: flex;

    &.is-iframe{
      height: calc(100vh - 45px);
    }
    
    .left{
      height: 100%;
      width: 30vw;
      background: #F8F8F8;
      border-right: 1px solid #f1f1f1;
    }

    .right{
      flex: 1;
      box-sizing: border-box;
      padding-left: 10px;
      
    }

    .left,.right{
      display: flex;
      flex-direction: column;

      .header{
        padding: 10px 5px;
      }

      .content{
        width: 100%;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }
    }

    .content-space-between-tree {
      background: #F8F8F8;
      color: #606266;


      .el-tree-node__content {
        height: auto;
      }

      .el-tree-node__content.treeHover:hover {
        background-color: #fff;
      }

      .tree-content {
        flex: 1;
        width: 100%;
        overflow: hidden;
        display: flex;

        .tree-label{
          flex: 2;
          overflow: hidden;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 13px;
          line-height: 22px;
          padding: 4px 3px 4px 0;
        }

        .button-flex-box{
          display: none;
          padding-right: 10px;
          margin: auto 0;

          .el-button--mini {
            padding: 4px 5px;
            font-size: 10px;
            font-weight: 200;
            border-radius: 2px;
          }

          .el-button [class*="el-icon-"] + span {
            margin-left: 2px;
          }
        }

      }

      .tree-content:hover {
        .button-flex-box {
          display: block;
        }
      }
    }
    
  }
</style>
