<template>
    <div class="home">
        <div class="home-container">
            <div class="home-content">
                <div class="first">
                    <normal @table-action="onNormalAction"></normal>
                    <special @table-action="onSpecialAction"></special>
                    <pass-rate @table-action="onPassRateAction"></pass-rate>
                </div>
                <div class="second">
                    <static-info></static-info>
                    <CQMap></CQMap>
                </div>
                <div class="third">
                    <praise></praise>
                    <limit @table-action="onLimitAction"></limit>
                    <finish-info @table-action="onFinishInfoAction"></finish-info>
                </div>
            </div>
        </div>

        <table-dialog :dateRange.sync="dialogDate" :show.sync="showTableDialog" :type.sync="tableDialogType"></table-dialog>
    </div>
</template>

<script>
import Normal from './components/Normal';
import Special from './components/Special';
import PassRate from './components/PassRate';
import StaticInfo from './components/StaticInfo';
import CQMap from './components/CQMap';
import Praise from './components/Praise';
import Limit from './components/Limit';
import FinishInfo from './components/FinishInfo';
import TableDialog from './components/TableDialog.vue';

export default {
    components: {
        Normal,
        Special,
        PassRate,
        StaticInfo,
        CQMap,
        Praise,
        Limit,
        FinishInfo,
        TableDialog,
    },
    data () {
        return {
            dialogDate: [],
            showTableDialog: false,
            // 1日常已完成 2日常未完成 3专项已完成 4专项未完成 5不合格查看 
            // 6立改查看 7限改查看 8未完成查看 9已完成查看
            tableDialogType: 1,
        }
    },
    methods: {
        onNormalAction(dateRange, finished) {
            this.dialogDate = dateRange;
            this.tableDialogType = finished ? 1 : 2;
            this.showTableDialog = true;
        },
        onSpecialAction(dateRange, finished) {
            this.dialogDate = dateRange;
            this.tableDialogType = finished ? 3 : 4;
            this.showTableDialog = true;
        },
        onPassRateAction(dateRange) {
            this.dialogDate = dateRange;
            this.tableDialogType = 5;
            this.showTableDialog = true;
        },
        onLimitAction(dateRange, isLimit) {
            this.dialogDate = dateRange;
            this.tableDialogType = isLimit ? 6 : 7;
            this.showTableDialog = true;
        },
        onFinishInfoAction(dateRange, finished) {
            this.dialogDate = dateRange;
            this.tableDialogType = finished ? 8 : 9;
            this.showTableDialog = true;
        },
    },
}
</script>

<style lang="scss" scoped>
.home {
    height: calc(100vh - 100px);
    position: relative;
    overflow: hidden;
    .home-container {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        .home-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: 24% 52% 24%;
            grid-template-rows: 100% 100% 100%;
            .first {
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 30% 30% 40%;
            }
            .second {
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 20% 80%;
            }
            .third {
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 33% 32% 35%;
            }
        }
    }
}
</style>