<template lang="pug">
    div#ocTreeContainer(ref="ocTreeContainer")
        #ocTree
            input.w(type="text", placeholder="Search", v-if="isFilter")
            TreeView(ref="treeView", :model="data", :renderText="renderText", @itemClick="treeClick")
        div.detail
            p(style="background-color: #f0f0f0; line-height: 34px; padding-left: 15px;") Node Info
                span.fr
                    //- button.emphasize.sm.mr15(type="button", v-on:click="_moveNode") Move node
                    button.secondary.sm.mr15(type="button", v-on:click="_showAddView") Add new
                    button.red.sm.mr20(type="button", v-on:click="_deleteClickHanlder") Delete
            
            form(ref="formDetail", v-on:submit.prevent="_submit").pt30.pl30
                p.mb20.primary(v-if="isAddNew") Add new tree node
                p 文本：
                    input.w500(type="text", name="name", required)
                p.mt20
                    span.vt 描述：
                    textarea.w500(style="min-height: 150px;", type="text", name="description")
                button.w150.mt20.main(style="margin-left: 38px;" type="submit") Save

</template>

<script>
    import TreeView from './treeView';
    import Tips from './dialog';
    import ocToolsForm from './js/form'
    
    export default {
        name: 'oc-tree',
        components: { TreeView },
        props: {
            data: Object,
            isFilter: { type: Boolean, default: true },
            renderText: Function
        },
        data() {
            return {
                isAddNew: false,
                rootEle: null,
                activeElement: null,
                tipsMsg: '',
                drag: ''
            }
        },

        
        methods: {
            treeClick(item) {
                ocToolsForm.fill(this.$refs.formDetail, item.model);
            },

            _deleteClickHanlder(e) {
                this.$refs.treeView.store.activeElement.deleteClickHanlder(e);
            },

            _showAddView() {
                this.$refs.formDetail.reset();
                this.$refs.formDetail.querySelector('input').focus();
                this.isAddNew = true;
            },

            treeItemClick(e) {
                console.log('item click');
                console.log(e.target);
            },
            
            // deleteHanlder(model, cb) {
            //     console.warn('delete tree node hanlder should to rewrite');
            //     if(!this.activeElement) {
            //         return;
            //     }

            //     setTimeout(e => {
            //         cb(true);
            //     }, 1000)
            // },

            // addHanlder(model, cb) {
            //     console.warn('add tree node hanlder should to rewrite');
            //     if(!this.activeElement) {
            //         return;
            //     }
            //     model.id = 1000;
            //     cb(model);
            // },
            
            _submit() {
                let model = ocToolsForm.getJson(this.$refs.formDetail);
                model.fid = this.activeElement.model.id;
                model.items = [];
                
                this.addHanlder(model, ret => {
                    if(ret) {
                        this.$refs.tips.msg = 'Add node success';
                        this.activeElement.model.items.push(model);
                        setTimeout(e => {
                            this.activeElement.$el.classList.add('open');
                            this.activeElement.$el.classList.add('active');
                        }, 10)
                    }
                });
            },

            _moveNode(e) {
                this.$refs.ocTreeContainer.classList.toggle('drag');
                var btn = e.srcElement || e.target;
                if(btn.innerText == 'Move node') {
                    btn.innerText = 'Cancel move';
                }
                else {
                    btn.innerText = 'Move node';
                }
            }
        }
    }
</script>

<style lang="stylus">
    #ocTreeContainer
        display block
        height 100%
        #ocTree
            >input
                background-color rgba(216, 222, 228, 1)
                box-shadow 0
                border 0
                height 34px
   
        a
            text-decoration underline
            margin-left 50px
    #ocTreeContainer
        display flex
        height 100%
        >ul
            flex 0 0 300px
            overflow auto
        >.detail
            flex 1
            background #fff
</style>

            
