<template>
    <div class="left-menu-box">
        <el-card>
            <!-- <el-button style="font-size: 16px; color: white;" v-model="isCollapse" @click="isCollapse=!isCollapse" class="menu-setting icon-toggle"
          type="text" icon="el-icon-s-fold"></el-button> -->
            <el-menu router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" v-for="item in tableData"
             :key="item.index">
                <el-menu-item :index="item.page" @click="handleChange(item)">
                    <img :src="item.img" alt="">
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </el-menu>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isCollapse: false,
                tableData: [{
                    index: '1',
                    name: "課程表",
                    page: "/curriculum/list",
                    img: require('../assets/images/leftmenu/kechenbiao.png')
                }, {
                    index: '2',
                    name: "學(xué)習(xí)報(bào)告",
                    page: "/study/report",
                    img: require('../assets/images/leftmenu/xuexibaogao.png')
                }, {
                    index: '3',
                    name: "課程文件",
                    page: "/document/list",
                    img: require('../assets/images/leftmenu/kechenwenjian.png')
                }, {
                    index: '4',
                    name: "錯(cuò)題庫(kù)",
                    page: "/question/list",
                    img: require('../assets/images/leftmenu/cuotiku.png')
                }, ]
            };
        },
        methods: {
            //點(diǎn)擊事件
            handleChange(item) {
                this.handleClear();
                var oLi = document.querySelectorAll('.left-menu-box ul li');
                if (item.index == 1) {
                    this.tableData[0].img = require('../assets/images/leftmenu/kechengbiao1.png')
                    oLi[0].classList.add("is-active")
                }
                if (item.index == 2) {

                    this.tableData[1].img = require('../assets/images/leftmenu/xuexibaogao1.png')
                    oLi[1].classList.add("is-active")
                }
                if (item.index == 3) {
                    this.tableData[2].img = require('../assets/images/leftmenu/kechenwenjian1.png')
                    oLi[2].classList.add("is-active")
                }
                if (item.index == 4) {

                    this.tableData[3].img = require('../assets/images/leftmenu/cuotiku1.png')
                    oLi[3].classList.add("is-active")
                }
            },
            // 清除點(diǎn)擊事件
            handleClear() {
                this.tableData = [{
                    index: '1',
                    name: "課程表",
                    page: "/curriculum/list",
                    img: require('../assets/images/leftmenu/kechenbiao.png')
                }, {
                    index: '2',
                    name: "學(xué)習(xí)報(bào)告",
                    page: "/study/report",
                    img: require('../assets/images/leftmenu/xuexibaogao.png')
                }, {
                    index: '3',
                    name: "課程文件",
                    page: "/document/list",
                    img: require('../assets/images/leftmenu/kechenwenjian.png')
                }, {
                    index: '4',
                    name: "錯(cuò)題庫(kù)",
                    page: "/question/list",
                    img: require('../assets/images/leftmenu/cuotiku.png')
                }, ]
                var oLi = document.querySelectorAll('.left-menu-box ul li');
                for (var k = 0, length = oLi.length; k < length; k++) {
                    oLi[k].classList.remove('is-active')
                }

            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
        },
    };
</script>

<style lang="scss">
    .left-menu-box {
        width: 200px;
        position: fixed;
        left: 10px;
        top: 77px;
        overflow: hidden;
        -webkit-transition: width 0.3s;
        transition: width 0.3s;
        z-index: 999;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .el-menu-vertical-demo {
        width: 164px;
    }

    .el-menu {
        border-right: 0 !important;
    }

    .left-menu {
        border-right: 0;
    }

    .el-menu-item:focus,
    .el-menu-item:hover {
        background-color: whitesmoke !important;
        border-radius: 40px !important;
    }

    .el-menu-item.is-active {
        border-radius: 40px !important;
        background: #018EED !important;
        color: white !important;
    }

    .el-menu-item {
        -webkit-transition: border-color 0s, background-color 0s, color 0s !important;
        transition: border-color 0s, background-color 0s, color 0s;
        margin: 10px 0 !important;

        span {
            vertical-align: middle;
            // font-size: 16px;
            margin-left: 18px;
        }

        img {
            vertical-align: middle;
            width: 19px;
            height: 18px;
            margin-left: 12px;
        }
    }

    .menu-setting {
        position: absolute;
        top: 10px;
        left: 200px;
    }
</style>