<!--  -->
<template>
    <div class="card table">
        <div style="height: 400px;" :id="props.id" class="myChart">
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, inject,watch, reactive,nextTick } from "vue";
import findDataFun from '@/plugins/findData'

// 接受父组件参数，配置默认值
const props = defineProps({
    id: {
        type: String,
        default: () => '',
    },
    barData:{
        type:Object,
        default: () => {},
    },
    switchData:{
        type:Boolean,
        default: () =>true,
    }
});
let echart:any = null
let myChart:any = null

let echartData:any = reactive({
    titles:'',//标题
    xAxisArr:[],//x轴
    seriesDiscount:[], //合同总金额
    seriesRecoveries:[] //合同已回款金额
})
watch(() => props.switchData,()=>{
    echartData = findDataFun('bar',props.barData,props.switchData)
    myChart.clear();
    myChart.setOption(initEcharts());
})

watch(() => props.barData,async()=>{
    echartData = findDataFun('bar',props.barData,props.switchData)
    myChart.clear();
    myChart.setOption(initEcharts());
})
onMounted(() => {
    echart = inject('echart')
    myChart = echart.init(document.getElementById(props.id));
    setEchartFun();
})
//函数
const setEchartFun = async ()=>{
    myChart.setOption(initEcharts());
    window.onresize = function () {
        myChart.resize();
    };
}
const initEcharts = () => {
    // 绘制图表
    return {
        tooltip: {
            // formatter: function (params:any) {
            //     console.log('111',params)
            //     return params.name +''+ params.seriesName + ':' + params.value + '元'
            // }
        },
        title: {
            // text: '月度合同金额统计'+'(元)',
            subtext:  echartData.titles
        },
        xAxis: [
            {
                axisTick: { show: false },
                type: 'category',
                data: echartData.xAxisArr
            }
        ],
        legend: {
            data: ['合同总金额', '已回款金额']
        },
        yAxis: {},
        series: [
            {
                name: '合同总金额',
                type: 'bar',
                data: echartData.seriesDiscount,
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#35f3ff' },
                            { offset: 0.5, color: '#44dfff' },
                            { offset: 1, color: '#56c6ff' }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    barBorderRadius: [30, 30, 0, 0] //圓角
                },
            },
            {
                name: '已回款金额',
                type: 'bar',
                data: echartData.seriesRecoveries,
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: '#9dfdc8' },
                            { offset: 0.5, color: '#73efdd' },
                            { offset: 1, color: '#9afcc8' }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    barBorderRadius: [30, 30, 0, 0] //圓角
                },
            }
        ]
    }
}


</script>
