<style lang="less">
body{
    color: #333;
    font: 14px/1.5 Arial, "Helvetica Neue", "Microsoft YaHei";
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.app{
    .header,
    .sidebar{
        border-radius: 0;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 7;
    }
    .header{
        width: 100%;

        li{
            float: right;
        }

        em {
            font-style: normal;
        }

        .logo{
            float: left;
            color: #FFF;
            font-size: 1.2em;
        }
    }
    .sidebar{
        width: 200px;
        overflow: auto;
        top: 60px;
        bottom: 0;
    }
    .main{
        margin: 60px 0 0 200px;
        padding: 15px 15px 20px;
    }
    .main-header{
        border-bottom: 1px solid #EEE;
        margin-bottom: 15px;
        padding: 5px 0 10px;
        min-height: 36px;
        position: relative;

        .el-breadcrumb{
            font-size: 1.36em;
            line-height: 1.84;
        }
    }
    .main-menus{
        padding-top: 5px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .main-filters{
        background: #EAEEFB;
        border-radius: 3px;
        margin-bottom: 20px;
        padding: 10px 10px 0;

        .el-form-item{
            margin-bottom: 10px;
        }
        .el-radio-group{
            vertical-align: top;
        }
    }
    .main-actions{
        display: flex;
        margin: 20px 0 10px;
        padding: 10px 0;
        align-items: center;
        justify-content: space-between;
    }
    .main-actions-label{
        em{
            color: #111;
            font-style: normal;
            margin: 0 .5em;
        }
    }
    .item-menus{
        padding: 5px 0 0;

        .el-button,
        .el-button + .el-button{
            margin: 0 8px 5px 0;
        }
    }
    .main-list{
        .cell{
            padding: 10px 18px;
        }

        .props{
            dl{
                line-height: 1.72;
            }
            dd{
                margin: -1.72em 0 .5em 4.2em;
                min-height: 1.72em;
            }

            em{
                display: inline-block;
                font-style: normal;
                margin-right: .5em;
                white-space: nowrap;
            }
        }
    }
    .main-form{
        margin: 40px 10px;
        width: 40%;
        min-width: 480px;
    }
    .preview{
        padding: 10px 0;
        text-align: center;

        img{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 200px;
            vertical-align: top;
        }
    }
    .designer-avatar-preview {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        padding: 15px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .el-pagination{
        padding: 20px;
        text-align: right;
    }
    .el-loading-mask{
        z-index: 1;
    }
    .el-form-item{
        // &:last-child{
        //     margin-bottom: 0;
        // }

        .el-input-number{
            vertical-align: top;
        }
    }
    .el-checkbox + .el-checkbox,
    .el-radio + .el-radio{
        margin-left: 0;
    }
    .el-checkbox,
    .el-radio{
        margin-right: 15px;
    }
    .el-dragger{
        .el-dragger__cover{
            z-index: 1;
        }
    }
    .el-dragger__cover{
        img{
            height: auto;
        }
    }
    .main-content {
        div {
            display: inline-block;
            vertical-align: top;
            .grid-content {
                padding: 15px;
                width: 170px;
                height: 200px;
                text-align: center;
                img {
                    max-width: 100%;
                }
            }
            p {
                text-align: center;
                color: #5e7382;
            }
        }
    }
}
</style>
<template>
    <el-row class="app">
        <el-menu class="header" theme="dark" mode="horizontal" menu-trigger="click" :router="true">
            <el-menu-item class="logo" index="logo" :route="{path:'/'}">Kue Dashbord</el-menu-item>
        </el-menu>
         <el-menu class="sidebar" theme="dark" :router="true" :default-active="$route.path">
            <template v-for="menu in menus">
                <el-menu-item v-if="!menu.menus" v-bind:key="menu.path"  :index="menu.path">{{menu.name}}
                    <el-tag :type="statusAlias[menu.name.toLowerCase()].icon">{{count[menu.name.toLowerCase() + 'Count']}}</el-tag>
                </el-menu-item>
                <el-submenu v-if="menu.menus" v-bind:key="menu.path"  :index="menu.path">
                    <template slot="title">{{menu.name}}</template>
                    <template v-for="subMenu in menu.menus">
                        <el-menu-item v-if="!subMenu.menus" v-bind:key="subMenu.path"  :index="subMenu.path">{{subMenu.name}}</el-menu-item>
                         <el-submenu v-if="subMenu.menus" v-bind:key="subMenu.path"  :index="subMenu.path">
                            <template slot="title">{{subMenu.name}}</template>
                            <el-menu-item  v-for="thirdMenu in subMenu.menus" v-bind:key="thirdMenu.path" :index="thirdMenu.path">{{thirdMenu.name}}</el-menu-item>
                         </el-submenu>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
        <router-view></router-view>
    </el-row>
</template>

<script>
import api from './lib/http';

export default {
  data () {
    return {
        menus: [{
            name: 'Queued',
            path: '/queue/inactive'
        }, {
            name: 'Active',
            path: '/queue/active'
        }, {
            name: 'Failed',
            path: '/queue/failed'
        }, {
            name: 'Delayed',
            path: '/queue/delayed'
        }
        , {
            name: 'Complete',
            path: '/queue/complete'
        }],
        count: {
            
        },
        statusAlias: {
            'queued': {
                icon: 'gray',
                name: 'inactive'
            },
            'active': {
                icon: 'primary',
                name: 'active'
            },
            'failed': {
                icon: 'danger',
                name: 'failed'
            },
            'delayed': {
                icon: 'warning',
                name: 'delayed'
            },
            'complete': {
                icon: 'success',
                name: 'success'
            }
        },
        interval: null,
    }
  },
  methods: {
    startInterval() {
        if(this.interval) {
            clearInterval(this.interval);
        }

        this.interval =  setInterval(() => {
            api.getStats({})
            .then(data => {
                this.count = data.data;
                this.count.queuedCount = this.count.inactiveCount;
            })
        }, 2000);
    },
  },
  created() {
       return api.getStats({})
        .then(data => {
            this.count = data.data;
            this.count.queueCount = this.count.inactiveCount;
            return this.startInterval();
        })
  },
  watch: {
  }
}
</script>

