<template>
  <div class="bigBox">
    <!-- 组织机构信息 -->
    <div class="zzjg-left" :style="{ width: lfBoxWid }">
      <div class="title">
        <div style="display: flex; align-items: center">
          <div class="pt5 mr5">
            <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 width="100%" placeholder="管理部门ID" clearable filterable
          :searchType="activeTab == '2' ? '03' : '01'" @getdeptData="getdeptId" :key="keys" />
      </div>
    </div>
    <div class="stage-wrapper" :style="{ width: rgBoxWid }">
      <div class="header" style="height: 46px;">
        <div class="bottom">
          <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
            <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in tabs" :key="i" />
          </el-tabs>
          <el-button type="primary" v-if="activeTab === '2' || activeTab === '3'" @click='seeImg'>
            <span>查看流程</span>
          </el-button>
        </div>
      </div>
      <div class="box" style="flex: 1">
        <!-- <Sgsjybzl v-if="activeTab === '1'" :deptobj="deptobj" :orgname='orgname' :isOpen="isOpen" /> -->

         <!-- 事故月报 -->
        <sgsjyb v-if="activeTab === '2'" :deptobj="deptobj" :orgname='orgname' />

        <!-- 事故快报 -->
        <sgsjkb v-else-if="activeTab === '3'" :deptobj="deptobj" :isOpen="isOpen" />

      </div>
    </div>
    <el-dialog v-model="ImgShow" title='流程图查看' width="1125px" top="5%" :before-close="handleClose">
      <div class='lctck' v-if="activeTab === '2'" style="width: 1008px;">
        <div class='btlct'>事故月报流程表审核流程图</div>
        <img style='margin: 20px 200px;width: 600px;' :src="getImgUrl('system/lctimg.png')" />
      </div>
      <div class='lctck' v-if="activeTab === '3'" style="width: 567px;">
        <div class='btlct'>事故快报流程表审核流程图</div>
        <img style='margin: 20px -9px;width: 600px;' :src="getImgUrl('system/kblcimg.png')" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ImgShow = false"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import sgsjyb from "./sgsjyb.vue";
import { getImgUrl } from "@/utils/tools.js"
import sgsjkb from "./sgsjkb.vue";
const ImgShow = ref(false)
import { ref, computed, provide, onMounted } from "vue";
import Sgsjybzl from "./sgsjybzl.vue";
const emit = defineEmits("changePage");
const lfBoxWid = ref("40px");
const keys = ref(1);
const orgname = ref('');
// 树的展开与折叠
const iconChange = ref(false);
const tabs = [
  // {
  //   label: "事故事件月报总览",
  //   value: "1"
  // },
  {
    label: "事故事件月报",
    value: "2"
  },
  {
    label: "事故事件快报",
    value: "3"
  },

];
const activeTab = ref("2");
const tabTitle = computed(() => {
  return tabs.find((v) => v.value == activeTab.value).label;
});
const deptobj = ref({})
provide("title", tabTitle);
const opacity = ref(1);
const count = ref(1)
const rgBoxWid = ref("calc(100% - 0px)");
onMounted(() => {
  const intervalId = setInterval(blink, 100); // 每秒闪烁一次
  setTimeout(() => {
    clearInterval(intervalId)
    opacity.value = 0
  }, 3000); // 3秒后执行

});
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)";
  }
};
const blink = () => {
  opacity.value = opacity.value === 1 ? 0 : 1;
};
function onTabClick() {
  keys.value++
}
//查看流程
function seeImg() {
  ImgShow.value = true
}
//获取部门数据
const getdeptId = (val) => {
  deptobj.value = val
  count.value++
};

function handleClose() {
  ImgShow.value = false
}

</script>

<style lang="scss" scoped>
.lctck {
  height: 60vh;
  margin: 0 auto;

  .btlct {
    text-align: center;
    font-size: 36px;
    font-weight: 800;
    color: red;
  }
}

.bigBox {
  display: flex;

  .stage-wrapper {
    margin-left: 14px;
    background-color: #fff;

  }

}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.bottom {
  height: 48px;
  padding: 8px 14px 0 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  overflow: hidden;

  .toggle {
    position: static !important;
    z-index: 0 !important;
  }
}
</style>