<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;">
            <div v-for=" item in customList" :key="item" style="text-align: center;">
                <div>{{ item.value }}</div>
                <div>{{ item.name }}</div>
            </div>
        </div>
        <div id="Subcontract" class="chart" v-if="showChart"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts';
import { apistatisticssubcontractingContract } from '@/api/statistics'
const year = ref(new Date().getFullYear())

const showChart = ref(true)
const customList = reactive([
    {
        name: "总金额",
        value: 3
    },
    {
        name: "洽商金额",
        value: 3
    },
    {
        name: "合同总数",
        value: 3
    },
    {
        name: "年度合同金额",
        value: 3
    },
    {
        name: "年度合同数",
        value: 3
    }
])

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

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

const setHistogramOption = (legend, xAxisData, series) => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },

        legend,
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: xAxisData
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series
    }

}

const getCustom = async () => {
    showChart.value = false
    let res = await apistatisticssubcontractingContract({ year: year.value })
    showChart.value = true
    await nextTick()
    initChart("Subcontract", setHistogramOption({ data: [res.series.name] }, res.column
        , [{
            name: res.series.name,
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
                focus: 'series'
            },
            data: res.series.data
        },]))
    customList[0].value = res.total_amount
    customList[1].value = res.total_negotiation_amount
    customList[2].value = res.total_num
    customList[3].value = res.year_total_amount
    customList[4].value = res.year_total_num

}

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