<template>
  <el-input v-model="search" style="width: 220px" placeholder="这里可以搜索项目"/>
  <el-tree
      ref="treeRef"
      :data="props.yjyc === 'jc' ? jcTree : jyTree"
      accordion
      :filter-node-method="filterNode"
      @node-click="nodeClick"
      :props="config">
    <template #default="{node, data}">
      <el-icon>
        <FolderOpened v-if="data?.code === null || data?.code.length < 5"/>
        <Document v-else/>
      </el-icon>
      <span :title="showName(data)">
        {{ showName(data) }}
      </span>
    </template>
  </el-tree>
</template>

<script setup name='JyJcTree' lang="ts">
import {jcTree, jyTree} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {$ref} from "vue/macros";
import {Ref, ref, watch} from "vue";
import {ElTree} from "element-plus";

const props = defineProps({
  yjyc: {
    type: String
  }
})

const emit = defineEmits(['node-click'])

const config = {
  value: 'code',
  label: 'name',
  children: 'children'
}

interface Tree {
  name: string,
  code: string,
  children?: Tree[]
}

const search: Ref<string> = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

let data: Tree[] = $ref([])

watch(search, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.name.includes(value)
}

const nodeClick = (data: Tree) => {
  if (!data.children) {
    emit('node-click', data)
  }
}

const showName = (data) => {
  if (props.yjyc === 'jy') {
    return data.name + ' ' + (data?.inspectStuffName === null ? '' : data?.inspectStuffName)
  }
  return data.name;
}


</script>

<style scoped lang="scss">

</style>
