<template>
    <div
        class="cn-tree-root"
        :class="{ 'is-collapsed': menuCollapse, 'is-fill-height': props.fillHeight }"
        :style="{ width: menuCollapse ? '40px' : props.width }"
    >
        <!-- <Icon
            v-show="menuCollapse"
            @click="onMenuCollapse"
            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
            size="18px"
            class="cn-tree-root__collapse-btn cn-tree-root__collapse-btn--float"
        /> -->
        <div class="cn-tree" :class="{ 'is-hidden': menuCollapse }">
            <div class="cn-tree__toolbar">
                <el-input maxlength="32" show-word-limit 
                    
                    v-model.trim="filterText"
                    placeholder="请输入内容"
                    clearable
                    class="cn-tree__search"
                >
                    <template #prefix>
                        <Icon name="el-icon-Search" style="font-size: 16px" />
                    </template>
                </el-input>
                <el-tooltip v-if="props.showPush" placement="bottom" :hide-after="0" content="台账推送">
                    <Icon
                        name="el-icon-Promotion"
                        size="20px"
                        class="cn-tree__push-btn"
                        :style="{ color: config.getColorVal('elementUiPrimary') }"
                        @click="onAdd"
                    />
                </el-tooltip>
                <!-- <Icon
                    v-if="props.canExpand"
                    @click="onMenuCollapse"
                    name="el-icon-Fold"
                    size="18px"
                    class="cn-tree__collapse-btn"
                /> -->
            </div>

            <el-tree
                ref="treeRef"
                :style="{ height: treeHeight,overflowY: 'auto' }"
                :props="defaultProps"
                highlight-current
                :default-expand-all="false"
                @check-change="checkTreeNodeChange"
                :filter-node-method="filterNode"
                node-key="id"
                v-bind="$attrs"
            >
                <template #default="{ node, data: nodeData }">
                    <span class="custom-tree-node">
                        <Icon
                            v-if="nodeData.icon"
                            :name="nodeData.icon"
                            style="font-size: 16px"
                            :style="{ color: nodeData.color }"
                        />
                        <span class="custom-tree-node__label">{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </div>
    </div>
</template>

<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch, computed } from 'vue'
import { useConfig } from '@/stores/config'
import { createTreeFilterNode } from './govern/treeFilterUtils'

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

interface Props {
    width?: string
    canExpand?: boolean
    showPush?: boolean
    /** 默认高度基准偏移（100vh - baseOffset） */
    baseOffset?: number
    /** 在 baseOffset 基础上额外减去的高度 */
    height?: number
    /** 自定义树高度，优先级最高 */
    treeHeight?: string
    /** 撑满父容器高度 */
    fillHeight?: boolean
}

const props = withDefaults(defineProps<Props>(), {
    width: '270px',
    canExpand: true,
    showPush: false,
    baseOffset: 190,
    height: 0,
    treeHeight: '',
    fillHeight: false
})

const emit = defineEmits(['checkTreeNodeChange', 'onAdd', 'changePointType'])

const config = useConfig()
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = { label: 'name', value: 'id' }
const filterNode = createTreeFilterNode()

const SEARCH_BAR_HEIGHT = 42

const treeHeight = computed(() => {
    if (props.treeHeight) return props.treeHeight
    if (props.fillHeight) return `calc(100% - ${SEARCH_BAR_HEIGHT}px)`
    return `calc(100vh - ${props.baseOffset}px - ${props.height}px)`
})

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

const onMenuCollapse = () => {
    menuCollapse.value = !menuCollapse.value
    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}

const checkTreeNodeChange = () => {
    emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
}

const onAdd = () => emit('onAdd')

const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>

<style lang="scss" scoped>
.cn-tree-root {
    // width: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 270px;
    transition: width 0.3s;
    box-sizing: border-box;
    

    &.is-fill-height {
        height: 100%;
    }

    &__collapse-btn {
        color: var(--el-color-primary);
        cursor: pointer;
        flex-shrink: 0;

        &--float {
            margin: 20px 0 0 10px;
        }
    }
}

.cn-tree {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    transition: opacity 0.3s;

    &.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    &__toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    &__search {
        flex: 1;
        min-width: 0;
    }

    &__push-btn,
    &__collapse-btn {
        color: var(--el-color-primary);
        cursor: pointer;
        flex-shrink: 0;
    }

    &__body {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

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

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

.custom-tree-node {
    display: flex;
    align-items: center;
    min-width: 0;

    &__label {
        margin-left: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
</style>
