<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 = [
        '#0090FF',
        '#36CE9E',
        '#FFC005',
        '#FF515A',
        '#8B5CFF',
        '#00CA69'
    ]
    
    const echartData = [
        {
            name: '内科',
            value1: 94,
            value2: 91
        },
        {
            name: '外科',
            value1: 93,
            value2: 90
        },
        {
            name: '儿科',
            value1: 95,
            value2: 92
        },
        {
            name: '妇产科',
            value1: 92,
            value2: 89
        },
        {
            name: '急诊科',
            value1: 91,
            value2: 88
        },
        {
            name: '骨科',
            value1: 93,
            value2: 91
        },
        {
            name: '眼科',
            value1: 94,
            value2: 90
        },
        {
            name: '口腔科',
            value1: 92,
            value2: 89
        }
    ]

    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: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#333'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#D9D9D9'
                    }
                },
                data: xAxisData
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 80,
                max: 100,
                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: 'line',
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3)
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData1
            },
            {
                name: '合计科室平均分',
                type: 'line',
                smooth: true,
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(color[1], 0.3)
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[1], 0.1)
                                }
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10
                    }
                },
                data: yAxisData2
            }
        ]
    }
    
    option && myChart.setOption(option)
}

// 初始化柱状图
const initBarChart = () => {
    const chartDom = barChartRef.value
    // @ts-ignore
    const myChart = echarts.init(chartDom)
    
    const barData = [
        { name: '内科', value: 45 },
        { name: '外科', value: 38 },
        { name: '儿科', value: 25 },
        { name: '妇产科', value: 32 },
        { name: '急诊科', value: 28 },
        { name: '骨科', value: 22 },
        { name: '眼科', value: 18 },
        { name: '口腔科', value: 20 }
    ]

    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: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                    }
                }
            }
        ]
    }
    
    option && myChart.setOption(option)
}

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

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