<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div class="pt5 mr5">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox">
          <tree width="100%" placeholder="管理部门ID" clearable filterable @getdeptData="getdeptId" />
        </div>
      </div>

      <div class="right" :style="{ width: rgBoxWid }">
        <component :is="defineAsyncComponent(() => import('@/components/MyComponents/TabList/stsbssList.vue'))"
          :obj='listQuery' @searchChange='searchChange' :type='"stsbss"' :title='"食堂设备设施列表"' :showCount='showCount'
          @tableChange="tableChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineAsyncComponent } from "vue";
import tree from "@/views/yxkzgl/stgl/commonds/tree.vue";
import { getItem } from "@/utils/storage";
const listQuery = reactive({
  type: '0',
  saveBtnShow: true,
  showadd: true
});
const showCount = ref(false)
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};

onMounted(() => {
});
const getdeptId = (val) => {
  if (getItem("deptId").ssdwid == val.orgid) {
    listQuery.showadd = true
  } else {
    listQuery.showadd = true
  }
  listQuery.orgcode = val.orgid;
  listQuery.siteid = val.siteid;
  listQuery.buildingid = val.buildingid;
  listQuery.floorid = val.floorid;
  listQuery.partid = val.partid;
  if (!val.siteid && !val.buildingid && !val.floorid && !val.partid) {
    listQuery.orgcode = val.id;
  } else {
    listQuery.orgcode = null;
  }
  listQuery.pageCurrent = 1;
};
</script>

<style lang="scss" scoped>
.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.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;
    }
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

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

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

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}
</style>