<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">
            <lines style="width: 363px;height: 310px;margin: 0 auto;" ids="lawPies" :lineData="lineData"></lines>
        </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 lines from "../components/charts/line.vue";
/* 折线图数据 */
const lineData = 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/yhfxByMonth`).then((res) => {
        lineData.value = []
        res.timeList.forEach((item, index) => {
            lineData.value.push({
                name: item,
                value: res.handleList[index] === 0 ? 0 : (res.handleList[index] / res.countList[index]) * 100
            })
        })
    })
    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: 100%;
        height: 90%;
        margin-top: -30px;
    }

}
</style>