import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import ProSelectTagsList from './list'
import Popper from './popper-mixin'
export default {
    name: 'ProSelectTagsCollapsePanel',
    componentName: 'ProSelectTagsCollapsePanel',
    mixins: [Popper],
    directives: { Clickoutside },
    components: {
        ElCollapseTransition,
        ProSelectTagsList
    },
    inject: {
        proSelectTags: {
            default: ''
        }
    },
    watch: {
        'proSelectTags.expanded': function () {
            this.visible = this.proSelectTags.expanded
             if (this.proSelectTags.mode === 'popper') { 
                this.showPopper = this.visible
            }
        }
    },
    data() {
        //启用poper覆盖ref
        this.placementCoverEl = true
        return {
            visible: false
        }
    },
    methods: {
        handleAfterLeave() {
            if (this.proSelectTags.mode !== 'popper') { 
                this.proSelectTags.expanded = false
            }
        },
        handleClose() {
            if (this.visible === false) { 
                return
            }
            this.visible = false
            if (this.proSelectTags.mode === 'popper') { 
                this.proSelectTags.expanded = false
            }
        }
    },
    render() {
        const _datas = {
            'class': {
                'more-row': true,
                'pro-select-tags-collapse-panel': true,
                'pro-select-tags-collapse-panel--popper': this.proSelectTags.mode === 'popper',
            },
            props: {
                isMore: true
            },
            attrs: {
                'transition-minHeight': '28px'
            },
            directives: [
                { name: 'show', value: this.visible },
                {name: 'clickoutside', value: this.handleClose}
            ]
        }
        return (<ElCollapseTransition on-afterLeave={this.handleAfterLeave}>
            <ProSelectTagsList {..._datas}/>
        </ElCollapseTransition>
        )
    }
}