<template>
    <div class="project-checked main-page">
        <el-col :span="6" class="h100">
            <module-one-1-1 label="举牌验收数量统计" class="chart1-module">
                <doughnut-chart :data="doughnutData" title="验收统计"/>
            </module-one-1-1>
            <module-one-2-1 label="本周验收列表">

            </module-one-2-1>
          
        </el-col>
          <el-col :span="18"  class="h100">
            
                <module-one-2-3 label="举牌验收列表" class="h66">

                </module-one-2-3>
                <module-one-1-3 label="举牌验收技术员统计" class="h33">

                </module-one-1-3>
            </el-col>
    </div>
</template>

<script>
import DoughnutChart from '@/components/doughnutChart.vue'

export default {
    components: {
        DoughnutChart
    },
    data() {
        return {
            dpi: "",
            chartKey: 0,
            selProject: null,
            // 圆环图数据 - 参考进度管理中计划状态的数据格式
            doughnutData: [
                { name: '未开始', value: 15 },
                { name: '进行中（正常）', value: 45 },
                { name: '进行中（滞后）', value: 25 },
                { name: '已完成（正常）', value: 10 },
                { name: '已完成（滞后）', value: 5 }
            ]
        }
    },
    mounted() {
        this.$store.dispatch("ChangeNav", 403);
        this.$bus.$on(
            "projectChange",
            debounce((prj) => {
                this.selProject = prj;
                this.init();
            })
        );
        this.selProject = this.$store.getters.selProject;
        this.init();
        this.dpi = this.$dpi();
        window.addEventListener("resize", () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi();
                this.resize();
            }
        });
        this.resize();
    },
    methods: {
        init() {
            this.chartKey++;
            // 这里可以调用API获取真实数据
            this.loadDoughnutData();
        },
        resize() {
            this.$refs.chart && this.$refs.chart.resize();
        },
        loadDoughnutData() {
            // 模拟从API获取数据
            // this.$api.project.getCheckStats().then(res => {
            //     this.doughnutData = res.data;
            // })
        }
    }
}
</script>

<style lang="less">
.project-checked {
    .screen-module{
        &.h66{
            height: calc(66% - 20px) !important;
        }
        &.h33{
            height: calc(33% - 20px) !important;
        }
    }
}
</style>