<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.towerCrane.alarmData') }}
                </div>
                <div class="menu-item" :class="{'active-menu': activeNav == 2}" @click="checkNav(2)">
                    <!-- 实时数据 -->
                    {{ $t('message.towerCrane.realTimeData') }}
                </div>
                <div class="menu-item" :class="{'active-menu': activeNav == 3}" @click="checkNav(3)">
                    <!-- 工作循环数据 -->
                    {{ $t('message.towerCrane.dutyCycleData') }}
                </div>
                <div class="menu-item" :class="{'active-menu': activeNav == 4}" @click="checkNav(4)">
                    <!-- 违章数据 -->
                    {{ $t('message.towerCrane.violationData') }}
                </div>
                <div class="menu-item" :class="{'active-menu': activeNav == 5}" @click="checkNav(5)">
                    钢丝绳监测记录
                </div>
            </div>
        </div>
        <div class="right">
            <component :is="componentName" :sn="projectSn"></component>
        </div>
    </div>
</template>

<script>
    import workCycleTable from './workCycleTable.vue'
    import alarmsTable from './alarmsTable.vue'
    import liveDataTable from './liveDataTable.vue'
    import violationData from './violationData.vue'
    import wireRopeMonitoring from './wireRopeMonitoring.vue'
    export default {
        name: "reportForm",
        props:['sn'],
        data(){
            return {
                activeNav: 1,
                componentName: "alarmsTable",
                projectSn: ''
            }
        },
        components:{
            workCycleTable,//工作循环
            alarmsTable,//报警数据
            liveDataTable,//实时数据
            violationData,//违章数据
            wireRopeMonitoring//钢丝绳监测数据
        },
        created(){
            this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
        },
        methods:{
            checkNav(val){
                this.activeNav = val
                if(val == 1){
                    this.componentName = alarmsTable
                } else if(val == 2){
                    this.componentName = liveDataTable
                } else if(val == 3){
                    this.componentName = workCycleTable
                } 
                else if(val == 4){
                    this.componentName = violationData
                }
                else if(val == 5){
                    this.componentName = wireRopeMonitoring
                }
            }
        }
    }
</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>
