<template>
    <div class="container">
        <div class="row" style="margin-top:20px;">
            <div class="col-sm-9" style="padding:0 40px;">
                <tabs :data="tabs" @click="tabClick"></tabs>
                <div class="myfollow" v-show="active === 0">
                    <div class="follow-item" v-for="n in 4">
                        <img src="../assets/headimg.png">
                        <span>王大白</span>
                        <button class="btn btn-primary">取消关注</button>
                    </div>
                </div>
                <div class="fans" v-show="active === 1">
                    <div class="follow-item" v-for="n in 4">
                        <img src="../assets/headimg.png">
                        <span>王大白</span>
                        <button class="btn btn-primary">关注</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <list :data="list" :active="2"></list>
            </div>
        </div>
    </div>
</template>

<script>
    import List from './SideList.vue'
    import Tabs from './Tabs.vue'
    import {SIDE_LIST} from '../const'

    export default{
        components:{
            List,
            Tabs
        },
        data(){
            return {
                list:SIDE_LIST,
                tabs:[{
                    title:'我的关注'
                },{
                    title:'粉丝'
                }],
                active:0
            }
        },
        methods:{
            tabClick(idx){
                if(this.active !== idx)this.active = idx;
            }
        }
    }
</script>

<style scoped>
    .follow-item{
        font-size:0;
        line-height:32px;
        margin-top:10px;
    }

    .follow-item img{
        width:32px;
        height:32px;
    }

    .follow-item span{
        font-size:14px;
        vertical-align: middle;
        margin-left:10px;
    }

    .follow-item button{
        float:right;
        width:100px;
    }
</style>
