<template>
    <lay-container :fluid="true" style="padding: 20px">
        <lay-row :space="10">
            <lay-col :md="24">
                <lay-card>
                    <lay-form style="margin-top: 20px">
                        <lay-row>
                            <lay-col :md="5">
                                <lay-form-item label="月度：" label-width="80">
                                    <lay-date-picker type="yearmonth" v-model="yearmonth" placeholder="月度" />
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="4">
                                <lay-form-item label-width="0">
                                    <lay-button type="primary" @click="toSearch">查询</lay-button>
                                    <lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
                                </lay-form-item>
                            </lay-col>
                        </lay-row>
                    </lay-form>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <template #title>
                        <div style="font-size: 20px;font-weight: 600;color: #333;">拒收红包金额统计</div>
                    </template>
                    <div id="main" ref="mainRef"></div>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <template #title>
                        <div style="font-size: 20px;font-weight: 600;color: #333;">拒收红包次数统计</div>
                    </template>
                    <div id="barChart" ref="barChartRef"></div>
                </lay-card>
            </lay-col>
        </lay-row>
    </lay-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const mainRef = ref()
const barChartRef = ref()
const yearmonth = ref('')

// 查询方法
const toSearch = () => {
    console.log('查询月度:', yearmonth.value)
    // TODO: 这里可以根据月度重新获取数据并刷新图表
    initChart()
    initBarChart()
}

// 重置方法
const toReset = () => {
    yearmonth.value = ''
    // TODO: 重置后可以重新加载默认数据
    initChart()
    initBarChart()
}

// 初始化图表
const initChart = () => {
    const chartDom = mainRef.value
    // @ts-ignore
    const myChart = echarts.init(chartDom)
    
    const color = ['#FF515A', '#FFC005']
    
    const echartData = [
        {
            name: '内科',
            value1: 2800,
            value2: 2400
        },
        {
            name: '外科',
            value1: 3200,
            value2: 2900
        },
        {
            name: '儿科',
            value1: 1500,
            value2: 1200
        },
        {
            name: '妇产科',
            value1: 2000,
            value2: 1800
        },
        {
            name: '急诊科',
            value1: 1800,
            value2: 1500
        },
        {
            name: '骨科',
            value1: 2500,
            value2: 2200
        },
        {
            name: '眼科',
            value1: 1200,
            value2: 1000
        },
        {
            name: '口腔科',
            value1: 1600,
            value2: 1400
        }
    ]

    const xAxisData = echartData.map((v) => v.name)
    const yAxisData1 = echartData.map((v) => v.value1)
    const yAxisData2 = echartData.map((v) => v.value2)
    
    const hexToRgba = (hex: string, opacity: number) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
                '0x' + hex.slice(3, 5)
            )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
        }
        return rgbaColor
    }

    const option = {
        color: color,
        legend: {
            right: 10,
            top: 10,
            data: ['拒收总金额', '已上交金额']
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
                return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
                            ${params[0].name}
                        </div>
                        <div style="color: #666;font-size: 13px;line-height: 24px">
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
                            拒收总金额：
                            <span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
                            元
                        </div>
                        <div style="color: #666;font-size: 13px;line-height: 24px">
                            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
                            已上交金额：
                            <span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
                            元
                        </div>`
            },
            extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#ccc',
                    width: 1,
                    type: 'dashed'
                }
            }
        },
        grid: {
            x: '50px',
            y: '50px',
            x2: '50px',
            y2: '50px'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#333'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#D9D9D9'
                    }
                },
                data: xAxisData
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '金额 (元)',
                min: 0,
                axisLabel: {
                    textStyle: {
                        color: '#666'
                    }
                },
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12,
                    lineHeight: 40
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#E9E9E9'
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '拒收总金额',
                type: 'bar',
                barWidth: '20%',
                data: yAxisData1,
                itemStyle: {
                    color: color[0]
                }
            },
            {
                name: '已上交金额',
                type: 'bar',
                barWidth: '20%',
                data: yAxisData2,
                itemStyle: {
                    color: color[1]
                }
            }
        ]
    }
    
    option && myChart.setOption(option)
}

// 初始化柱状图
const initBarChart = () => {
    const chartDom = barChartRef.value
    // @ts-ignore
    const myChart = echarts.init(chartDom)
    
    const barData = [
        { name: '内科', value: 15 },
        { name: '外科', value: 18 },
        { name: '儿科', value: 8 },
        { name: '妇产科', value: 12 },
        { name: '急诊科', value: 10 },
        { name: '骨科', value: 14 },
        { name: '眼科', value: 6 },
        { name: '口腔科', value: 9 }
    ]

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params: any) {
                return `${params[0].name}<br/>拒收次数：${params[0].value}次`
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: barData.map(item => item.name),
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#333'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '次数',
                axisLabel: {
                    color: '#333'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#E9E9E9'
                    }
                }
            }
        ],
        series: [
            {
                name: '拒收次数',
                type: 'bar',
                barWidth: '60%',
                data: barData.map(item => item.value),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#ff7875' },
                        { offset: 0.5, color: '#ff4d4f' },
                        { offset: 1, color: '#f5222d' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ff4d4f' },
                            { offset: 0.7, color: '#ff4d4f' },
                            { offset: 1, color: '#ff7875' }
                        ])
                    }
                }
            }
        ]
    }
    
    option && myChart.setOption(option)
}

onMounted(() => {
    initChart()
    initBarChart()
})
</script>

<style lang="less" scoped>
#main, #barChart {
    width: 100%;
    height: 400px;
}
</style>
