/**
 * 分类布局排版
 * @author xiufu.wang
 */
import ProLayoutContentBorder from 'mars-pro/packages/pro-layout-content-border'
import ElCollapse from 'mars-pro/packages/collapse'
import NavList from './navs/nav-list'
import NavCustomer from './navs/nav-customer'
import NavTab from './navs/nav-tab'

export default {
    name: 'ProLayoutContentType',
    componentName: 'ProLayoutContentType',
    components: {
        ProLayoutContentBorder,
        ElCollapse,
        NavList,
        NavCustomer,
        NavTab
    },
    provide() {
        return {
            proLayoutContentType: this,
            // 适配tabs tab-nav
            rootTabs: this
        }
    },
    props: {
        activeName: String,
        // tab 模式 | 非tab模式(会自动启用锚点导航)
        modal: {
            type:String,
            default:''
        },
        // 内容布局类型 collapse | default (card)
        contentLayoutType: String,
        //nav position: top|left|right|bottom
        navPosition: {
            type: String,
            default: 'left'
        },
        // nav 类型: list | tab | customer
        navType: {
            type: String,
            default: 'list'
        },
        enableNav: {
            type: Boolean,
            default: true
        },
        navSize: {
            type: Number,
            default: 150
        }
    },
    data() {
        return {
            // pro-layout-content-type-item集合
            items: [],
            // 档期激活项
            currentName: this.activeName
        }
    },
    computed: {
        sizeStyle() { 
            if (this.navSize === 0 || this.navType === 'tab') { 
                return {}
            }
            return {[(this.navPosition === 'left' || this.navPosition === 'right') ? 'width' : 'height']: this.navSize + 'px'}
        },
        tabPosition() { 
            return this.navPosition !== 'bottom' ? 'top' : 'bottom'
        }
    },
    watch: {
        activeName() { 
            if (this.activeName !== this.currentName) { 
                this.onActiveTab(this.activeName)
            }
        }
    },
    methods: {
        onActiveTab(activeName) { 
            this.currentName = activeName
            this.$emit('active', activeName)
            this.$emit('update:active', activeName)
        },
        calcItemInstances(isForceUpdate = false) {
            if (this.$slots.default) {
                const itemSlots = this.$slots.default.filter(vnode => vnode.tag &&
                    vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ProLayoutContentTypeItem');
                const items = itemSlots.map(({ componentInstance }) => componentInstance);
                const itemsChanged = !(items.length === this.items.length && items.every((item, index) => item === this.items[index]));
                if (isForceUpdate || itemsChanged) {
                    this.items = items;
                }
            } else if (this.items.length !== 0) {
                this.items = [];
            }
        },
        renderNav() { 
            if (this.enableNav === false) { 
                return null
            }
            const _datas = {
                is: 'nav-' + this.navType,
                props: {
                    items: this.items,
                    ...this.$attrs
                },
                style: {
                    ...this.sizeStyle
                },
                attrs: this.$attrs,
                on: {
                    active: this.onActiveTab
                }
            }
            let navPosition = this.navPosition
            if (this.navType === 'tab') { 
                navPosition = navPosition !== 'bottom' ? 'top' : 'bottom'
            }

            if (this.navType === 'list') { 
                navPosition = navPosition !== 'right' ? 'left' : 'right'
            }
            return (
                <template slot={navPosition}>
                    <component {..._datas}></component>
                </template>
            )
        }
    },
    render() {
        const _datas = {
            'class': {
                'pro-layout-content-type': true
            },
            props: {
                value: this.currentName,
                ...this.$attrs
            },
            attrs: this.$attrs,
        }
        const _collapseDatas = {
            props: {
                value:this.currentName,
                ...this.$attrs
            },
            attrs: this.$attrs,
            on: this.$listeners,
            'class': {
                'pro-layout-content-type-collapse': true
            },
            ref: 'collapse'
        }
        return (
            <ProLayoutContentBorder {..._datas}>
                {
                    this.contentLayoutType !== 'collapse' ? this.$slots.default : (
                        <ElCollapse {..._collapseDatas}>
                            {
                                this.$slots.default
                            }
                        </ElCollapse>
                    )
                }
                {
                    this.renderNav()
                }
            </ProLayoutContentBorder>
        )
    },
    mounted() {
        this.calcItemInstances();
    },

    updated() {
        this.calcItemInstances();
    }
}