<template>
    <div id="menuTab-skin" class="wrapper">
        <ul class="list">
            <li class="item" :class="{'z-active': active == index}" v-for="(item,index) in menuList" :key="index" @click="_tabSwitch(index)">
                <span>{{item.menuName}}</span>
            </li>
        </ul>
        <div class="follow" v-if="wechatInfo.status" @click="_showFollow">关注</div>
    </div>
</template>

<script>
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        props: {
            value: {}
        },
        data(){
            return {
                active: this.value,
            }
        },
        computed: {
            ...mapGetters({
                'menuList': 'menuList',
                'wechatInfo': 'wechatInfo',
            }),
        },
        methods: {
            ...mapMutations({
                'set_wechatInfo': 'set_wechatInfo'
            }),
            _tabSwitch(num){
                this.active = num;
            },
            _showFollow(){
                let info = JSON.parse(JSON.stringify(this.wechatInfo));
                info.isShow = true;
                this.set_wechatInfo(info)
            }
        },
        watch: {
            value(nVal){
                this.active = nVal;
            },
            active(nVal){
                this.$emit('input',nVal)
            },
        },
    }
</script>

<style lang="less" scoped>
.wrapper{
    position: relative;
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    color: #808080;
    .list{
        flex: 1;
        display: flex;
        .item{
            flex: 1;
            &.z-active{
                position: relative;

                &:after{
                    content: " ";
                    display: block;
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    border-bottom: 3px solid #008DF6;}
                }
            }
        }
        .follow{
            flex: 0 0 80px;
            width: 80px;
            background: #008DF6;
            color: #fff;
        }
    }
</style>
