<template>
    <div>
        <!--横向菜单-->
        <section class="titchoose_out">
            <div class="titchoose" id="titchoose">
                <menu>
                    <p :class="[item.id==sel?'sel':'']" v-for="item in list" :key="item.id">
                        <a @click="toLink(item)">{{item.title}}</a>
                    </p>
                </menu>
                <div class="clear"></div>
            </div>
        </section>
        <p class="titchoosebg"></p>
    </div>
</template>

<script>
export default {
    name: "HeaderInfo",
    props: {
        sel: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            list: [
                { id: 1, title: "问答社区", name: "qa", link: "/qa" },
                { id: 2, title: "行业互动", name: "hy", link: "/hy" },
                { id: 3, title: "经验心得", name: "jy", link: "/jy" },
                { id: 4, title: "闲侃大侃", name: "xk", link: "xk" }
            ]
        };
    },
    methods: {
        toLink(_item){
            if(_item.link.length<=0) {
                return;
            }
            this.$router.replace(_item.link)
        }
    }
};
</script>