<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="zzjg-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">
          <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" :searchType="'03'" clearable filterable
            @getdeptData="getdeptId" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="title" style="font-weight: 800;
           font-size: 18px; text-align: center;
           border-bottom: 1px dashed green;">
          <span style="text-align: center;  margin-left: 30%;"> {{ titles }}适用法律法规清单</span>
        </div>
        <!-- 穿梭框 -->
        <transfer :total="total" :depedata="depedata" :types="'01'"> </transfer>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref } from "vue";
import transfer from "../components/transfer.vue";
import * as MOSTY from "@/components/MyComponents/index";
// 数据
const bigHeight = ref(); //整个高度
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const orgcode = ref(null);
const depedata = ref({});
const titles = ref("");
const rgBoxWid = ref("calc(100% - 320px)");
const total = ref(0);
// 初始化
onMounted(() => {
  bigHeightFn();
});
// 方法
function getdeptId(val) {
  orgcode.value = val.id.replace('XN', '');
  depedata.value = val;
  titles.value = val.orgname.replace('(本级)', '');
}
// 方法
const treeHeight = ref(""); // 树高度
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 157 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};

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)'
  }
};
</script>

<style lang="scss" scoped>
.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;
    }
  }


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


  }
}
</style>
