<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>项目预算统计</span>
            </div>
        </template>
        <div id="ProjectPayment" class="chart"></div>
    </el-card>

    <el-card>
        <template #header>
            <div class="card-header">
                <span>商务工作统计</span>
            </div>
        </template>
        <div style="display: flex;justify-content: space-between;">
            <div class="box" v-for="item in businessList" :key="item">
                <div class="cont" v-for="items in item">
                    <div>{{ items.name }}</div>
                    <div>{{ items.value }}</div>
                </div>
            </div>
        </div>
    </el-card>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>合同统计</span>
            </div>
        </template>
        <div style="display: flex;justify-content: space-between;">
            <div class="box" v-for="item in contractList" :key="item">
                <div class="cont" v-for="items in item">
                    <div>{{ items.name }}</div>
                    <div>{{ items.value }}</div>
                </div>
            </div>
        </div>
    </el-card>
</template>
<script setup>

import * as echarts from 'echarts';
import { apiProjectStatisticsbudget, apiProjectStatisticsbusiness, apiProjectStatisticsContracts } from '@/api/projectStatistics'
import { ref, reactive, defineProps } from "vue"

const props = defineProps({
    project_id: Number
})


const businessList = reactive([
    [
        { name: '项目跟进', value: 0 },
        { name: '客户需求', value: 0 },
        { name: '解决方案', value: 0 },
        { name: '项目核算', value: 0 },
        { name: '竞争对手', value: 0 },
    ],
    [
        { name: '投标决策  ', value: 0 },
        { name: '购买标书', value: 0 },
        { name: '标书审查', value: 0 },
        { name: '投标结果', value: 0 },
    ],
    [
        { name: '投标保证金', value: 0 },
        { name: '已退保证金', value: 0 },
        { name: '未退保证金', value: 0 },
    ],
])
const getBusinessData = async () => {
    let res = await apiProjectStatisticsbusiness({ project_id: props.project_id })
    businessList[0][0].value = res.follow_total
    businessList[0][1].value = res.demand_total
    businessList[0][2].value = res.solution_total
    businessList[0][3].value = res.estimate_total
    businessList[0][4].value = res.competitor_total
    businessList[1][0].value = res.decision_total
    businessList[1][1].value = res.document_total
    businessList[1][2].value = res.examination_total
    businessList[1][3].value = res.successful_total
    businessList[2][0].value = res.security_amount
    businessList[2][1].value = res.han_refund_security_amount
    businessList[2][2].value = res.not_refund_security_amount
}


const contractList = reactive([
    [
        { name: '合同金额', value: 0 },
        { name: '合同洽商', value: 0 },
        { name: '结算金额', value: 0 },
        { name: '已开票', value: 0 },
        { name: '已回款', value: 0 },
        { name: '未回款', value: 0 },
        { name: '回款比例（%）', value: 0 },
    ],
    [
        { name: '分包合同金额', value: 0 },
        { name: '分包合同洽商', value: 0 },
        { name: '结算金额', value: 0 },
        { name: '已收票', value: 0 },
        { name: '已付款', value: 0 },
        { name: '未付款', value: 0 },
        { name: '付款比例（%）', value: 0 },
    ],
    [
        { name: '材料合同金额', value: 0 },
        { name: '已收票', value: 0 },
        { name: '已付款', value: 0 },
        { name: '未付款', value: 0 },
        { name: '付款比例（%）', value: 0 },
    ],
])

const getContractData = async () => {
    let res = await apiProjectStatisticsContracts({ project_id: props.project_id })
    contractList[0][0].value = res.project_contract_amount
    contractList[0][1].value = res.project_negotiation_amount
    contractList[0][2].value = res.project_settlement_amount
    contractList[0][3].value = res.project_invoicing_amount
    contractList[0][4].value = res.project_returned_amount
    contractList[0][5].value = res.project_not_returned_amount
    contractList[0][6].value = res.project_returned_ratio
    contractList[1][0].value = res.subcontracting_contract_amount
    contractList[1][1].value = res.subcontracting_negotiation_amount
    contractList[1][2].value = res.subcontracting_settlement_amount
    contractList[1][3].value = res.subcontracting_invoicing_amount
    contractList[1][4].value = res.subcontracting_payment_amount
    contractList[1][5].value = res.subcontracting_not_payment_amount
    contractList[1][6].value = res.subcontracting_payment_ratio
    contractList[2][0].value = res.procurement_contract_amount
    contractList[2][1].value = res.procurement_invoicing_amount
    contractList[2][2].value = res.procurement_payment_amount
    contractList[2][3].value = res.procurement_not_payment_amount
    contractList[2][4].value = res.procurement_payment_ratio
}

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

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

const getCustom = async () => {
    let res = await apiProjectStatisticsbudget({ project_id: props.project_id })
    await nextTick()
    var option4 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: [res.series1.name, res.series2.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.series1.name,
                type: 'bar',
                barGap: 0,
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.series1.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },
            {
                name: res.series2.name,
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: res.series2.data,
                itemStyle: {
                    normal: {
                        label: {
                        }
                    }
                }
            },

        ]
    };

    initChart("ProjectPayment", option4)
}
getCustom()
getBusinessData()
getContractData()
</script>
<style>
.chart {
    width: 100%;
    height: 400px;
}

.box {
    width: 32%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #E0E6F1;
}

.cont {
    width: 30%;
    height: 100px;
    background-color: #F7F9FB;
    text-align: center;
    box-sizing: border-box;
    padding-top: 30px;
    margin: 7px;
}
</style>