<style>
.waitMatter{
    height: 100%;
}
.waitMatter h1{
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 10px;
}
.waitMatter .waitMatter-main{
    position: relative;
    height: calc(100% - 50px);
}
.waitMatter .waitMatter-main .left{
    padding: 20px 0;
    width: 200px;
    font-size: 14px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #e6e6e6;
    overflow-y: auto;
}
.waitMatter .waitMatter-main .right{
    margin-left: 210px;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #e6e6e6;
}
.waitMatter .waitMatter-main .left .item{
    padding: 12px 20px;
    position: relative;
    cursor: pointer;
}
.waitMatter .waitMatter-main .left .item.active, .waitMatter .waitMatter-main .left .item:hover{
    background-color: #f6f8fa;
}
.waitMatter .waitMatter-main .left .item::before{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #2362fb;
    opacity: 0;
}
.waitMatter .waitMatter-main .left .item.active::before{
    opacity: 1;
}
.waitMatter .waitMatter-main .left .iconfont{
    display: inline-block;
    font-size: 12px;
    padding: 6px;
    color: #fff;
}
.waitMatter .waitMatter-main .left .lable{
    color: #333;
    font-size: 13px;
    margin-left: 10px;
}
</style>
<template>
    <div class="waitMatter">
        <h1>待办事项</h1>
        <div class="waitMatter-main">
            <div class="left">
                <div v-for="(item, index) in menuList" :key="index" @click="changeMenuList(item, index)" class="item" :class="[index === activeIndex ? 'active' : '']"><i :class="item.class" :style="item.style"></i><span class="lable">{{item.text}}</span></div>
            </div>
            <div class="right">
                <todayCustomer v-if="activeIndex === 0" />
                <myClue v-if="activeIndex === 1" />
                <myCustomer v-if="activeIndex === 2" />
            </div>
        </div>
    </div>
</template>
<script>
import todayCustomer from "./todayCustomer";
import myClue from "./myClue";
import myCustomer from "./myCustomer";
export default {
    components: {
        todayCustomer,
        myClue,
        myCustomer
    },
    data(){
        return {
            activeIndex: 0,
            menuList: [
                {
                    text:　'今日需联系客户',
                    class: 'iconfont iconcompany',
                    style: 'background-color: rgb(35, 98, 251);'
                },{
                    text:　'分配给我的线索',
                    class: 'iconfont iconxiansuo',
                    style: 'background-color: rgb(112, 74, 253);'
                },{
                    text:　'分配给我的客户',
                    class: 'iconfont iconkehu',
                    style: 'background-color: rgb(25, 181, 246);'
                }
                // ,{
                //     text:　'待审核合同',
                //     class: 'iconfont iconcompany',
                //     style: 'background-color: rgb(253, 91, 74);'
                // },{
                //     text:　'待审核回款',
                //     class: 'iconfont iconcompany',
                //     style: 'background-color: rgb(255, 185, 64);'
                // },{
                //     text:　'待回款提醒',
                //     class: 'iconfont iconcompany',
                //     style: 'background-color: rgb(255, 122, 56);'
                // },{
                //     text:　'即将到期的合同',
                //     class: 'iconfont iconcompany',
                //     style: 'background-color: rgb(35, 98, 251);'
                // },
            ]
        }
    },
    mounted() {

    },
    methods: {
        changeMenuList(item, index){
            this.activeIndex = index
        },
    }
}
</script>