<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">
            <pie style="width: 290px;height: 144px;margin: 0 auto;" ids="lawPie" :pieData="pieData"></pie>
        </section>
        <section class="title-container">
            <section style="text-align: center;padding: 2px;" v-for="item in pieData" :key="item.name">
                {{ item.name }}--{{ item.value }}--{{ (item.value / total) * 100 || '0' }}%
            </section>
        </section>
    </section>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, reactive, onMounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import pie from "../components/charts/pie.vue";
/* 饼图数据 */
const total = ref(0)
const pieData = ref([
    { name: "低风险", value: 0 },
    { name: "一般风险", value: 0 },
    { name: "较大风险", value: 0 },
    { name: "重大风险", value: 0 },
])
const listQuery = reactive({
    year: new Date().getFullYear()
});
onMounted(() => {
    getApi({ year: listQuery.year }, '/mosty-jcgl/fxtj/getTjdata').then(res => {
        if (res && typeof res === 'object' && Object.keys(res).length > 0) {
            pieData.value[0].value = res.B
            pieData.value[1].value = res.Y
            pieData.value[2].value = res.O
            pieData.value[3].value = res.R
            total.value = res.B + res.Y + res.O + res.R
        }
    })
})
</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: 42%;
        margin: 0 auto;
    }

    .title-container {
        width: 48%;
        height: 58%;
        padding: 2px;
        margin: 0 auto;

        section {
            border-top: 1px dashed #0072FF;
            border-bottom: 1px dashed #0072FF;
        }
    }
}
</style>