<template lang="pug">
    .oc-tab
        .head(ref="head", @click="headClickHandler($event)")
            slot(name="head")
        .body(ref="body")
            slot(name="body")
</template>

<script>    
    export default {
        name: 'oc-tab',
        props: {
            isHover: { type: Boolean, default: false },
            dropBodyStyle: null,
            isSetMinWidth: { type: Boolean, default: true}
        },
        
        data() {
            return {
                activeIndex: 0
            }
        },

        mounted() {
            this.$nextTick(_ => {
                let firstHead = this.$refs.head.querySelector('.item');
                firstHead && firstHead.classList.add('active');
                let firstBody = this.$refs.body.querySelector('.item');
                firstBody && firstBody.classList.add('active');
            })
        },
        
        methods: {
            init() {
                this.setActiveIndex(0);
            },
            
            headClickHandler(event) {
                let target = $(event.target);
                if(!target.hasClass('item')) {
                    target = target.parents('.item:eq(0)');
                }
                if(!target.length) {
                    return;
                }
                let index = target.index();
                this.setActiveIndex(index);

                this.$emit('headClick', index, target);
            },
            
            setActiveIndex(index) {
                this.activeIndex = index;
                let headItems = $(this.$refs.head).find('.item');
                let bodyItems = $(this.$refs.body).find('.item')
                headItems.removeClass('active');
                bodyItems.removeClass('active');
                headItems[index].classList.add('active');
                bodyItems[index].classList.add('active');
            }
         }
    }
</script>

<style lang="stylus" scoped>
    .oc-tab 
        // border 2px solid #f0f0f0
        .head
            width 100%
            background #fff
            border-bottom solid 1px #ddd 
            .item
                // border-right 1px solid #eee
                padding 0 15px
                display inline-block
                line-height 34px
                cursor pointer
                &.active
                    background #fff
                    color #2639a0
                    border-bottom solid 2px #2639a0
        .body
            padding 15px
            .item
                display none
                &.active 
                    display block
</style>

