<template>
    <div class="tabs">
        <a href="javascript:void 0;" :class="{active:activeId === index}" v-for="(item,index) in data" @click="tabClick(index)">
            {{item.title}}
            <span></span>
        </a>
        <div class="pull-right" style="line-height:50px;">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default{
        props:{
            data:Array,
            active:Number
        },
        data(){
            return {
                activeId:this.active ? this.active : 0
            }
        },
        methods:{
            tabClick(idx){
                this.activeId = idx;
                this.$emit('click',idx);
            }
        }
    }
</script>

<style scoped>
    .tabs{
        border-bottom:1px solid #d6d6d6;
    }

    .tabs > a{
        display:inline-block;
        position:relative;
        line-height:50px;
        color:#b8b8b8;
        padding:0 10px;
    }

    .tabs > a:not(:first-child){
        margin-left:10px;
    }

    .tabs > a:hover{
        color:#000;
        text-decoration: none;
    }

    .tabs > a:active{
        text-decoration: none;
    }

    .tabs > a > span{
        display:none;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:3px;
        background-color:#fdb92c;
    }

    .tabs > a.active{
        color:#000;
        text-decoration: none;
    }
    .tabs > a.active > span{
        display:block;
    }
</style>
