<template>
  <div class="bigBox">
    <!-- 组织机构信息 -->
    <div class="zzjg-left" :style="{ width: lfBoxWid }" v-if="props.isShowLeftTree" v-show="isShowOrgTree">
      <div class="title">
        <div style="display: flex; align-items: center">
          <div class="pt5 mr5" @click="handleCollapse">
            <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 :key="1" class="twdtxg" v-if="!iconChange">
        <span style="color: var(--el-color-primary)" :style="{ opacity: opacity }">
          <el-icon style="color: var(--el-color-primary) !important;font-size: 30px;">
            <Pointer />
          </el-icon>
        </span>
      </div> -->

      <div class="treeBox">
        <MOSTY.DepartmentTree v-if="!props.oldTree" width="100%" placeholder="管理部门ID" clearable filterable
          :searchType="props.searchType" @getdeptData="getdeptId" />
        <Depttree v-if="props.oldTree" width="100%" placeholder="管理部门ID" :searchType="props.searchType" clearable
          filterable @getdeptData="getdeptId" />
      </div>
    </div>

    <div class="zy-right" :style="{ width: rgBoxWid }">

      <slot name="header"></slot>
      <!-- 头部 -->
      <div class="headBox" v-if="props.pageTitle">
        <div class="title">{{ props.pageTitle }}

          <slot name="lable"></slot>
        </div>
        <slot name="titleright"></slot>
      </div>
      <!-- 搜索插槽 -->
      <slot name="serach"></slot>
      <slot name="table"></slot>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance, computed } from "vue";
import Depttree from "@/components/MyComponents/DepartmentTree/Olddepart.vue";
import * as MOSTY from "@/components/MyComponents/index";
import SvgIcon from "@/components/SvgIcon/index.vue";
const props = defineProps({
  // 页面标题
  pageTitle: {
    type: String,
    default: null
  },
  // 组织机构树的筛选
  searchType: {
    type: String,
    default: "01"
  },
  isOpenTree: {
    type: Boolean,
    default: false
  },
  oldTree: {
    type: Boolean,
    default: false
  },
  isShowLeftTree: {
    type: Boolean,
    default: true
  },
  /** v-show 显示方法(方便获取里面的值) */
  isShowOrgTree: {
    type: Boolean,
    default: true
  },
});
const emits = defineEmits(["getDeptId"]);
const iconChange = ref(props.isOpenTree);
const lfBoxWid = ref(props.isOpenTree ? "300px" : "40px");
const rgBoxWid = ref(`calc(100% - ${props.isShowLeftTree ? lfBoxWid.value : "0px"})`);
const opacity = ref(1);
const getdeptId = (val) => {
  emits("getDeptId", val);
};
const blink = () => {
  opacity.value = opacity.value === 1 ? 0 : 1;
};
onMounted(() => {
  // const intervalId = setInterval(blink, 100); // 每秒闪烁一次
  // if (props.isShowLeftTree && props.isShowOrgTree) {
  //   setTimeout(() => {
  //     clearInterval(intervalId)
  //     opacity.value = 0
  //   }, 3000); // 3秒后执行
  // }

});

/** 获取右盒子宽度 */
const getrgBoxWidth = () => {
  if (!props.isShowOrgTree) return 'calc(100%)'
  /**左边的宽度 */
  let lfBoxWidth = iconChange.value ? 300 : 40
  if (!props.isShowOrgTree || !props.isShowLeftTree) lfBoxWidth = 0
  return `calc(100% - ${lfBoxWidth}px)`
}

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = getrgBoxWidth();
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = getrgBoxWidth();
  }
};
watch(() => props.isShowOrgTree, () => {
  rgBoxWid.value = getrgBoxWidth();
})
</script>

<style lang="scss" scoped>
.twdtxg {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  z-index: 9999;
}

.bigBox {
  display: flex;
  background-color: #f0f3f4;

  .zy-right {
    margin-left: 10px;
  }

  .headBox {
    display: flex;
    justify-content: space-between;
  }

}
</style>
