<template>
    <div class="page-header">
        <div class="headerTitle">待办任务</div>
        <div id="taskEcharts1" style="width: 100%; height: 230px;"></div>
    </div>
</template>
<script setup>
    import { onMounted } from 'vue';
    import { getPageListData } from '@/api/main/system/system';
    import * as echarts from 'echarts';

    let chartDom1
    onMounted(() => {
        chartDom1 = document.getElementById('taskEcharts1');
        getTasks()
    })

    const getTasks = () => {
        getPageListData("/SfPlanReport/getToBeComplete").then((res) => {
            if (res.data) {
                echarts.init(chartDom1).setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    
                    series: [
                        {
                            name: '数量',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2,
                                normal: {
                                color: function (colors) {
                                    var colorList = [
                                                '#1A87FF',
                                                '#CBE4FF',
                                            ];
                                    return colorList[colors.dataIndex];
                                }
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 12,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: res.data.WorkOrderToBeComplete ?? 0, name: '工单任务' },
                                { value: res.data.SfToBeComplete ?? 0, name: '随访任务' },
                            ]
                        }
                    ]
                });
            }
        })
    }

</script>

<style scoped lang="scss">
    .wrap {
        background-color: #EFEFEF;
        height: 100%;

        .page-header {
            background-color: #ffffff;
            margin: 15px;
            padding: 15px;
            border-radius: 10px;
            margin-top: 0px;
            padding-top: 0px;
            margin-bottom: 0;
            padding-bottom: 0px;

            .headerTitle {
                font-size: 22px;
                line-height: 30px;
                margin-bottom: 15px;
            }
        }

    }
</style>