<template>
  <div class="departmentTree-box" :style="{ width: width, height: '100%' }">
    <!-- :load="loadNode"   :load="loadNode" lazy  -->
    <div class="depar_foot">
      <el-tree ref="treeRef" class="filter-tree" :props="endProps" node-key="id" :load="loadNode" lazy
        :default-expanded-keys="treemrData" @node-click="nodeClick" :filter-node-method="filterNode" :data="treeData">
        <template #default="scoped">
          <div class="menuItem">
            <el-icon class="left_icon">
              <Document />
            </el-icon>
            <span class="center_text"> {{ scoped.data.name }}</span>
            <el-icon v-if="scoped.data.hasChildren">
              <CaretRight />
            </el-icon>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
// import { debounce } from "lodash";
import { getItem } from "@/utils/storage";
import { COMPONENT_WIDTH } from "@/constant";
import { ElMessage, ElMessageBox } from "element-plus";
import Contextmenu from "@/components/contextmenu/index.vue";
import { ref, defineProps, defineEmits, watch, reactive, onMounted } from "vue";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  multiple: {
    default: false,
    type: Boolean
  },
  showfunction: {
    default: true,
    type: Boolean
  },
  filterable: {
    default: true,
    type: Boolean
  },
  modelValue: {
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const listQuery = ref({
  parentid: ""
});
const treeRef = ref(null);
const node_had = ref([]);
const resolve_had = ref([]);
const treemrData = ref([]);
const emits = defineEmits(["update:modelValue", "getdeptId", "getdeptData"]);
//防抖处理
// const filterTextChange = debounce(inputChange, 500);
onMounted(() => { });
const treeData = ref([]);
//获取部门数据
function getTreeData() {
  getApi(listQuery.value, "/mosty-jcgl/site/querySceneSiteTree").then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {
        treemrData.value.push(element.id);
        emits("getdeptData", element);
      });
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;
  });
}

const endProps = {
  children: "childDeptList",
  value: "id",
  label: "name",
  isLeaf: "leaf"
};
//懒加载方法
async function loadNode(node, resolve) {
  listQuery.value.parentid = node.data.id;
  if (node.level === 0) {
    node_had.value = node;
    resolve_had.value = resolve;
    getTreeData();
  }
  if (node.level >= 1) {
    getApi(listQuery.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) => {
  const id = node.id;
  emits("update:modelValue", id);
  emits("getdeptId", id);
  emits("getdeptData", node);
};

const handleChange = (e) => {
  if (props.multiple === true) {
    const data = e.map((item) => {
      return item[item.length - 1];
    });
    emits("update:modelValue", data);
  } else {
    const data = e[0];
    emits("update:modelValue", data);
  }
};
</script>

<style lang="scss" scoped>
.menu {
  padding: 10px 0;
  overflow-y: scroll;
}

.menuItem {
  width: 100%;

  .left_icon {
    margin: 0 10px;
    font-size: 18px;
  }

  .center_text {
    font-size: 15px;
  }
}

::v-deep .el-tree-node__content {
  .el-tree-node__expand-icon {
    display: none;
  }
}

.depar_hear {
  height: 32px;
}

.depar_foot {
  // height: calc(100% - 8px);
  height: 100%;
  overflow: overlay;
  // width: 380px;
}

.departmentTree-box {
  height: 80vh;
  // overflow-y: scroll;
}
</style>
