<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-click="nodeClick" :filter-node-method="filterNode"
            :data="treeData" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="headBox">
          <span class="title">预警设备列表</span>
        </div>
        <div class="box" style="flex: 1">
          <YjsbList :searchObj="searchObj" />
        </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 YjsbList from "./yjsbList.vue";
const emits = defineEmits(["changePage"])
const endProps = {
  children: "childDeptList",
  value: "id",
  label: "name",
  isLeaf: "leaf"
};
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',
});
//获取场所树数据
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.deptId = null
        } else {
          searchObj.value.deptId = element.orgid ? element.orgid : element.id
          searchObj.value.siteid = null
        }
      });
    }
    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 nodeClick = (node) => {
  if (node.siteid) {
    searchObj.value.siteid = node.siteid
    searchObj.value.deptId = null
  } else {
    searchObj.value.deptId = node.orgid ? node.orgid : node.id
    searchObj.value.siteid = null
  }
};
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: 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;
    }
  }
}
</style>