<template>
    <div class="sidebarAll">
        <div class="sidebar">
            <div style="margin-top: 0">
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                    <img src="./img/JD.png">
                </span>
                    <span class="font">基地建设管理</span>
                </p>
            </div>

            <div>
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                    <img src="./img/XM.png">
                </span>
                    <span class="font">项目建设管理</span>
                </p>
            </div>

            <div @click="clickMenu('role',3,'基础资料管理')">
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                    <img src="./img/JC.png">
                </span>
                    <span class="font">基础资料管理</span>
                </p>
            </div>

            <div @click="clickMenu('product',4,'市准入管理')">
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                    <img src="./img/ZR.png">
                </span>
                    <span class="font">市准入管理</span>
                </p>
            </div>

            <div>
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                   <img src="./img/KT.png">
                </span>
                    <span class="font">课题攻关</span>
                </p>
            </div>

            <div @click="clickMenu('XCalliance',6,'信创联盟')">
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                   <img src="./img/XC.png">
                </span>
                    <span class="font">信创联盟</span>
                </p>
            </div>

            <div style="margin-bottom: 10px;" @click="clickMenu('integration',7,'政企校一体化')">
                <span class="line"></span>
                <p class="menu" style="margin-top: 0">
                <span class="icon">
                   <img src="./img/ZQ.png">
                </span>
                    <span class="font">政企校一体化</span>
                </p>
            </div>

        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data () {
        return {
        }
    },
    created() {
    },
    mounted(){
    },
    methods: {
        // 点击切换样式并且跳转
        clickMenu(name, num,title) {
            console.log(name,num);
            $('.sidebar .menu').removeClass('click');
            $('.sidebar .line').removeClass('lineClick');
            $('.sidebar .icon').removeClass('iconClick');
            let menu = '.sidebar>div:nth-child(' + num + ') .menu';
            let line = '.sidebar>div:nth-child(' + num + ') .line';
            let icon = '.sidebar>div:nth-child(' + num + ') .icon';
            $(menu).addClass('click');
            $(line).addClass('lineClick');
            $(icon).addClass('iconClick');
            let arr = [];
            arr.push({
                name: title,
                path: name
            })
            this.$store.commit('changeSidebar', arr);
            this.$router.push({name: name});
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    @import './sidebar.css';
</style>
