<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <span v-if="iconChange">组织机构信息</span>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <slot name="leftContent"></slot>
      </div>

      <div class="right" :style="{ width: rgBoxWid }">
        <!-- 右边得插槽 -->
        <slot name="rightContent"></slot>
      </div>
    </div>
  </div>
</template>
  
<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
// 数据
//查询条件
const bigHeight = ref(); //整个高度
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("260px");
const rgBoxWid = ref("calc(100% - 260px)");
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "260px";
    rgBoxWid.value = "calc(100% - 260px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
onMounted(() => {
  bigHeightFn();
});
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 102 + "px";
};
</script>
  
<style lang="scss" scoped>
.el-dialog__headerbtn {
  margin-top: -6px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 27px !important;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0F3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .cent {
    width: 100%;
    text-align: center;

    .el-form {
      margin-left: 27%;
    }
  }

  .left {
    // width: 300px;
    // height: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

    .treeBox {
      margin-top: 15px;
      overflow: auto;
    }
  }

  .right {
    // width: calc(100% - 300px);
    padding: 0 10px;
    box-sizing: border-box;

    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;

      .el-select {
        width: 150px;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.xzmb_box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  >div {
    width: 48%;

    .titles {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 35px;
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  margin-top: 0 !important;
  border-left: 0 !important;




  .fenye {
    top: 95%;
  }
}

.btn {
  padding: 10px;
  float: right;
}
</style>