<template>
    <el-card style="width: 49.9%;">
        <template #header>
            <div class="card-header">
                <span>保证金统计</span>
            </div>
        </template>
        <div style="height:40px">
            <el-date-picker v-model="year" @change='getCustom' value-format="YYYY" type="year" style="float:right"
                :placeholder="year" />
        </div>

        <div style="display: flex;justify-content: space-around;">
            <router-link :to="{
                path: item.url,
                query: item.query ? { year } : null
            }" v-for=" item in customList" :key="item" class="header-btn">
                <div>
                    <div>{{ item.value() }}</div>
                    <div>{{ item.name }}</div>
                </div>
            </router-link>
        </div>
        <div id="ProjectBid" class="chart" v-if="showChart"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts';
import { apistatistifinancial_statisticsbid } from '@/api/statistics'

const year = ref(new Date().getFullYear())
const showChart = ref(true)

const customList = reactive([
    {
        name: "总保证金申请",
        value: () => {
            return baseData.value.total_margin_apply
        },
        url: "/financial/margin_management/financial_bid_margin"

    },
    {
        name: "年度保证金申请",
        value: () => {
            return baseData.value.year_margin_apply
        },
        url: "/financial/margin_management/financial_bid_margin"

    },
    {
        name: "总保证金回收",
        value: () => {
            return baseData.value.total_margin_recovery
        },
        url: "/financial/margin_management/financial_bid_margin_recovery"

    },
    {
        name: "年度保证金回收",
        value: () => {
            return baseData.value.year_margin_recovery
        },
        url: "/financial/margin_management/financial_bid_margin_recovery"

    },
    {
        name: "总履约金申请",
        value: () => {
            return baseData.value.total_performance_money_apply
        },
        url: "/financial/margin_management/financial_performance_money_apply"

    },
    {
        name: "年度履约金申请",
        value: () => {
            return baseData.value.year_performance_money_apply
        },
        url: "/financial/margin_management/financial_performance_money_apply"

    },
    {
        name: "总履约金回收",
        value: () => {
            return baseData.value.total_performance_money_recovery
        },
        url: "/financial/margin_management/financial_performance_money_recovery"

    },
    {
        name: "年度履约金回收",
        value: () => {
            return baseData.value.year_performance_money_recovery
        },
        url: "/financial/margin_management/financial_performance_money_recovery"

    },


])

const labelOption = {
    show: true,
    rich: {
        name: {}
    }
};

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

const baseData = ref({})

const getCustom = async () => {
    showChart.value = false
    let res = await apistatistifinancial_statisticsbid({ year: year.value })
    baseData.value = res
    showChart.value = true
    await nextTick()
    var option4 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: [res.margin_apply_series.name, res.margin_recovery_series.name, res.performance_money_apply_series.name, res.performance_money_recovery_series.name]
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',

        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: res.column
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: res.margin_apply_series.name,
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.margin_apply_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.margin_recovery_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.margin_recovery_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.performance_money_apply_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.performance_money_apply_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.performance_money_recovery_series.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.performance_money_recovery_series.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
        ]
    };

    initChart("ProjectBid", option4)
}
getCustom()
</script>
<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 300px;
}

.header-btn {
    text-align: center;
    cursor: pointer;
    padding: 0px 10px;

}

.header-btn:active {
    background-color: #EDEFFF;
}
</style>