<template>
    <el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto;width:100%">
        <template #header>
            <div class="card-header">
                <div class="tree-h-flex">
                    <div class="tree-h-left">
                        <el-input :prefix-icon="Search" v-model="filterText" placeholder="机构名称" />
                    </div>
                    <div class="tree-h-right">
                        <el-dropdown @command="handleCommand">
                            <el-button style="margin-left: 8px; width: 34px">
                                <el-icon class="el-icon--center">
                                    <more-filled />
                                </el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="expandAll">全部展开</el-dropdown-item>
                                    <el-dropdown-item command="collapseAll">全部折叠</el-dropdown-item>
                                    <el-dropdown-item command="rootNode">根节点</el-dropdown-item>
                                    <el-dropdown-item command="refresh">刷新</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </template>
        <div style="margin-bottom: 45px" v-loading="state.loading">
            <el-tree ref="treeRef" class="filter-tree" :data="state.orgData" node-key="workShopTypeCode"
                :props="{ children: 'children', label: 'label' }" :filter-node-method="filterNode"
                @node-click="nodeClick" :show-checkbox="state.isShowCheckbox" :default-checked-keys="state.ownOrgData"
                highlight-current check-strictly>
                <template #default="{ node }">
                    <el-icon v-if="node.level == 1" size="16"
                        style="margin-right: 3px; display: inline; vertical-align: middle"><ele-School /></el-icon>
                    <el-icon v-else-if="node.level == 2" size="16"
                        style="margin-right: 3px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon>
                    <el-icon v-else size="16"
                        style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon>
                    {{ node.label }}
                </template>
            </el-tree>
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import type { ElTree } from 'element-plus';
import { Search, MoreFilled } from '@element-plus/icons-vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi } from '/@/api-services/api';
import { SysOrg } from '/@/api-services/models';
import { getListMesProcessLine } from '/@/api/mes/mesProcessLine';

const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const state = reactive({
    loading: false,
    orgData: [] as Array<SysOrg>,
    isShowCheckbox: false,
    ownOrgData: [],
});

onMounted(() => {
    initTreeData();
});

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

const initTreeData = async () => {
    state.loading = true;
    // var res = await getAPI(getMesWorkShopTypeTree).apiSysOrgListGet(0);
    // state.orgData = res.data.result ?? [];
    let list = await getListMesProcessLine();
    let data = list.data.result ?? [];

    var node1 = [];
    data.forEach((item: any) => {
        var t = {
            label:`[${item.processLineCode}]${item.processLineName}`,
            value: `${item.id}`,
            children:[],
            process:false,
            ...item
        };
        item.processLineProcList.forEach((item2: any) => {
            var t2 = {
                label:`[${item2.processCode}]${item2.processInfo?.processName}`,
                value: `${item2.processCode}`,
                process:true,
                ...item
            };
            t.children.push(t2);
        });
        node1.push(t);
    });

    state.orgData = node1;
    state.loading = false;
};

// 设置默认选择
const setCheckedKeys = (orgData: any) => {
    state.isShowCheckbox = true;
    treeRef.value!.setCheckedKeys([]);
    state.ownOrgData = orgData;
};

// 获取已经选择
const getCheckedKeys = () => {
    return treeRef.value!.getCheckedKeys();
};

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

const handleCommand = async (command: string | number | object) => {
    if ('expandAll' == command) {
        for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
            treeRef.value!.store._getAllNodes()[i].expanded = true;
        }
    } else if ('collapseAll' == command) {
        for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
            treeRef.value!.store._getAllNodes()[i].expanded = false;
        }
    } else if ('refresh' == command) {
        initTreeData();
    } else if ('rootNode' == command) {
        emits('node-click', null);
    }
};

// 与父组件的交互逻辑
const emits = defineEmits(['node-click']);
const nodeClick = (node: any) => {
    emits('node-click', node);
};

// 导出对象
defineExpose({ initTreeData, setCheckedKeys, getCheckedKeys });
</script>

<style lang="scss" scoped>
.tree-h-flex {
    display: flex;
}

.tree-h-left {
    flex: 1;
    width: 100%;
}

.tree-h-right {
    width: 42px;
    min-width: 42px;
}
</style>
