<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" clearable filterable :searchType="'01'"
            @getdeptData="getdeptData" />
        </div>
      </div>

      <div class="right" :style="{ width: rgBoxWid }" v-show="listShow">
        <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="'02'">
        </transfer>
      </div>

      <!-- 点击部门为部门识别获取规章制度 -->
      <div class="emptyBox" v-show="!listShow">
        点击部门为部门识别获取规章制度
      </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 iconChange = ref(true)
const lfBoxWid = ref('300px')
const orgcode = ref(null)
const depedata = ref({})
const titles = ref('')
const rgBoxWid = ref("calc(100% - 300px)");
const total = ref(0);
// 清单的显示
const listShow = ref(false)
function getdeptData(val) {
  if (['10', '20', '30'].includes(val.orglevel)) {
    listShow.value = false
  } else {
    listShow.value = true
  }

  orgcode.value = val.id;
  depedata.value = val
  titles.value = val.orgname
}

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 {
    // height:74vh;
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;


  }

  .emptyBox {
    font-weight: 800;
    color: orange;
    font-size: 20px;
    margin-left: 600px;
    margin-top: 400px;
  }
}
</style>