

<script>
import TabsNav from './tabs-nav';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-tabs`,
    mixins: [prefixMixins],
    components: {
        TabsNav
    },
    provide() {
        return {
            jddTabs: this
        };
    },
    data() {
        return {
            panels: [],
            model: null,
            nextIndex: null,
            prevIndex: null,
            max: 0,
            itemWidth: 0
        };
    },
    props: {
        value: String,
        position: {
            type: String,
            default: 'top'
        },
        size: {
            type: String,
            default: 'small'
        },
        type: {
            type: String,
            default: 'label'
        }
    },
    watch: {
        model: function(val) {
            this.$emit('input', val);
        },
        value: function(val) {
            this.model = val;
        }
    },
    computed: {
        tabClass() {
            let clsNames = [`${prefix}-tabs`];
            clsNames.push(`${prefix}-tabs--${this.position}`);
            clsNames.push(`${prefix}-tabs--${this.size}`);
            clsNames.push(`${prefix}-tabs--${this.type}`);
            return clsNames;
        },
        tabHeaderClass() {
            let clsNames = [`${prefix}-tabs__header`];
            return clsNames;
        },
        tabContentClass() {
            let clsNames = [`${prefix}-tabs__content`];
            return clsNames;
        }
    },
    methods: {
        clickHandle(item, index) {
            this.prevIndex = this.panels.map(m => m.label).indexOf(this.model);
            this.model = item.label;
            this.nextIndex = index;
        },
        addPanel(panel) {
            panel.index = this.panels.length;
            this.$set(this.panels, this.panels.length, panel);
        },
        removePanel(panel) {
            this.panels.splice(this.panels.indexOf(panel), 1);
        }
    },
    mounted() {
        this.model = this.value;
        this.$nextTick(() => {
            this.max = Math.max(...this.panels.map(m => m.$el.offsetHeight));
            this.itemWidth = this.$el.offsetWidth - 40;
        });
    },
    render(h) {
        let {
            tabHeaderClass,
            panels,
            model,
            size,
            position,
            tabContentClass,
            tabClass
        } = this;
        let nav = (
            <TabsNav
                class={tabHeaderClass}
                panels={panels}
                onClick={this.clickHandle}
                active={model}
                size={size}
                position={position}
            />
        );
        let content = (
            <div
                class={tabContentClass}
                style={{ height: `${this.max + 40}px` }}
            >
                {this.$slots.default}
            </div>
        );

        let children = [nav];
        if (this.$scopedSlots.nav) {
            children = [
                <div class="custom-nav">
                    {panels.map((m, n) => {
                        let child = (
                            <div
                                class={{ active: m.label == model }}
                                onClick={() => {
                                    this.clickHandle(m, n);
                                }}
                            >
                                {m.label}
                            </div>
                        );
                        if (this.$scopedSlots.nav) {
                            child = this.$scopedSlots.nav(m);
                        }
                        return child;
                    })}
                </div>
            ];
        }
        if (['left', 'top'].indexOf(position) > -1) {
            children.push(content);
        } else {
            children.unshift(content);
        }

        return (
            <div class={tabClass} role="tab">
                {children}
            </div>
        );
    }
};
</script>