<!--lj-list-tree树形控件的节点，不单独使用-->
<!--events-->
    <!--行点击item-clicked，用于向上层冒泡-->
<template>
    <mu-list-item button :ripple="true" :nested="thisNodeNested" :open="nestOpen" @toggle-nested="nestOpen = !nestOpen" @click="itemClicked(node)">
        <mu-list-item-title>{{node[valueName]}}</mu-list-item-title>
        <mu-list-item-action v-if="thisNodeNested">

            <i v-if="nestOpen" class="iconfont icon-up"></i>
            <i v-else class="iconfont icon-down"></i>
        </mu-list-item-action>
        <template v-if="node.children">
            <lj-list-tree-node
                    v-for="child in node.children"
                    :node="child"
                    :key-name="keyName"
                    :value-name="valueName"
                    :grade="grade+1"
                    @item-clicked="itemClicked"
                    slot="nested"/>
        </template>
    </mu-list-item>
</template>

<script>
    export default {
        name: "lj-list-tree-node",
        props: {
            keyName: {
                type: String,
                default: "id"
            },
            parentKeyName: {
                type: String,
                default: "parentid"
            },
            valueName: {
                type: String,
                default: "name"
            },
            // 节点对象，数据定义看lj-list-tree的算法
            node: {
                type: Object
            },
            // dataList: {
            //     type: Array,
            //     default: function () {
            //         return [];
            //     }
            // },
            // 初始化折叠层是否展开
            open: {
                type: Boolean,
                default: false
            },
            // 层级，0为1的父节点，以此类推
            grade: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                // divStyle: {
                //     paddingLeft: "1rem"
                // },
                nestOpen:this.open
            }
        },
        methods: {
            itemClicked(item) {
                this.$emit("item-clicked", item);
            }
        },
        computed:{
            thisNodeNested(){
                return this.node.children !== undefined;
            }
        }
    }
</script>
