/**
 * @author xiufu.wang
 */
import ElCollapseItem from 'mars-pro/packages/collapse-item'
import ElCard from 'mars-pro/packages/card'
import omit from 'mars-pro/src/pro/omit'
import ProScrollActiveMark from 'mars-pro/packages/pro-scroll-active-mark'

export default {
    name: 'ProLayoutContentTypeItem',
    componentName: 'ProLayoutContentTypeItem',
    components: {
        ElCollapseItem,
        ElCard,
        ProScrollActiveMark
    },
    inject: ['proLayoutContentType'],
    props: {
        // 标题 or label.slot
        label: String,
        //名字唯一
        name: String,
        //lazy(if+show) | if | show
        optimize: {
            type: String,
            default: 'lazy'
        },
        //默认是否展开
        defaultActive: {
            type: Boolean,
            default: true
        },
        // 禁止打开
        disabled: Boolean
    },
    created() {
        this.hadRender = this.active
    },
    computed: {
        active() {
            return this.proLayoutContentType.currentName === this.name
        },
        isModalTab() {
            return this.proLayoutContentType.modal === 'tab'
        },
        isCollapsePanel() {
            return this.proLayoutContentType.contentLayoutType === 'collapse'
        },
        // 适配el-tabs tab-nav
        paneName() {
            return this.name;
        }
    },
    methods: {
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            const _slots = {
                ...slots,
                ...(this.$slots.label ? {
                    title: this.$slots.label,
                    header: this.$slots.label
                } : {})
            }
            return Object.keys(_slots).map(item => (
                <template slot={item}>{_slots[item]}</template>
            ))
        },
        renderWaper(vnodes, _datas) {
            const isTag = this.isCollapsePanel ? 'ElCollapseItem' : 'ElCard'
            const _componentDatas = {
                is: isTag,
                props: {
                    title: this.label,
                    header: this.label,
                    name: this.name,
                    shadow: 'never',
                    ...this.$attrs
                },
                attrs: this.$attrs,
                'class': {
                    'item-content-typewapper': true,
                    'item-content-typewapper--card': !this.isCollapsePanel,
                    'item-content-typewapper--collapseItem': this.isCollapsePanel
                }
            }
            return (
                <component {..._componentDatas}>
                    <ProScrollActiveMark mark={this.name} />
                    {this.renderSlots()}
                    <div {..._datas}>{vnodes}</div>
                </component>
            )
        }
    },
    render() {
        if (this.disabled === true) {
            return null
        }
        // 如果没有激活
        if (!this.active && this.isModalTab) {
            if ((this.optimize === 'lazy' && !this.hadRender) || this.optimize === 'if') {
                return null
            }
        }
        const _datas = {
            directives: [],
            'class': {
                'item-content': true
            }
        }

        if (this.isModalTab && (this.optimize === 'show' || this.optimize === 'lazy')) {
            _datas.directives.push(
                {
                    name: 'show',
                    value: this.active
                }
            )
        }
        if (!this.hadRender) {
            this.hadRender = true
        }

        // tab模式
        if (this.isModalTab) {
            return <div {..._datas}>{this.$slots.default}</div>
        }

        // 平铺模式
        return (
            this.renderWaper(this.$slots.default, _datas)
        )
    },
    mounted() {
        if (this.proLayoutContentType.$refs.collapse && this.defaultActive !== false) {
            const _activeNames = this.proLayoutContentType.$refs.collapse.activeNames || []
            this.proLayoutContentType.$refs.collapse.activeNames = _activeNames.concat([this.name])
            this.proLayoutContentType.currentName = this.proLayoutContentType.$refs.collapse.activeNames
        }
    }
}