<template>
  <el-card shadow="never">
    <el-input v-model="deptName" placeholder="设备名称" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input>

    <el-tree
      ref="deptTreeRef"
      class="mt-2"
      :data="deptList"
      :props="{ children: 'childs', label: 'deviceName', disabled: '' }"
      :expand-on-click-node="false"
      :filter-node-method="handleFilter"
      default-expand-all
      @node-click="handleNodeClick"
    />
  </el-card>
</template>

<script setup lang="ts">
import { treeList } from "@/api/device";
import {defineProps} from "vue";

const emit = defineEmits(["deviceInfo"])

const deptList = ref<OptionType[]>();
const deptTreeRef = ref(ElTree);
const deptName = ref();

//const emits = defineEmits(["node-click"]);
//const emits = defineEmits(['update:modelValue'])
//const clickObj = useVModel(props, "modelValue", emits);
//const deviceType = useVModel(props, "deviceType", emits);
watchEffect?.(
  () => {
    deptTreeRef.value.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

function handleFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.deptName.indexOf(value) !== -1;
}

function handleNodeClick(data: { [key: string]: any }) {
  emit("deviceInfo", data)
}

onBeforeMount?.(() => {
  treeList().then((response) => {
    if(response.data){
      emit("deviceInfo", response.data[0])
    }
    deptList.value = response.data;
  });
});
</script>
