<template>
    <el-card style="width: 49.9%;">
        <template #header>
            <div class="card-header">
                <span> 项目立项</span>
            </div>
        </template>


        <div style="display: flex;justify-content: space-around;">
            <div v-for=" item in customList" :key="item" style="text-align: center;">
                <div>{{ item.value }}</div>
                <div>{{ item.name }}</div>
            </div>
        </div>
        <div id="projectApproved" class="chart"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts';
import { apistatisticsprojectInitiation } from '@/api/statistics'

const customList = reactive([
    {
        name: "项目总数",
        value: 3
    },
    {
        name: "项目跟进",
        value: 3
    },
    {
        name: "客户需求",
        value: 3
    },
    {
        name: "解决方男",
        value: 3
    },
    {
        name: "项目概算",
        value: 3
    },
    {
        name: "竞争对手",
        value: 3
    },
])

const initChart = (id, opt) => {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    myChart.setOption(opt);
}

const getData = async () => {
    let res = await apistatisticsprojectInitiation()
    customList[0].value = res.project_total
    customList[1].value = res.follow_total
    customList[2].value = res.demand_total
    customList[3].value = res.solution_total
    customList[4].value = res.estimate_total
    customList[5].value = res.competitor_total
    let option2 = {
        title: {
            text: '',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },

        series: [
            {
                name: '我的立项',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    initChart("projectApproved", option2)
}


getData()
</script>
<style lang="scss" scoped>
#main,
#main2,
#main3 {
    width: 100%;
    height: 300px;
}

.chart {
    width: 100%;
    height: 300px;
}
</style>