<template>
    <section class="modules">
        <section class="m-head">
            <MOSTY.Assort :title="'隐患分级分析'" />
        </section>
        <el-divider style="margin: 0 !important;border-color: #EFEFEF;" />
        <section class="pie-container">
            <bar style="width: 290px;height: 275px;margin: 0 auto;" ids="lawPiesss" :barData="barData"></bar>
        </section>
    </section>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, onMounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import bar from "../components/charts/bar.vue";
/* 柱状图图数据 */
const barData = ref([])
const updateChart = () => {
    let date = new Date();
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    getApi({ startTime: getSpecificPreviousMonths(year, month), endTime: year + '-' + month.toString().padStart(2, '0') }, `/mosty-jcgl/yhb/yhfx/countByMonth`).then((res) => {
        barData.value = []
        barData.value.push(res.timeList)
        barData.value.push(res.count1)
        barData.value.push(res.count2)
        barData.value.push(res.count3)
        barData.value.push(res.count4)
    })
    function getSpecificPreviousMonths(targetYear, targetMonth, monthsBack = 11) {
        const date = new Date(targetYear, targetMonth - 1, 1); // 月份是0-11
        date.setMonth(date.getMonth() - monthsBack);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        return `${year}-${month.toString().padStart(2, '0')}`;
    }
}
onMounted(() => {
    updateChart()
})
</script>
<style scoped lang="scss">
// @import '../style/index.scss';
.modules {
    height: 344px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;

    .m-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .pie-container {
        width: 80%;
        height: 80%;
        margin: 0 auto;
    }
}
</style>