<template>
    <div>
        <div class="bigBox">
            <el-dialog v-model="dialogVisible" title="选择数据" width="30%" @close="sureclose">
                <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                    :props="{ class: customNodeClass }" />
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cleanBox">取消</el-button>
                        <el-button type="primary" @click="sureArr">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>

    </div>
</template>

<script>
import { ref, onMounted, toRefs } from 'vue';
export default {
    props: {
        treeMool: {
            type: Boolean,
            required: true
        }
    },
    setup(props, { emit }) {
        let treeData = ref([
            {
                id: 1,
                label: 'Level one 1',
                children: [
                    {
                        id: 4,
                        label: 'Level two 1-1',
                        isPenultimate: true,
                        children: [
                            {
                                id: 9,
                                label: 'Level three 1-1-1',
                            },
                            {
                                id: 10,
                                label: 'Level three 1-1-2',
                            },
                        ],
                    },
                ],
            },
            {
                id: 2,
                label: 'Level one 2',
                isPenultimate: true,
                children: [
                    {
                        id: 5,
                        label: 'Level two 2-1',
                    },
                    {
                        id: 6,
                        label: 'Level two 2-2',
                    },
                ],
            },
            {
                id: 3,
                label: 'Level one 3',
                isPenultimate: true,
                children: [
                    {
                        id: 7,
                        label: 'Level two 3-1',
                    },
                    {
                        id: 8,
                        label: 'Level two 3-2',
                    },
                ],
            },
        ])
        let result = props.treeMool
        let { cleanBox, sureArr } = toRefs(props)
        let dialogVisible = ref(false)
        function getLine() {
            dialogVisible.value = result
        }
        function customNodeClass(data, node) {
            if (data.isPenultimate) {
                return 'is-penultimate'
            }
            return null
        }
        function getBack() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        function nowBack() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        function sureclose() {
            dialogVisible.value = false
            emit("treeBack", dialogVisible.value)
        }
        onMounted(() => {
            getLine()
        })
        return {
            treeData,
            customNodeClass,
            dialogVisible,
            cleanBox: getBack,
            sureArr: nowBack,
            sureclose,
            getLine,
            result,
        }
    }
}
</script>

<style scoped>
.is-penultimate>.el-tree-node__content {
    color: #626aef;
}

.el-tree-node.is-expanded.is-penultimate>.el-tree-node__children {
    display: flex;
    flex-direction: row;
}

.is-penultimate>.el-tree-node__children>div {
    width: 25%;
}
</style>