<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <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" :style="{ height: treeHeight }">
          <MOSTY.PlacetTree width="100%" placeholder="管理部门ID" clearable filterable @getdeptData="getdeptData" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <MOSTY.Assort title="场所地图信息">
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon> <span>返回</span>
            </el-button>
          </MOSTY.Assort>
        </div>
        <!-- 地图 -->
        <div class="tabBox">
          <BigMap />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, onBeforeUnmount } from "vue";
import BigMap from "@/components/Map/index.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
const router = useRouter();
import { useStore } from "vuex";
const store = useStore();
// 数据
const bigHeight = ref(); //整个高度
const CloseEvent = () => {
  router.push("/dm/site/yxkzgl/csbwgl/csxx");
};
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("600px");
const rgBoxWid = ref("calc(100% - 600px)");
const treeHeight = ref(); // 树高度
onMounted(() => {
  bigHeightFn();
});
onBeforeUnmount(() => {
  store.commit("user/setTreeList", []);
})
const getdeptData = () => {

}
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "600px";
    rgBoxWid.value = "calc(100% - 600px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};
</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;
    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: 0 0 0 10px;
    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(100vh - 189px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

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