<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="main"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts';
import { apistatisticsbidding } from '@/api/statistics'

const customList = reactive([
    {
        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 apistatisticsbidding()
    let value = +res.bidding_rate * 100
    let option3 = {
        title: {
            text: '{a|' + value + '}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 20,
                        color: 'black',
                        fontWeight: 'bold'
                    },
                    c: {
                        fontSize: 20,
                        color: 'black',
                        fontWeight: 'normal'
                    }
                }
            }
        },
        series: [
            //外环
            {
                name: "外环",
                type: 'pie',
                silent: true,
                clockwise: true,
                radius: ['70%', '75%'],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: 'white',
                },
                data: [0]
            },
            //内环
            {
                name: "内环",
                type: 'pie',
                silent: true,
                clockwise: true,
                radius: ['45%', '46%'],
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: '#414f63',
                },
                data: [0]
            },
            //外环
            {
                name: '',
                type: 'pie',
                radius: ['55%', '65%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                label: {
                    show: false,
                },
                data: [
                    {
                        value: value,
                        itemStyle: {
                            normal: {
                                //外环发光
                                borderWidth: 0.5,
                                shadowBlur: 20,
                                borderColor: '#4bf3f9',
                                shadowColor: '#9bfeff',
                                color: { // 圆环的颜色
                                    colorStops: [{
                                        offset: 0,
                                        color: '#15caff', // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#159bfe', // 100% 处的颜色
                                    }]
                                },
                            }
                        }
                    },
                    {
                        value: 100 - value,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#364662"
                            }
                        }
                    }
                ]
            },
        ]
    };
    initChart("main", option3)
    customList[0].value = res.decision
    customList[1].value = res.document
    customList[2].value = res.examination
    customList[3].value = res.not_return_margin_amount
    customList[4].value = res.successful


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

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