<template>
    <div>
        <div style="transition: all 0.3s; overflow: hidden; height: 100%">
            <div class="cn-tree">
                <div style="display: flex; align-items: center" class="mb10">
                    <el-input maxlength="32" show-word-limit   v-model.trim="filterText" placeholder="请输入内容" clearable>
                        <template #prefix>
                            <Icon name="el-icon-Search" style="font-size: 16px" />
                        </template>
                    </el-input>
                </div>
                <el-tree
                    style="flex: 1; overflow: auto"
                    :props="defaultProps"
                    highlight-current
                    :filter-node-method="filterNode"
                    node-key="id"
                    v-bind="$attrs"
                    default-expand-all
                    :data="tree"
                    ref="treRef"
                    @node-click="clickNode"
                    :expand-on-click-node="false"
                >
                    <template #default="{ node, data: nodeData }">
                        <span class="custom-tree-node">
                            <div class="left" style="display: flex; align-items: center">
                                <Icon
                                    :name="nodeData.icon"
                                    style="font-size: 16px"
                                    :style="{ color: nodeData.color }"
                                    v-if="nodeData.icon"
                                />
                                <span style="margin-left: 5px">{{ node.label }}</span>
                            </div>
                        </span>
                    </template>
                </el-tree>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { getSchemeTree } from '@/api/cs-device-boot/planData'
import { useConfig } from '@/stores/config'
import { ElTree } from 'element-plus'
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
import { createLineTreeDecorators } from './lineTreeUtils'
import { bootstrapWithTemplate } from './treeCommonUtils'
import { createTreeFilterNode } from './treeFilterUtils'

defineOptions({ name: 'govern/schemeTree', inheritAttrs: false })

interface Props {
    template?: boolean
}

const props = withDefaults(defineProps<Props>(), { template: false })

const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'node-click', 'editNode', 'getChart', 'Policy'])

const config = useConfig()
const tree = ref<any[]>([])
const treRef = ref<InstanceType<typeof ElTree>>()
const filterText = ref('')
const id = ref<string | null>(null)
const planId = ref('')

const defaultProps = { children: 'children', label: 'name', value: 'id' }
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
const filterNode = createTreeFilterNode()

watch(filterText, val => treRef.value?.filter(val))

function decorateSchemeTree(data: any[]): any[] {
    const { primary, applyMeta } = decorators
    const leaves: any[] = []

    data.forEach(item => {
        applyMeta(item, { icon: 'el-icon-Menu', color: primary() })
        item.children?.forEach((child: any) => {
            applyMeta(child, { icon: 'el-icon-Document', color: primary() })
            leaves.push(child)
        })
    })

    return leaves
}

function getTreeList() {
    getSchemeTree().then(res => {
        const leaves = decorateSchemeTree(res.data)
        tree.value = res.data

        const node = id.value ? leaves.find(item => item.id == id.value) : leaves[0]
        if (!node) {
            emit('init')
            return
        }

        treRef.value?.setCurrentKey(node.id)
        emit('init', { level: 2, ...node })
    })
}

const clickNode = (e: any) => {
    planId.value = e?.children ? e.id : e.pid
    id.value = e.id
    emit('nodeChange', e)
    emit('node-click', e)
}

bootstrapWithTemplate(
    props.template,
    getTreeList,
    () => querySysExcel({}),
    data => emit('Policy', data)
)
</script>

<style lang="scss" scoped>
.cn-tree {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    height: 100%;
    width: 100%;
    height: calc(100vh - 125px);
    overflow-y: auto;

    :deep(.el-tree) {
        border: 1px solid var(--el-border-color);
    }

    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: var(--el-color-primary-light-7);
    }

    .menu-collapse {
        color: var(--el-color-primary);
    }
}
</style>
