<template>
    <div id="menuTab-skin" class="wrapper">
        <ul class="list">
            <li class="item" :class="{'z-active': active == index}" v-for="(item,index) in menuListPc" :key="index" @click="_tabSwitch(index)">
                <span>{{item.menuName}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        props: {
            value: {}
        },
        data(){
            return {
                active: this.value,
            }
        },
        computed: {
            ...mapGetters({
                'menuListPc': 'menuListPc',
            }),
        },
        methods: {
            _tabSwitch(num){
                this.active = num;
            },
        },
        watch: {
            value(nVal){
                this.active = nVal;
            },
            active(nVal){
                this.$emit('input',nVal)
            },
        },
    }
</script>
<style lang="less" scoped>
    .wrapper{
        position: relative;
        height: 40px;
        line-height: 40px;
        font-size: 11px;
        background-color: #fff;
        color: #808080;
        .list{
            height: 40px;
            width: 100%;
            overflow: hidden;
            .item{
                position: relative;
                display: inline-block;
                margin-left: -20px;
                width: 180px;
                height: 40px;
                vertical-align: top;
                line-height: 40px;
                text-align: left;
                overflow: hidden;
                cursor: pointer;

                span{
                    position: absolute;
                    top:0;
                    left: 0;
                    padding-left: 50px;
                    width: 100%;
                    height: 100%;
                    z-index: 3;
                    color: #F6F6F6;
                }
                &:before, &:after{
                    content: '';
                    display: block;
                    position: absolute;
                    width: 130px;
                    height: 130px;
                    margin: -70px 0 0 -70px;
                    transform-origin:50% 50%;
                }
                &:before{
                    top: 50%;left: 50%;
                    background-color: #2263F1;
                    opacity: 0.7;
                    transform: rotate(25deg);
                }

                &.z-active{
                    &:after {
                        top: 50%;
                        left: 50%;
                        width: 110px;
                        background-color: #2263F1;
                        transform: rotate(25deg);
                    }
                }
            }
        }
    }
</style>