<template>
    <div class="main">
        <div class="main-title">
            <DateTime />
            <div class="title">人口数据分析看板</div>
            <div class="weather"></div>
        </div>
        <div class="main-body">
            <ModuleLeft1 class="left1" @click="onModuleClick" />
            <ModuleLeft2 class="left2" @click="onModuleClick" />
            <ModuleLeft3 class="left3" @click="onModuleClick" />

            <ModuleRight1 class="right1" @click="onModuleClick" />
            <ModuleRight2 class="right2" @click="onModuleClick" />
            <ModuleRight3 class="right3" @click="onModuleClick" />

            <ModuleCenter class="center" @click="onModuleClick" />
            <ModuleBottom class="bottom" @click="onModuleClick"/>
        </div>
    </div>
    <s3-layer v-model="layer.isShow" :type="2" :area="['80%', '80%']" :title="layer.title" :content="layer.content"></s3-layer>
</template>

<script setup>
import { ref, reactive, inject } from 'vue';
import DateTime from './components/datetime/DateTime.vue';
import ModuleLeft1 from './module/ModuleLeft1.vue';
import ModuleLeft2 from './module/ModuleLeft2.vue';
import ModuleLeft3 from './module/ModuleLeft3.vue';

import ModuleRight1 from './module/ModuleRight1.vue';
import ModuleRight2 from './module/ModuleRight2.vue';
import ModuleRight3 from './module/ModuleRight3.vue';

import ModuleCenter from './module/ModuleCenter.vue';
import ModuleBottom from './module/ModuleBottom.vue';

const common = inject('common');
const layer = reactive({
    isShow: false,
    title: '',
    content: ''
})
const onModuleClick = (params) => {
    console.log(params);
    layer.title = params.name;
    layer.content = `${common.getPageBaseUrl()}route/populationinfo-data/${params.type}?name=${params.name}`;
    layer.isShow = true;
}

</script>

<style lang="stylus" scoped>
.main
    width 100%
    height 100%
    background-image url(/assets/imgs/bg.png)
    background-size 100% 120%
    background-position center
    .main-title
        height 100px
        background-image url(/assets/imgs/title-bg.png)
        background-size 100% 100%
        position relative
        div
            color #FFF
        .datetime
            position absolute
            top 6px
            left 40px
        .title
            width 100%
            height 50px
            line-height 50px
            padding-top 5px
            font-size 30px
            font-weight bold
            text-align center
    .main-body
        margin-top -25px
        padding 0 45px
        display grid
        grid-template-columns 400px 1fr 400px
        grid-gap 30px
        grid-auto-rows auto
        justify-content space-between
        align-content space-between
        .left1
            grid-column 1
            grid-row 1
        .left2
            grid-column 1
            grid-row 2
        .left3
            grid-column 1
            grid-row 3
        .right1
            grid-column 3
            grid-row 1
        .right2
            grid-column 3
            grid-row 2
        .right3
            grid-column 3
            grid-row 3
        .center
            grid-column 2
            grid-row 1 / 3
            justify-self center
            align-self center
        .bottom
            grid-column 2
            grid-row 3
            justify-self center
            align-self center
            

</style>
