<template>
  <div class="bigBox" :style="{ height: bigHeight + 'px' }">
    <!-- 组织机构信息 -->
    <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 :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" :style="{ height: treeHeight + 'px' }">
        <Depttree v-if="props.showolddep" width="100%" placeholder="管理部门ID" :searchType="'03'" clearable filterable
          @getdeptData="getdeptId" />
        <MOSTY.DepartmentTree v-else width="100%" placeholder="管理部门ID" clearable filterable :searchType="searchType"
          @getdeptData="getdeptId" />
      </div>
    </div>

    <div class="right" :style="{ width: rgBoxWid }">
      <slot name="header"></slot>
      <!-- 头部 -->
      <div class="headBox">
        <div class="title">{{ pageTitle }}</div>
        <div class="btnBox">
          <!-- 搜索插槽 -->
          <slot name="serach"></slot>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tabBox">
        <el-table ref="multipleTableRef" cell-style-scoped v-loading="tableloading" fit element-loading-text="加载中..."
          stripe :data="tableData" :height="props.heightnum ? props.heightnum : '72vh'" style="width: calc(100% - 5px)"
          @selection-change="handleSelectionChange" border>
          <template v-for="column in tableColumns" :key="column.prop">
            <el-table-column :width="column.width" :label="column.title" :prop="column.prop" show-overflow-tooltip>
              <template #default="scope">
                <slot v-if="column.slot" :name="column.prop" :row="scope.row" />
                <span v-else>{{ scope.row[column.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <!-- 分页插槽 -->
        <slot name="fenye"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import SvgIcon from "@/components/SvgIcon/index.vue";
import Depttree from "@/components/MyComponents/DepartmentTree/Olddepart.vue";
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: []
  },
  // 标头数据
  tableColumns: {
    type: Array,
    default: []
  },
  // 页面标题
  pageTitle: {
    type: String,
    default: ""
  },
  // 组织机构树的筛选
  searchType: {
    type: String,
    default: "01"
  },
  // 表格加载
  tableloading: {
    type: Boolean,
    default: false
  },
  //是否展示旧版组织机构树
  showolddep: {
    type: Boolean,
    default: false
  },
  heightnum: String
});
const show = ref(false)
const emits = defineEmits(["getDeptId"]);
const bigHeight = ref(); //整个高度
const opacity = ref(1);
// 树的展开与折叠
const treeHeight = ref();
const iconChange = ref(false);
const lfBoxWid = ref("40px");
const rgBoxWid = ref("calc(100% - 0px)");
const blink = () => {
  opacity.value = opacity.value === 1 ? 0 : 1;
};
const getdeptId = (val) => {
  emits("getDeptId", val.id);
};
onMounted(() => {
  bigHeightFn();
  // const intervalId = setInterval(blink, 100); // 每秒闪烁一次
  // setTimeout(() => {
  //   clearInterval(intervalId)
  //   opacity.value = 0
  // }, 3000); // 3秒后执行

});

const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 148;
  treeHeight.value = window.innerHeight - 160;
};

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 304px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 44px)";
  }
};
</script>

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

.el-table__body-wrapper is-scrolling-left {
  border: none;
}

.el-table__row {
  line-height: 21px;
}

.el-table th,
.el-table td {
  padding: 4px 8px;
}

.el-table__body-wrapper is-scrolling-left .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-dialog__headerbtn {
  margin-top: -6px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 27px !important;
}

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

  .title {
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .zzjgxx {
      font-size: 18px;
      font-weight: 400;
      color: #0f3916;
      line-height: 24px;
    }

    .el-icon {
      cursor: pointer;
    }
  }

  .cent {
    width: 100%;
    text-align: center;

    .el-form {
      margin-left: 27%;
    }
  }

  .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 {
    // width: calc(100% - 300px);
    padding: 0 10px;
    // margin: 0px 14px;
    margin-left: 14px;
    background: #fff;


    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;

      .el-select {
        width: 150px;
      }

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

.xzmb_box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  >div {
    width: 48%;

    .titles {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 35px;
    }
  }
}

.tabBox {
  width: 100%;
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.btn {
  padding: 10px;
  float: right;
}
</style>
