<template>
  <div class="tree-filter-container">
    <!-- 搜索框 -->
    <div class="search-box">
      <el-input
        v-model="filterText"
        placeholder="输入关键字过滤"
        clearable
        prefix-icon="el-icon-search"
      />
    </div>

    <!-- 树形结构 -->
    <el-tree
      ref="treeRef"
      class="filter-tree"
      :data="treeData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      node-key="id"
      highlight-current
      default-expand-all
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <i class="iconfont node-icon" v-html="data.icon.text" :style="`color: ${data.icon.color};`"></i>
          <span>{{ node.label }}</span>
          <template v-if="data.type === 'category'">
            <i class="el-icon-collection icon-category" style="margin-left:6px;color:#F7BA2A;font-size:16px;"></i>
          </template>
          <template v-if="data.type === 'system'">
            <i class="el-icon-s-platform icon-system" style="margin-left:6px;color:#409EFF;font-size:16px;"></i>
          </template>
          <template v-if="data.type === 'database'">
            <i class="el-icon-s-data icon-database" style="margin-left:6px;color:#67C23A;font-size:16px;"></i>
          </template>
          <template v-if="data.type === 'table'">
            <i class="el-icon-s-grid icon-table" style="margin-left:6px;color:#E6A23C;font-size:16px;"></i>
          </template>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

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

const props = defineProps({
  treeData: {
    type: Array,
    default: () => [
      {
        id: 'system',
        label: '若依配测系统',
        type: 'system',
        children: [
          {
            id: 'database',
            label: 'ry',
            type: 'database',
            children: [
              {
                id: 'tables',
                label: '表',
                type: 'category',
                children: [
                  { id: 'gen_table', label: 'gen_table', type: 'table' },
                  { id: 'gen_table_column', label: 'gen_table_column', type: 'table' },
                  { id: 'sys_config', label: 'sys_config', type: 'table' },
                  { id: 'sys_dept', label: 'sys_dept', type: 'table' },
                  { id: 'sys_dict_data', label: 'sys_dict_data', type: 'table' },
                  { id: 'sys_dict_type', label: 'sys_dict_type', type: 'table' },
                  { id: 'sys_job', label: 'sys_job', type: 'table' },
                  { id: 'sys_job_log', label: 'sys_job_log', type: 'table' },
                  { id: 'sys_logininfor', label: 'sys_logininfor', type: 'table' },
                  { id: 'sys_menu', label: 'sys_menu', type: 'table' },
                  { id: 'sys_notice', label: 'sys_notice', type: 'table' },
                  { id: 'sys_oper_log', label: 'sys_oper_log', type: 'table' },
                  { id: 'sys_post', label: 'sys_post', type: 'table' },
                  { id: 'sys_role', label: 'sys_role', type: 'table' },
                  { id: 'sys_role_dept', label: 'sys_role_dept', type: 'table' },
                  { id: 'sys_role_menu', label: 'sys_role_menu', type: 'table' },
                  { id: 'sys_user', label: 'sys_user', type: 'table' },
                  { id: 'sys_user_online', label: 'sys_user_online', type: 'table' },
                  { id: 'sys_user_post', label: 'sys_user_post', type: 'table' },
                  { id: 'sys_user_role', label: 'sys_user_role', type: 'table' }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
})

const filterText = ref('')
const treeRef = ref(null)

const defaultProps = {
  children: 'children',
  label: 'label'
}

// 过滤树节点
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.toLowerCase().includes(value.toLowerCase())
}

// 监听过滤文本变化
watch(filterText, (val) => {
  treeRef.value.filter(val)
})

// 节点点击事件
const handleNodeClick = (data) => {
  emit('node-click', data)
}
</script>

<style scoped>
.tree-filter-container {
  max-height: 700px;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  /* background-color: #f5f5f5; */
  padding: 10px;
  border-right: 1px solid #e6e6e6;
}

.search-box {
  margin-bottom: 10px;
}

.filter-tree {
  background-color: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.node-icon {
  margin-right: 6px;
  color: #606266;
}

.icon-category {
  vertical-align: middle;
}
.icon-system {
  vertical-align: middle;
}
.icon-database {
  vertical-align: middle;
}
.icon-table {
  vertical-align: middle;
}

:deep(.el-tree-node__content) {
  height: 36px;
}
</style>