<template>
  <div class="departmentTree-box" :style="{ width: width, height: '100%', }">
    <div class="depar_foot">
      <el-tree ref="treeRef" class="filter-tree" :props="endProps" node-key="id" :default-expanded-keys="treemrData"
        @node-click="nodeClick" :data="treeData" highlight-current :current-node-key="props.modelValue"
        :check-on-click-node="false">
        <template #default="{ node }">
          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">
          </span>
          <span>{{ node.label }}</span>
        </template>
      </el-tree>

      <!-- <el-tree ref="treeRef" :props="endProps" node-key="id" accordion :check-strictly="props.Isstrictly"
        :default-expanded-keys="treemrData" @node-click="nodeClick" @check-change="checkChange" :data="treeData"
        show-checkbox @check="handleCheck" :default-checked-keys="ids" /> -->
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, watchEffect, onMounted, reactive } from "vue";
import { getApi } from "@/api/tobAcco_api.js";

const emits = defineEmits(["update:modelValue", 'change']);
const props = defineProps({
  modelValue: {
    type: String
  },
  //是否可选择本级true：可以  false:不可以
  Isstrictly: {
    type: Boolean,
    default: false
  },
  // isCanChooseParent: {
  //   type: Boolean,
  //   default: false
  // },
});
const endProps = {
  children: "children",
  value: "id",
  label: "name",
  isLeaf: "leaf"
};

const treeRef = ref(null);
const currentRow = ref([])
/** 选中的值 */
const ids = ref([])
const currNode = reactive({
  id: ''
})
const treemrData = ref([]);
const treeData = ref([]);
const width = ref();
onMounted(() => { getTreeData() });

function checkChange(val, checkedData) {
  currentRow.value = [val]
}

//获取复选框中被选中的值
function handleCheck(data, checkedData) {
  // let arr = checkedData.checkedNodes;
  // for (let i = 0; i < arr.length; i++) {
  //   const e = arr[i];
  // }
  // currentRow.value = arr;
}
//获取部门数据
function getTreeData() {
  getApi({}, '/mosty-jcgl/fxdy/tree').then(async (res) => {
    if (res) {
      // if (res?.[0]?.id) currNode.id = res?.[0]?.id
      treeData.value = Array.isArray(res) ? res : [];
    }
  });
}

const nodeClick = (node) => {
  console.log('node: ', node);
  // if (!props.isCanChooseParent && node.children?.length) return
  // currNode.id = node.id
  emits("update:modelValue", node.id);
  ids.value = [node.id]
  emits("change", node);
};
</script>

<style lang="scss" scoped>
.depar_hear {
  height: 32px;
}

.prefix {
  margin-right: 5px;
}

.depar_foot {
  overflow: auto;
}

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