<template>
  <div>
    <div class="bigBox">
      <!-- 基础隐患排查 -->
      <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 class="treeBox" :style="{ height: treeHeight }">
          <el-tree ref="treeRef" class="filter-tree" :props="endProps" node-key="id" :load="loadNode" lazy
            :default-expanded-keys="defaultExpandedKeys" @node-collapse="handleNodeCollapse" @node-click="nodeClick"
            :filter-node-method="filterNode" :data="treeData" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <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">
              <template #label>
                <span class="custom-tabs-label">
                  <span>{{ item.label }}</span>
                  <span style="margin-left: 10px;">({{ item.num }})</span>
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- <div class="headBox" style="justify-content: space-between ">
          <div class="title">应急资源管理</div>
        </div> -->
        <div class="box" style="flex: 1">
          <Wxxfztab v-if="activeTab === '1'" :searchObj="searchObj" />
          <Mhqtab v-else-if="activeTab === '2'" :searchObj="searchObj" />
          <Xhstab v-else-if="activeTab === '3'" :searchObj="searchObj" />
          <Yjzytab v-else-if="activeTab === '4'" :searchObj="searchObj" @changetotal='changetotal' />
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { getItem } from "@/utils/storage"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import Wxxfztab from "./wxxfztab.vue";
import Yjzytab from "./yjzytab.vue";
import Mhqtab from "./mhqtab.vue";
import Xhstab from "./xhstab.vue";
const emits = defineEmits(["changePage"])
const endProps = {
  children: "childDeptList",
  value: "id",
  label: "name",
  isLeaf: "leaf"
};
const tabs = reactive([
  {
    label: "微型消防站",
    value: "1",
    num: 0
  },
  {
    label: " 灭火器",
    value: "2",
    num: 0
  },
  // {
  //   label: " 消火栓",
  //   value: "3",
  //   num: 0
  // },
  {
    label: " 应急资源",
    value: "4",
    num: 0
  },
]);
const activeTab = ref("1");
const defaultExpandedKeys = ref([])
const treeData = ref([]); // 树的数据
const node_had = ref([]);
const resolve_had = ref([]);
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const treemrData = ref([]);
const treeRef = ref(null);
const searchObj = ref({
})
const treeQuery = ref({
  parentid: "",
  type: '01',
});
// 初始化
onMounted(() => {
  // getTreeData();
});
//获取场所树数据
function getTreeData() {
  getApi(treeQuery.value, "/mosty-jcgl/site/querySceneTree").then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {
        treemrData.value = setTimeout(() => { treeRef.value.setCurrentKey(element.id) }, 200)
        defaultExpandedKeys.value = [element.id]
        if (element.siteid) {
          searchObj.value.siteid = element.siteid
          searchObj.value.orgcode = null
        } else {
          searchObj.value.orgcode = element.orgid ? element.orgid : element.id
          searchObj.value.siteid = null
        }
        getcount()
      });
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;

  });
}
//懒加载方法
async function loadNode(node, resolve) {
  treeQuery.value.parentid = node.data.id;
  treeQuery.value.type = node.data.type;
  if (node.level === 0) {
    node_had.value = node;
    resolve_had.value = resolve;
    getTreeData();
  }
  if (node.level >= 1) {
    getApi(treeQuery.value, "/mosty-jcgl/site/querySceneSiteTree").then(
      (res) => {
        for (let i = 0; i < res.length; i++) {
          res[i].leaf = !res[i].hasChildren;
        }
        resolve(res);
      }
    );
  }
}
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
const handleNodeCollapse = (nodeData, node) => {

}
const nodeClick = (node) => {
  if (node.siteid) {
    searchObj.value.siteid = node.siteid
    searchObj.value.orgcode = null
  } else {
    searchObj.value.orgcode = node.orgid ? node.orgid : node.id
    searchObj.value.siteid = null
  }
  getcount()

};
function changetotal() {
  getcount()
}
//统计
function getcount() {
  getApi({ siteid: searchObj.value.siteid, orgcode: searchObj.value.orgcode }, '/mosty-jcgl/emergencysupplies/getStatistics').then((res) => {
    tabs[0].num = res.xfz
    tabs[1].num = res.mhq
    tabs[2].num = res.xhs
    tabs[3].num = res.wz

  })
}
// 方法
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>
::v-deep .el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;

    .el-tabs__nav {
      border: none;
    }

    .el-tabs__item {
      background: var(--el-table-cell-bmx-backgroundcolor) !important;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      line-height: 38px;
      margin: 0 1px;

      &.is-active {
        background: var(--el-color-primary) !important;
        color: #fff;
        border-top: 2px solid var(--el-color-primary) !important;
        border-bottom: 2px solid var(--el-color-primary) !important;
      }
    }
  }
}

// .labcount {
//   display: inline-block;
//   position: absolute;
//   top: 0;
//   right: 0;
//   color: #f1e9e9;
//   height: 20px;
//   line-height: 20px;
//   border-radius: 32%;
//   padding: 1px 3px;
// }

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}

.bigBox {
  display: flex;

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: var(--el-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .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 {
      height: calc(100vh - 164px);
      overflow: auto;
    }
  }

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

    .headBox {
      display: flex;
      align-items: center;
    }


  }
}

.eltab3 {
  height: calc(100vh - 380px);
}



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