<template>
    <div class="top-right-cmp">
        <div class="chart-name">
            医疗分类收入(单位：{{ props.topRightData[0]?.unit }})
            <dv-decoration-3 style="width:240px;height:20px;" />
        </div>
        <dv-charts :option="dsfg" />
    </div>
</template>
  
<script setup name='TopRightCmp' lang="ts">
import { reactive, ref, onUpdated, Ref, nextTick } from 'vue'
import { getDayAgo } from '../../../utils/date.js'

const props = defineProps({
    topRightData: {
        type: Object,
        default: {}
    }
})

const day7Ago = reactive([
    getDayAgo(-6, '/', 0),
    getDayAgo(-5, '/', 0),
    getDayAgo(-4, '/', 0),
    getDayAgo(-3, '/', 0),
    getDayAgo(-2, '/', 0),
    getDayAgo(-1, '/', 0),
    getDayAgo(0, '/', 0),
])

interface dataType {
    x: string,
    y: string,
}

const dataArrA: Ref<Array<any>> = ref([])
const dataArrB: Ref<Array<any>> = ref([])
const dataArrC: Ref<Array<any>> = ref([])
const dataArrD: Ref<Array<any>> = ref([])
const dataArrE: Ref<Array<any>> = ref([])
const dataArrX: Ref<Array<any>> = ref([])

let dsfg = ref({
    legend: {
        data: [
            {
                name: '医疗服务收入',
                color: '#00baff'
            },
            {
                name: '药品收入',
                color: '#ff5ca9'
            },
            {
                name: '耗材收入',
                color: '#3de7c9'
            },
            {
                name: '检验检查收入',
                color: '#f5d94e'
            }
        ],
        textStyle: {
            fill: '#fff'
        }
    },
    xAxis: {
        name: '日期',
        data: day7Ago,
        axisLine: {
            style: {
                stroke: '#999'
            },
        },
        axisLabel: {
            style: {
                fill: '#999'
            }
        },
        axisTick: {
            show: false
        }
    },
    yAxis: [
        {
            data: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                style: {
                    stroke: '#999'
                }
            },
            axisLabel: {
                style: {
                    fill: '#999'
                }
            },
            axisTick: {
                show: false
            },
            min: 0,
        },
        {
            data: 'value',
            position: 'right',
            splitLine: {
                show: false
            },
            axisLine: {
                style: {
                    stroke: '#999'
                }
            },
            axisLabel: {
                style: {
                    fill: '#999'
                }
            },
            axisTick: {
                show: false
            },
            min: 0,
            max: 120,
            interval: 20,
        }
    ],
    series: [
        {
            name: '医疗服务收入',
            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                style: {
                    fill: '#00baff'
                }
            },
            barStyle: {
                fill: '#00baff'
            }
        },
        {
            name: '药品收入',
            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                style: {
                    fill: '#ff5ca9'
                }
            },
            barStyle: {
                fill: '#ff5ca9'
            }
        },
        // {
        //     name: '耗材收入',
        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
        //     type: 'bar',
        //     label: {
        //         show: true
        //     },
        //     // yAxisIndex: 1,
        //     barStyle: {
        //         fill: '#00db95'
        //     }
        // },
        // {
        //     name: '检验检查收入',
        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
        //     type: 'bar',
        //     label: {
        //         show: true
        //     },
        //     yAxisIndex: 1,
        //     barStyle: {
        //         fill: '#f5d94e'
        //     }
        // },
        // {
        //     name: '药品收入',
        //     data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
        //     type: 'line',
        //     stack: 'a',
        //     label: {
        //         show: true
        //     },
        //     lineStyle: {
        //         stroke: '#ff5ca9'
        //     },
        //     linePoint: {
        //         radius: 4,
        //         style: {
        //             fill: '#ff5ca9',
        //             stroke: 'transparent'
        //         }
        //     }
        // },
        {
            name: '耗材收入',
            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            label: {
                show: true
            },
            lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            },
            lineStyle: {
                lineDash: [5, 5]
            },
            linePoint: {
                radius: 4,
                style: {
                    fill: '#00db95'
                }
            }
        },
        {
            name: '检验检查收入',
            data: [0, 0, 0, 0, 0, 0, 0] as Array<any>,
            type: 'line',
            yAxisIndex: 1,
            label: {
                show: true,
                offset: [0, -16],
            },
            lineArea: {
                show: true,
                gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
            },
            lineStyle: {
                stroke: '#f5d94e'
            },
            linePoint: {
                radius: 4,
                style: {
                    fill: '#f5d94e',
                    stroke: 'transparent'
                }
            }
        }
    ]
})


onUpdated(async () => {
    dataArrA.value = []
    dataArrB.value = []
    dataArrC.value = []
    dataArrD.value = []
    dataArrE.value = []
    dataArrX.value = []

    await nextTick(() => {
        if (props.topRightData) {
            props.topRightData[0].dataList.forEach((e: dataType) => {
                dataArrX.value.push(e.x)
                dataArrA.value.push(e.y)
            })

            props.topRightData[1].dataList.forEach((e: dataType) => {
                dataArrB.value.push(e.y)
            })

            props.topRightData[2].dataList.forEach((e: dataType) => {
                dataArrC.value.push(e.y)
            })

            props.topRightData[3].dataList.forEach((e: dataType) => {
                dataArrD.value.push(e.y)
            })

            for (let i in day7Ago) {
                dataArrE.value[i] = Number((dataArrA.value[i] - dataArrB.value[i] - dataArrC.value[i] - dataArrD.value[i]).toFixed(2))
            }

            dsfg.value.legend.data[1].name = props.topRightData[1].reportName
            dsfg.value.legend.data[2].name = props.topRightData[2].reportName
            dsfg.value.legend.data[3].name = props.topRightData[3].reportName
            dsfg.value.xAxis.data = dataArrX.value
            dsfg.value.series[0].data = dataArrE.value
            dsfg.value.series[1].data = dataArrB.value
            dsfg.value.series[1].name = props.topRightData[1].reportName
            dsfg.value.series[2].data = dataArrC.value
            dsfg.value.series[2].name = props.topRightData[2].reportName
            dsfg.value.series[3].data = dataArrD.value
            dsfg.value.series[3].name = props.topRightData[3].reportName
        }
    })

})

</script>
  
<style lang="scss">
.top-right-cmp {
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;

    .chart-name {
        position: absolute;
        right: 70px;
        text-align: right;
        font-size: 20px;
        top: 10px;
    }
}
</style>