<template>
    <div class="reportForm">
        <div class="left">
            <div class="menu-list">
                <div class="menu-item" :class="{'active-menu': activeNav == 1}" @click="checkNav(1)">
                    <!-- 实时数据 -->
                    {{ $t("message.lifter.workingCycle") }}
                </div>
                <div class="menu-item" :class="{'active-menu': activeNav == 2}" @click="checkNav(2)">
                    <!-- 工作循环 -->
                    {{ $t("message.lifter.realTimeData") }}
                </div>
            </div>
        </div>
        <div class="right">
            <!-- <component :is="componentName"></component> -->
            <workCycleTable v-if="activeNav == 1"></workCycleTable>
            <liveDataTable v-else></liveDataTable>
        </div>
    </div>
</template>

<script>
   import liveDataTable from './liveDataTable.vue'
   import workCycleTable from './workCycleTable.vue'
    export default {
        name: "reportForm",
        data(){
            return {
                activeNav: 1,
                componentName: "liveDataTable"
            }
        },
        components:{
            workCycleTable,//工作循环
            liveDataTable//实时数据
        },
        methods:{
            checkNav(val){
                this.activeNav = val
                if(val == 1){
                    this.componentName = liveDataTable
                } else if(val == 2){
                    this.componentName = workCycleTable
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.reportForm{
    width: 100%;
    height: 100%;
    .left{
        float: left;
        width: 188px;
        margin-right: 0;
        padding-top: 28px;
        box-sizing: border-box;
        height: 100%;background: #fff;
        .menu-list{
            .menu-item{
                color: #7C829E;
                padding-left: 28px;
                width: 100%;
                height: 30px;
                box-sizing: border-box;
                line-height: 30px;
                margin-bottom: 10px;
                cursor: pointer;
                position: relative;
            }
            .menu-item:hover{
                background: rgba(78, 124, 255, 0.1);
                color: #4E7CFF;
            }
            .active-menu{
                background: rgba(78, 124, 255, 0.25) !important;
                color: #4E7CFF;
            }
            .active-menu::before{
                content: "";
                width: 3px;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: #4E7CFF;
            }
        }
    }
    .right{
        float: right;
        width: calc(100% - 208px);
        height: 100%;
        margin-left: 20px;
    }
}
</style>
