<template>

    <div>

        <div class="btn-title">

            <el-button @click="addRule(ruleDataList.id)">添加父节点</el-button>

        </div>

        <RuleTable :pid="ruleDataList.id" :ruleData="ruleDataList.children" @delRule="delRule" @addRule="addRule"></RuleTable>

    </div>

</template>

<script>

import RuleTable from './RuleTable.vue'

export default {

    components: {

        RuleTable

    },

    data() {

        return {

            ruleDataList: {

                id: this.$nanoid(),//自定义id

                lvl: 1,//节点等级

                theme: '',//主题

                time: '',//次数

                children: []

            }

        }

    },

    methods: {

        addRule(id) {

            if (id === this.ruleDataList.id) {//>>>一级节点

                this.ruleDataList.children.push({

                    id: this.$nanoid(),//自定义id

                    lvl: 1,//节点等级

                    theme: '',//主题

                    time: '',//次数

                    children: []

                })

            } else {

                this.ruleDataList.children.map(e => {

                    if (e.id === id) {//>>>二级节点

                        let obj = JSON.parse(JSON.stringify(e))

                        obj.id = this.$nanoid();//自定义id

                        obj.lvl = 2

                        e.children.push(obj, {

                            id: this.$nanoid(),//自定义id

                            lvl: 2,//节点等级

                            theme: '',//主题

                            time: '',//次数

                            children: []

                        })

                    } else {

                        let flag = e.children.find(i => i.id === id)

                        if (flag) {//>>>三级节点

                            e.children.push({

                                id: this.$nanoid(),//自定义id

                                lvl: 2,//节点等级

                                theme: '',//主题

                                time: '',//次数

                                children: []

                            })

                        }

                    }

                })

            }

        },

        delRule(id) {

            this.ruleDataList.children = this.ruleDataList.children.filter(i => {

                // 如果是二级节点

                if (i.children && i.children.length > 0) {

                    i.children = i.children.filter(j => {

                        return j.id != id

                    })

                    return i

                }

                // 如果是一级节点

                return i.id != id

            }).map(k => {

                if (k.children && k.children.length === 1) {

                    let obj = JSON.parse(JSON.stringify(k.children[0]))

                    obj.lvl = 1

                    return obj //如果只有一个二级节点，则变为一级节点

                }

                return k //其余，则原样返回

            })

        }

    }

}

</script>

<style>

.btn-title {

    display: flex;

    justify-content: end;

    margin-bottom: 10px;

}

</style>

<template>

    <el-card style="margin-top:5px">

        <el-row>

            <el-col :span="2" align="center" v-if="ruleData.length > 1">

                <div class="left-top" :style="'height:' + halfHeight + 'px'"></div>

                <div class="left-center">组</div>

                <div class="left-bottom" :style="'height:' + halfHeight + 'px'"></div>

            </el-col>

            <el-col :span="22" :id="pid">

                <el-row v-for="item in ruleData" :key="item.id">

                    <RuleTable v-if="item.children.length > 0" :pid="item.id" :ruleData="item.children"

                        @delRule="delRule" @addRule="addRule"></RuleTable>

                    <el-form v-else>

                        <el-col :span="8" class="pd5">

                            <el-form-item prop="theme">

                                <el-input v-model="item.theme" placeholder="请输入主题"></el-input>

                            </el-form-item>

                        </el-col>

                        <el-col :span="8" class="pd5">

                            <el-form-item prop="time">

                                <el-input v-model="item.time" placeholder="请输入次数"></el-input>

                            </el-form-item>

                        </el-col>

                        <el-col :span="6" class="pd5">

                            <el-button type="danger" @click="delRule(item.id)">删除</el-button>

                            <el-button type="primary" @click="addRule(item.id)">新增</el-button>

                        </el-col>

                    </el-form>

                </el-row>

            </el-col>

        </el-row>

    </el-card>

</template>

<script>

export default {

    name: 'RuleTable', //子组件的name名要和组件名一致

    props: {

        ruleData: {

            type: Array,

            default: () => []

        },

        pid: {

            type: String,

            default: () => ''

        }

    },

    data() {

        return {

            halfHeight: 0,//竖线的高度

        }

    },

    watch: {

        ruleData: {

            handler(val) {

                console.log("ruleData--val:", val)

                if (val) {

                    this.updateHeight()

                }

            },

            deep: true,

            immediate: true

        }

    },

    methods: {

        delRule(id) {

            this.$emit('delRule', id)

        },

        addRule(id) {

            this.$emit('addRule', id)

        },

        updateHeight() {

            this.$nextTick(() => {

                let leftHeight = document.getElementById(this.pid + '').offsetHeight

                console.log("实时高度--leftHeight：", leftHeight)

                this.halfHeight = (leftHeight - 21) / 2

            })

        }

    }

}

</script>

<style>

.left-top {

    width: 2px;

    background-color: #bbb;

}

.left-bottom {

    width: 2px;

    background-color: #bbb;

}

.pd5 {

    padding-left: 5px;

}

</style>