<template>
<section class="applicationHomeContainer">
    <section class="appHomeTop">
            <homeWelcome></homeWelcome> 
    </section>
    <section class="appHomeContent">
        <section class="appHomeContentLeft">
            <div class="CLbox_T">
                <homeToAlert></homeToAlert>
            </div>
            <!-- <div class="CLbox_M">
                <homeMyused></homeMyused>
            </div> -->
            <div class="CLbox_B">
                 <homeAllApp></homeAllApp>
            </div>
        </section>
        <section class="appHomeContentRight">
            <div class="CRbox_T">
                 <homeCalendarBox v-if="homeCalendarBoxLevel"></homeCalendarBox>
            </div>
            <div class="CRbox_M">
                <homeManageCockPit></homeManageCockPit>
            </div>      
        </section>
    </section>
</section>
</template>
<script>
import homeWelcome from './homeWelcome'
import homeAdvert from './homeAdvert'
import homeToAlert from './homeToAlert'
import homeMyused from './homeMyused'
import homeAllApp from './homeAllApp'
import homeManageCockPit from './homeManageCockPit'
import homeSecCockPit from './homeSecCockPit'
import homeCalendarBox from './homeCalendarBox'
export default {
    data(){
        return{
           topRightbannerArr:[]
        }
    },
    computed:{
        homeCalendarBoxLevel(){
            let organizationLevelsStr=organizationLevels.split(',')
            if(organizationLevelsStr&&organizationLevelsStr.includes('Premium')){
            let baseServiceOptions=this.$root.roleLevelsPermissionData&&this.$root.roleLevelsPermissionData.baseServiceOptions ||[]
            return baseServiceOptions.includes('__ZiDingYiCaiDanRiChengRiLi')  //鏉冮檺鏄鹃殣
            }
            return true
        }
    },
    mounted() {
        console.log(this)
    },
    components:{
        homeWelcome,
        homeAdvert,
        homeToAlert,
        homeMyused,
        homeAllApp,
        homeManageCockPit,
        homeSecCockPit,
        homeCalendarBox
    }
}
</script>
<style lang="scss" scoped>
.commBoxBg{
     background: #FFFFFF;
     box-shadow: 0px 2px 6px -4px rgba(0, 0, 0, 0.12), 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
     border-radius: 8px;
}
.applicationHomeContainer{
    margin: 25px 25px 0 25px;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    .appHomeTop{
      display: flex;width: 100%; 
      justify-content: space-between;   
      margin-bottom: 24px;  
      .topLeft{
          @extend .commBoxBg;
          height: 115px;
          width:calc(100% - 542px);
          min-width: 800px;
      }
      .topRight{
          @extend .commBoxBg;
          width: 518px;
          height: 115px;
      }
    }
    .appHomeContent{
        display: flex;width: 100%;
        justify-content: space-between; 
        .appHomeContentLeft{
            display: flex;
            flex-direction: column;
            width: calc(100% - 363px);
            .CLbox_T{               
            }
            .CLbox_M{
                @extend .commBoxBg;
                margin-bottom: 24px;
            }
            .CLbox_B{
                @extend .commBoxBg;
                margin-bottom: 24px;
            }
        }
        .appHomeContentRight{
            display: flex;
            flex-direction: column;
            width: 340px;
            .CRbox_T{
                @extend .commBoxBg;
                margin-bottom: 24px;
            }
            .CRbox_M{
                // @extend .commBoxBg;
                margin-bottom: 24px;
            }
            .CRbox_B{
                // @extend .commBoxBg;
                margin-bottom: 24px;
            }
        }       
    }
}
</style>