<template>
    <div id="report-central"
        v-cloak>
        <Category id="category"
            @on-select-category="onSelectCategory"></Category>
        <WorkPane id="report-pane"
            :categoryGuid="selectCategoryGuid">
        </WorkPane>
    </div>
</template>
<script>
import Category from './views/category'
import WorkPane from './views/work-pane'

export default {
    name: 'App',
    data() {
        return {
            selectCategoryGuid: null
        }
    },
    components: {
        Category,
        WorkPane
    },
    computed: {},
    methods: {
        onSelectCategory(category) {
            this.selectCategoryGuid = category.guid
        }
    },
    created() {

    }
};
</script>
<style lang="less">
html,
body {
    height: 100%;
    width: 100%;
}

[v-cloak] {
    display: none;
}

#report-central {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background-color: #f8f8f9;
    height: 100%;
    display: flex;

    #category {
        width: 280px;
        height: 100%;
        border-right: 1px solid rgba(0, 0, 0, 0.15);
    }

    #report-pane {
        height: 100%;
        flex: 1;
    }
}
</style>