<template>
    <div class="financial-report-container">
        <!-- 筛选区域 -->
        <el-card class="search-card" shadow="never">
            <el-form :inline="true" :model="queryParams" size="small" class="search-form">
                <el-form-item label="时间范围" class="compact-item">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 240px"
                        @change="handleDateRangeChange" />
                </el-form-item>
                <el-form-item label="统计周期" class="compact-item">
                    <el-radio-group v-model="queryParams.periodType" size="small">
                        <el-radio-button label="day">按日</el-radio-button>
                        <el-radio-button label="month">按月</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="门店" class="compact-item">
                    <el-select v-model="queryParams.storeIds" multiple placeholder="请选择门店（可多选）" clearable filterable
                        style="width: 300px" :loading="loading">
                        <el-option v-for="store in storeOptions" :key="store.id || store.F_Id"
                            :label="store.fullName || store.dm || store.name" :value="store.id || store.F_Id" />
                    </el-select>
                </el-form-item>
                <el-form-item class="compact-item">
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 统计卡片区域 -->
        <el-row :gutter="12" class="stat-cards-section">
            <el-col :xs="24" :sm="12" :md="6">
                <div class="stat-card income-card">
                    <div class="stat-icon">
                        <i class="el-icon-coin"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-label">总收入</div>
                        <div class="stat-value">{{ formatCurrency(totalIncome) }}</div>
                        <div class="stat-meta">
                            <span>{{ totalBillingCount }} 笔订单</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
                <div class="stat-card channel-card">
                    <div class="stat-icon">
                        <i class="el-icon-credit-card"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-label">收款渠道收入</div>
                        <div class="stat-value">{{ formatCurrency(channelIncome) }}</div>
                        <div class="stat-meta">
                            <span>{{ channelCount }} 个渠道</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
                <div class="stat-card payable-card">
                    <div class="stat-icon">
                        <i class="el-icon-shopping-cart-2"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-label">合作机构应付</div>
                        <div class="stat-value">{{ formatCurrency(cooperationPayable) }}</div>
                        <div class="stat-meta">
                            <span>{{ cooperationCount }} 个机构</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="6">
                <div class="stat-card receivable-card">
                    <div class="stat-icon">
                        <i class="el-icon-bank-card"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-label">付款医院应收</div>
                        <div class="stat-value">{{ formatCurrency(hospitalReceivable) }}</div>
                        <div class="stat-meta">
                            <span>{{ hospitalCount }} 个医院</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 图表区域 -->
        <el-row :gutter="12" class="charts-section">
            <!-- 总收入趋势图 -->
            <el-col :xs="24" :lg="16">
                <el-card class="chart-card" shadow="hover">
                    <div slot="header" class="chart-header">
                        <span class="chart-title">
                            <i class="el-icon-data-line"></i>
                            门店总收入趋势
                        </span>
                    </div>
                    <div ref="totalIncomeChart" class="chart-container"></div>
                </el-card>
            </el-col>
            <!-- 收款渠道分布饼图 -->
            <el-col :xs="24" :lg="8">
                <el-card class="chart-card" shadow="hover">
                    <div slot="header" class="chart-header">
                        <span class="chart-title">
                            <i class="el-icon-pie-chart"></i>
                            收款渠道分布
                        </span>
                    </div>
                    <div ref="channelPieChart" class="chart-container"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="12" class="charts-section">
            <!-- 合作机构应付趋势 -->
            <el-col :xs="24" :lg="12">
                <el-card class="chart-card" shadow="hover">
                    <div slot="header" class="chart-header">
                        <span class="chart-title">
                            <i class="el-icon-shopping-bag-1"></i>
                            合作机构应付趋势
                        </span>
                    </div>
                    <div ref="payableChart" class="chart-container"></div>
                </el-card>
            </el-col>
            <!-- 付款医院应收趋势 -->
            <el-col :xs="24" :lg="12">
                <el-card class="chart-card" shadow="hover">
                    <div slot="header" class="chart-header">
                        <span class="chart-title">
                            <i class="el-icon-wallet"></i>
                            付款医院应收趋势
                        </span>
                    </div>
                    <div ref="receivableChart" class="chart-container"></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 数据表格区域 -->
        <el-card class="table-card" shadow="hover">
            <div slot="header" class="table-header">
                <span class="table-title">
                    <i class="el-icon-s-grid"></i>
                    详细数据
                </span>
                <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="table-tabs">
                    <el-tab-pane label="总收入" name="totalIncome"></el-tab-pane>
                    <el-tab-pane label="收款渠道" name="channel"></el-tab-pane>
                    <el-tab-pane label="合作机构应付" name="payable"></el-tab-pane>
                    <el-tab-pane label="付款医院应收" name="receivable"></el-tab-pane>
                </el-tabs>
            </div>
            <!-- 筛选器区域 -->
            <div class="table-filters" v-if="showFilter">
                <el-form :inline="true" size="small" class="filter-form">
                    <!-- 收款渠道 - 付款方式筛选 -->
                    <el-form-item v-if="activeTab === 'channel'" label="付款方式：">
                        <el-select v-model="currentFilters.paymentMethod" placeholder="请选择付款方式" clearable
                            style="width: 200px" @change="handleFilterChange">
                            <el-option v-for="method in filterOptions.paymentMethods" :key="method" :label="method"
                                :value="method" />
                        </el-select>
                    </el-form-item>
                    <!-- 合作机构应付 - 合作机构筛选 -->
                    <el-form-item v-if="activeTab === 'payable'" label="合作机构：">
                        <el-select v-model="currentFilters.cooperationName" placeholder="请选择合作机构" clearable
                            style="width: 200px" @change="handleFilterChange">
                            <el-option v-for="name in filterOptions.cooperationNames" :key="name" :label="name"
                                :value="name" />
                        </el-select>
                    </el-form-item>
                    <!-- 付款医院应收 - 付款医院筛选 -->
                    <el-form-item v-if="activeTab === 'receivable'" label="付款医院：">
                        <el-select v-model="currentFilters.hospitalName" placeholder="请选择付款医院" clearable
                            style="width: 200px" @change="handleFilterChange">
                            <el-option v-for="name in filterOptions.hospitalNames" :key="name" :label="name"
                                :value="name" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-wrapper">
                <el-table :data="tableData" v-loading="tableLoading" stripe border class="data-table" :max-height="500"
                    style="width: 100%">
                    <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                        :label="column.label" :min-width="column.minWidth || column.width || 120"
                        :formatter="column.formatter" :sortable="column.sortable !== false" show-overflow-tooltip />
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import {
    getStorePaymentChannelIncome,
    getStoreCooperationPayable,
    getStorePaymentHospitalReceivable,
    getStoreTotalIncome
} from '@/api/extend/financialReport'
import { getStoreSelector } from '@/api/extend/store'

export default {
    name: 'FinancialReport',
    data() {
        return {
            // 查询参数
            queryParams: {
                startTime: null,
                endTime: null,
                periodType: 'day',
                storeIds: []
            },
            dateRange: [],
            // 门店选项
            storeOptions: [],
            // 数据加载状态
            loading: false,
            tableLoading: false,
            // 统计数据
            totalIncome: 0,
            totalBillingCount: 0,
            channelIncome: 0,
            channelCount: 0,
            cooperationPayable: 0,
            cooperationCount: 0,
            hospitalReceivable: 0,
            hospitalCount: 0,
            // 原始数据
            totalIncomeData: [],
            channelData: [],
            payableData: [],
            receivableData: [],
            // 图表实例
            totalIncomeChart: null,
            channelPieChart: null,
            payableChart: null,
            receivableChart: null,
            // 表格数据
            activeTab: 'totalIncome',
            tableData: [],
            tableColumns: [],
            // 筛选选项
            filterOptions: {
                paymentMethods: [], // 付款方式列表
                cooperationNames: [], // 合作机构列表
                hospitalNames: [] // 付款医院列表
            },
            // 当前筛选值
            currentFilters: {
                paymentMethod: '', // 付款方式筛选
                cooperationName: '', // 合作机构筛选
                hospitalName: '' // 付款医院筛选
            },
            // 原始表格数据（未筛选）
            rawTableData: []
        }
    },
    async mounted() {
        // 初始化默认时间范围
        this.initDefaultDateRange()
        // 加载门店选项
        await this.loadStoreOptions()
        // 初始化图表
        this.$nextTick(() => {
            this.initCharts()
            // 自动加载数据（延迟一下确保图表容器已渲染）
            setTimeout(() => {
                this.handleSearch()
            }, 300)
        })
    },
    beforeDestroy() {
        this.disposeCharts()
    },
    methods: {
        // 初始化默认时间范围（最近30天）
        initDefaultDateRange() {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 30)
            this.dateRange = [
                this.formatDate(start),
                this.formatDate(end)
            ]
            this.handleDateRangeChange(this.dateRange)
        },
        // 格式化日期
        formatDate(date) {
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        // 日期范围变化
        handleDateRangeChange(val) {
            if (val && val.length === 2) {
                this.queryParams.startTime = val[0] + 'T00:00:00'
                this.queryParams.endTime = val[1] + 'T23:59:59'
            } else {
                this.queryParams.startTime = null
                this.queryParams.endTime = null
            }
        },
        // 加载门店选项
        async loadStoreOptions() {
            try {
                const res = await getStoreSelector()
                console.log('门店接口返回:', res)
                if (res.code === 200) {
                    // 门店接口返回格式：{ list: [...] }
                    const data = (res.data && res.data.list) ? res.data.list : (res.data || [])
                    this.storeOptions = Array.isArray(data) ? data : []
                    console.log('门店选项数量:', this.storeOptions.length)
                    if (this.storeOptions.length === 0) {
                        this.$message.warning('暂无门店数据')
                    }
                } else {
                    this.$message.warning('加载门店列表失败: ' + (res.msg || '未知错误'))
                }
            } catch (error) {
                console.error('加载门店选项失败:', error)
                this.$message.error('加载门店列表失败: ' + (error.message || '未知错误'))
            }
        },
        // 查询
        async handleSearch() {
            if (!this.queryParams.startTime || !this.queryParams.endTime) {
                this.$message.warning('请选择时间范围')
                return
            }
            this.loading = true
            this.tableLoading = true
            try {
                await Promise.all([
                    this.loadTotalIncomeData(),
                    this.loadChannelData(),
                    this.loadPayableData(),
                    this.loadReceivableData()
                ])
                this.$nextTick(() => {
                    this.updateCharts()
                    this.updateTable()
                })
            } catch (error) {
                console.error('加载数据失败:', error)
                this.$message.error('加载数据失败: ' + (error.message || '未知错误'))
            } finally {
                this.loading = false
                this.tableLoading = false
            }
        },
        // 重置
        handleReset() {
            this.initDefaultDateRange()
            this.queryParams.periodType = 'day'
            this.queryParams.storeIds = []
            this.$nextTick(() => {
                this.handleSearch()
            })
        },
        // 加载总收入数据
        async loadTotalIncomeData() {
            try {
                const res = await getStoreTotalIncome(this.queryParams)
                console.log('总收入接口返回:', res)
                if (res.code === 200) {
                    // 后端接口返回的是 List，直接就是数组
                    const data = Array.isArray(res.data) ? res.data : []
                    console.log('总收入数据:', data)
                    // 接口返回字段名是 PascalCase：TotalIncome, BillingCount, PeriodDate, StoreId, StoreName
                    this.totalIncome = data.reduce((sum, item) => sum + (item.TotalIncome || item.totalIncome || 0), 0)
                    this.totalBillingCount = data.reduce((sum, item) => sum + (item.BillingCount || item.billingCount || 0), 0)
                    this.totalIncomeData = data
                    console.log('总收入汇总:', this.totalIncome, '笔数:', this.totalBillingCount)
                } else {
                    console.error('总收入接口返回错误:', res.msg)
                    this.totalIncomeData = []
                }
            } catch (error) {
                console.error('加载总收入数据失败:', error)
                this.totalIncomeData = []
            }
        },
        // 加载收款渠道数据
        async loadChannelData() {
            try {
                const res = await getStorePaymentChannelIncome(this.queryParams)
                console.log('收款渠道接口返回:', res)
                if (res.code === 200) {
                    const data = Array.isArray(res.data) ? res.data : []
                    console.log('收款渠道数据:', data)
                    let totalChannelIncome = 0
                    const channelSet = new Set()
                    data.forEach(store => {
                        totalChannelIncome += (store.TotalIncome || store.totalIncome || 0)
                        const paymentChannels = store.PaymentChannels || store.paymentChannels
                        if (paymentChannels && Array.isArray(paymentChannels)) {
                            paymentChannels.forEach(ch => {
                                const method = ch.PaymentMethod || ch.paymentMethod
                                if (method) channelSet.add(method)
                            })
                        }
                    })
                    this.channelIncome = totalChannelIncome
                    this.channelCount = channelSet.size
                    this.channelData = data
                    console.log('收款渠道汇总:', this.channelIncome, '渠道数:', this.channelCount)
                } else {
                    console.error('收款渠道接口返回错误:', res.msg)
                    this.channelData = []
                }
            } catch (error) {
                console.error('加载收款渠道数据失败:', error)
                this.channelData = []
            }
        },
        // 加载合作机构应付数据
        async loadPayableData() {
            try {
                const res = await getStoreCooperationPayable(this.queryParams)
                console.log('合作机构应付接口返回:', res)
                if (res.code === 200) {
                    const data = Array.isArray(res.data) ? res.data : []
                    console.log('合作机构应付数据:', data)
                    let totalPayable = 0
                    const cooperationSet = new Set()
                    data.forEach(store => {
                        totalPayable += (store.TotalPayable || store.totalPayable || 0)
                        const cooperationItems = store.CooperationItems || store.cooperationItems
                        if (cooperationItems && Array.isArray(cooperationItems)) {
                            cooperationItems.forEach(item => {
                                const id = item.CooperationId || item.cooperationId
                                if (id) cooperationSet.add(id)
                            })
                        }
                    })
                    this.cooperationPayable = totalPayable
                    this.cooperationCount = cooperationSet.size
                    this.payableData = data
                    console.log('合作机构应付汇总:', this.cooperationPayable, '机构数:', this.cooperationCount)
                } else {
                    console.error('合作机构应付接口返回错误:', res.msg)
                    this.payableData = []
                }
            } catch (error) {
                console.error('加载合作机构应付数据失败:', error)
                this.payableData = []
            }
        },
        // 加载付款医院应收数据
        async loadReceivableData() {
            try {
                const res = await getStorePaymentHospitalReceivable(this.queryParams)
                console.log('付款医院应收接口返回:', res)
                if (res.code === 200) {
                    const data = Array.isArray(res.data) ? res.data : []
                    console.log('付款医院应收数据:', data)
                    let totalReceivable = 0
                    const hospitalSet = new Set()
                    data.forEach(store => {
                        totalReceivable += (store.TotalReceivable || store.totalReceivable || 0)
                        const hospitalItems = store.HospitalItems || store.hospitalItems
                        if (hospitalItems && Array.isArray(hospitalItems)) {
                            hospitalItems.forEach(item => {
                                const id = item.HospitalId || item.hospitalId
                                if (id) hospitalSet.add(id)
                            })
                        }
                    })
                    this.hospitalReceivable = totalReceivable
                    this.hospitalCount = hospitalSet.size
                    this.receivableData = data
                    console.log('付款医院应收汇总:', this.hospitalReceivable, '医院数:', this.hospitalCount)
                } else {
                    console.error('付款医院应收接口返回错误:', res.msg)
                    this.receivableData = []
                }
            } catch (error) {
                console.error('加载付款医院应收数据失败:', error)
                this.receivableData = []
            }
        },
        // 初始化图表
        initCharts() {
            this.initTotalIncomeChart()
            this.initChannelPieChart()
            this.initPayableChart()
            this.initReceivableChart()
        },
        // 初始化总收入趋势图
        initTotalIncomeChart() {
            if (!this.$refs.totalIncomeChart) return
            if (this.totalIncomeChart) {
                this.totalIncomeChart.dispose()
            }
            this.totalIncomeChart = echarts.init(this.$refs.totalIncomeChart)
            window.addEventListener('resize', () => {
                if (this.totalIncomeChart) {
                    this.totalIncomeChart.resize()
                }
            })
        },
        // 初始化收款渠道饼图
        initChannelPieChart() {
            if (!this.$refs.channelPieChart) return
            if (this.channelPieChart) {
                this.channelPieChart.dispose()
            }
            this.channelPieChart = echarts.init(this.$refs.channelPieChart)
            window.addEventListener('resize', () => {
                if (this.channelPieChart) {
                    this.channelPieChart.resize()
                }
            })
        },
        // 初始化应付趋势图
        initPayableChart() {
            if (!this.$refs.payableChart) return
            if (this.payableChart) {
                this.payableChart.dispose()
            }
            this.payableChart = echarts.init(this.$refs.payableChart)
            window.addEventListener('resize', () => {
                if (this.payableChart) {
                    this.payableChart.resize()
                }
            })
        },
        // 初始化应收趋势图
        initReceivableChart() {
            if (!this.$refs.receivableChart) return
            if (this.receivableChart) {
                this.receivableChart.dispose()
            }
            this.receivableChart = echarts.init(this.$refs.receivableChart)
            window.addEventListener('resize', () => {
                if (this.receivableChart) {
                    this.receivableChart.resize()
                }
            })
        },
        // 更新所有图表
        updateCharts() {
            this.$nextTick(() => {
                this.updateTotalIncomeChart()
                this.updateChannelPieChart()
                this.updatePayableChart()
                this.updateReceivableChart()
            })
        },
        // 更新总收入趋势图
        updateTotalIncomeChart() {
            if (!this.totalIncomeChart) {
                console.warn('总收入图表实例不存在')
                return
            }
            if (!this.totalIncomeData || this.totalIncomeData.length === 0) {
                console.warn('总收入数据为空')
                this.totalIncomeChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center',
                        top: 'middle',
                        textStyle: {
                            color: '#999',
                            fontSize: 16
                        }
                    }
                })
                return
            }

            // 按日期聚合数据
            const dateMap = new Map()
            this.totalIncomeData.forEach(item => {
                const date = item.PeriodDate || item.periodDate
                const income = item.TotalIncome || item.totalIncome || 0
                if (dateMap.has(date)) {
                    dateMap.set(date, dateMap.get(date) + income)
                } else {
                    dateMap.set(date, income)
                }
            })

            const dates = Array.from(dateMap.keys()).sort()
            const values = dates.map(date => dateMap.get(date))

            console.log('总收入图表数据 - 日期:', dates, '金额:', values)

            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        const param = params[0]
                        return `${param.axisValue}<br/>${param.seriesName}: ${this.formatCurrency(param.value)}`
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: { color: '#666', rotate: 45 }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: {
                        color: '#666',
                        formatter: (value) => {
                            if (value >= 10000) {
                                return (value / 10000).toFixed(1) + '万'
                            }
                            return value
                        }
                    },
                    splitLine: { lineStyle: { color: '#F0F0F0' } }
                },
                series: [{
                    name: '总收入',
                    type: 'line',
                    smooth: true,
                    data: values,
                    itemStyle: { color: '#409EFF' },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(64,158,255,0.3)' },
                                { offset: 1, color: 'rgba(64,158,255,0.1)' }
                            ]
                        }
                    }
                }]
            }
            this.totalIncomeChart.setOption(option, true)
            // 确保图表大小正确
            setTimeout(() => {
                if (this.totalIncomeChart) {
                    this.totalIncomeChart.resize()
                }
            }, 100)
        },
        // 更新收款渠道饼图
        updateChannelPieChart() {
            if (!this.channelPieChart) {
                console.warn('收款渠道图表实例不存在')
                return
            }
            if (!this.channelData || this.channelData.length === 0) {
                console.warn('收款渠道数据为空')
                this.channelPieChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center',
                        top: 'middle',
                        textStyle: {
                            color: '#999',
                            fontSize: 16
                        }
                    }
                })
                return
            }

            // 按渠道聚合数据
            const channelMap = new Map()
            this.channelData.forEach(store => {
                const paymentChannels = store.PaymentChannels || store.paymentChannels
                if (paymentChannels && Array.isArray(paymentChannels)) {
                    paymentChannels.forEach(ch => {
                        const method = ch.PaymentMethod || ch.paymentMethod || '未填写'
                        const amount = ch.Amount || ch.amount || 0
                        if (channelMap.has(method)) {
                            channelMap.set(method, channelMap.get(method) + amount)
                        } else {
                            channelMap.set(method, amount)
                        }
                    })
                }
            })

            const data = Array.from(channelMap.entries()).map(([name, value]) => ({
                name,
                value
            }))

            console.log('收款渠道图表数据:', data)

            if (data.length === 0) {
                this.channelPieChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center',
                        top: 'middle',
                        textStyle: {
                            color: '#999',
                            fontSize: 16
                        }
                    }
                })
                return
            }

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle'
                },
                series: [{
                    name: '收款渠道',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {d}%'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    data: data
                }]
            }
            this.channelPieChart.setOption(option, true)
            setTimeout(() => {
                if (this.channelPieChart) {
                    this.channelPieChart.resize()
                }
            }, 100)
        },
        // 更新应付趋势图
        updatePayableChart() {
            if (!this.payableChart) {
                console.warn('应付图表实例不存在')
                return
            }
            if (!this.payableData || this.payableData.length === 0) {
                console.warn('应付数据为空')
                this.payableChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center',
                        top: 'middle',
                        textStyle: {
                            color: '#999',
                            fontSize: 16
                        }
                    }
                })
                return
            }

            const dateMap = new Map()
            this.payableData.forEach(item => {
                const date = item.PeriodDate || item.periodDate
                const amount = item.TotalPayable || item.totalPayable || 0
                if (dateMap.has(date)) {
                    dateMap.set(date, dateMap.get(date) + amount)
                } else {
                    dateMap.set(date, amount)
                }
            })

            const dates = Array.from(dateMap.keys()).sort()
            const values = dates.map(date => dateMap.get(date))

            console.log('应付图表数据 - 日期:', dates, '金额:', values)

            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        const param = params[0]
                        return `${param.axisValue}<br/>${param.seriesName}: ${this.formatCurrency(param.value)}`
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: { color: '#666', rotate: 45 }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: {
                        color: '#666',
                        formatter: (value) => {
                            if (value >= 10000) {
                                return (value / 10000).toFixed(1) + '万'
                            }
                            return value
                        }
                    },
                    splitLine: { lineStyle: { color: '#F0F0F0' } }
                },
                series: [{
                    name: '应付金额',
                    type: 'bar',
                    data: values,
                    itemStyle: { color: '#E6A23C' }
                }]
            }
            this.payableChart.setOption(option, true)
            setTimeout(() => {
                if (this.payableChart) {
                    this.payableChart.resize()
                }
            }, 100)
        },
        // 更新应收趋势图
        updateReceivableChart() {
            if (!this.receivableChart) {
                console.warn('应收图表实例不存在')
                return
            }
            if (!this.receivableData || this.receivableData.length === 0) {
                console.warn('应收数据为空')
                this.receivableChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center',
                        top: 'middle',
                        textStyle: {
                            color: '#999',
                            fontSize: 16
                        }
                    }
                })
                return
            }

            const dateMap = new Map()
            this.receivableData.forEach(item => {
                const date = item.PeriodDate || item.periodDate
                const amount = item.TotalReceivable || item.totalReceivable || 0
                if (dateMap.has(date)) {
                    dateMap.set(date, dateMap.get(date) + amount)
                } else {
                    dateMap.set(date, amount)
                }
            })

            const dates = Array.from(dateMap.keys()).sort()
            const values = dates.map(date => dateMap.get(date))

            console.log('应收图表数据 - 日期:', dates, '金额:', values)

            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: (params) => {
                        const param = params[0]
                        return `${param.axisValue}<br/>${param.seriesName}: ${this.formatCurrency(param.value)}`
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: dates,
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: { color: '#666', rotate: 45 }
                },
                yAxis: {
                    type: 'value',
                    axisLine: { lineStyle: { color: '#E0E6F1' } },
                    axisLabel: {
                        color: '#666',
                        formatter: (value) => {
                            if (value >= 10000) {
                                return (value / 10000).toFixed(1) + '万'
                            }
                            return value
                        }
                    },
                    splitLine: { lineStyle: { color: '#F0F0F0' } }
                },
                series: [{
                    name: '应收金额',
                    type: 'bar',
                    data: values,
                    itemStyle: { color: '#67C23A' }
                }]
            }
            this.receivableChart.setOption(option, true)
            setTimeout(() => {
                if (this.receivableChart) {
                    this.receivableChart.resize()
                }
            }, 100)
        },
        // 销毁图表
        disposeCharts() {
            if (this.totalIncomeChart) {
                this.totalIncomeChart.dispose()
                this.totalIncomeChart = null
            }
            if (this.channelPieChart) {
                this.channelPieChart.dispose()
                this.channelPieChart = null
            }
            if (this.payableChart) {
                this.payableChart.dispose()
                this.payableChart = null
            }
            if (this.receivableChart) {
                this.receivableChart.dispose()
                this.receivableChart = null
            }
        },
        // 切换表格Tab
        handleTabClick(tab) {
            // 重置筛选
            this.currentFilters = {
                paymentMethod: '',
                cooperationName: '',
                hospitalName: ''
            }
            this.updateTable()
        },
        // 计算是否显示筛选器
        get showFilter() {
            return this.activeTab === 'channel' || this.activeTab === 'payable' || this.activeTab === 'receivable'
        },
        // 筛选变化处理
        handleFilterChange() {
            this.applyFilters()
        },
        // 应用筛选
        applyFilters() {
            if (!this.rawTableData || this.rawTableData.length === 0) {
                this.tableData = []
                return
            }

            let filteredData = [...this.rawTableData]

            // 根据当前Tab应用不同的筛选
            if (this.activeTab === 'channel') {
                if (this.currentFilters.paymentMethod) {
                    filteredData = filteredData.filter(item =>
                        (item.PaymentMethod || item.paymentMethod) === this.currentFilters.paymentMethod
                    )
                }
            } else if (this.activeTab === 'payable') {
                if (this.currentFilters.cooperationName) {
                    filteredData = filteredData.filter(item =>
                        (item.CooperationName || item.cooperationName) === this.currentFilters.cooperationName
                    )
                }
            } else if (this.activeTab === 'receivable') {
                if (this.currentFilters.hospitalName) {
                    filteredData = filteredData.filter(item =>
                        (item.HospitalName || item.hospitalName) === this.currentFilters.hospitalName
                    )
                }
            }

            this.tableData = filteredData
        },
        // 更新表格数据
        updateTable() {
            this.tableLoading = true
            setTimeout(() => {
                switch (this.activeTab) {
                    case 'totalIncome':
                        this.updateTotalIncomeTable()
                        break
                    case 'channel':
                        this.updateChannelTable()
                        break
                    case 'payable':
                        this.updatePayableTable()
                        break
                    case 'receivable':
                        this.updateReceivableTable()
                        break
                }
                // 更新筛选选项
                this.updateFilterOptions()
                // 应用当前筛选
                this.applyFilters()
                this.tableLoading = false
            }, 100)
        },
        // 更新筛选选项
        updateFilterOptions() {
            if (this.activeTab === 'channel') {
                // 从原始数据中提取所有付款方式
                const methods = new Set()
                this.channelData.forEach(store => {
                    const paymentChannels = store.PaymentChannels || store.paymentChannels
                    if (paymentChannels && Array.isArray(paymentChannels)) {
                        paymentChannels.forEach(ch => {
                            const method = ch.PaymentMethod || ch.paymentMethod
                            if (method) methods.add(method)
                        })
                    }
                })
                this.filterOptions.paymentMethods = Array.from(methods).sort()
            } else if (this.activeTab === 'payable') {
                // 从原始数据中提取所有合作机构
                const names = new Set()
                this.payableData.forEach(store => {
                    const cooperationItems = store.CooperationItems || store.cooperationItems
                    if (cooperationItems && Array.isArray(cooperationItems)) {
                        cooperationItems.forEach(item => {
                            const name = item.CooperationName || item.cooperationName
                            if (name) names.add(name)
                        })
                    }
                })
                this.filterOptions.cooperationNames = Array.from(names).sort()
            } else if (this.activeTab === 'receivable') {
                // 从原始数据中提取所有付款医院
                const names = new Set()
                this.receivableData.forEach(store => {
                    const hospitalItems = store.HospitalItems || store.hospitalItems
                    if (hospitalItems && Array.isArray(hospitalItems)) {
                        hospitalItems.forEach(item => {
                            const name = item.HospitalName || item.hospitalName
                            if (name) names.add(name)
                        })
                    }
                })
                this.filterOptions.hospitalNames = Array.from(names).sort()
            }
        },
        // 更新总收入表格
        updateTotalIncomeTable() {
            if (!this.totalIncomeData) {
                this.rawTableData = []
                this.tableData = []
                return
            }
            this.tableColumns = [
                { prop: 'StoreName', label: '门店名称', minWidth: 150 },
                { prop: 'PeriodDate', label: '统计日期', minWidth: 120 },
                {
                    prop: 'TotalIncome',
                    label: '总收入',
                    minWidth: 150,
                    formatter: (row) => this.formatCurrency(row.TotalIncome || row.totalIncome)
                },
                { prop: 'BillingCount', label: '开单笔数', minWidth: 120 },
                {
                    prop: 'AverageAmount',
                    label: '平均单笔',
                    minWidth: 150,
                    formatter: (row) => this.formatCurrency(row.AverageAmount || row.averageAmount)
                }
            ]
            this.rawTableData = this.totalIncomeData.map(item => ({
                ...item,
                AverageAmount: (item.BillingCount || item.billingCount || 0) > 0
                    ? (item.TotalIncome || item.totalIncome || 0) / (item.BillingCount || item.billingCount)
                    : 0
            }))
            this.tableData = [...this.rawTableData]
        },
        // 更新收款渠道表格
        updateChannelTable() {
            if (!this.channelData) {
                this.rawTableData = []
                this.tableData = []
                return
            }
            this.tableColumns = [
                { prop: 'StoreName', label: '门店名称', minWidth: 150 },
                { prop: 'PeriodDate', label: '统计日期', minWidth: 120 },
                { prop: 'PaymentMethod', label: '付款方式', minWidth: 120 },
                {
                    prop: 'Amount',
                    label: '收款金额',
                    minWidth: 150,
                    formatter: (row) => this.formatCurrency(row.Amount || row.amount)
                },
                { prop: 'Count', label: '笔数', minWidth: 100 },
                {
                    prop: 'Percentage',
                    label: '占比',
                    minWidth: 100,
                    formatter: (row) => (row.Percentage || row.percentage || 0) + '%'
                }
            ]
            const list = []
            this.channelData.forEach(store => {
                const paymentChannels = store.PaymentChannels || store.paymentChannels
                if (paymentChannels) {
                    paymentChannels.forEach(ch => {
                        list.push({
                            StoreName: store.StoreName || store.storeName,
                            PeriodDate: store.PeriodDate || store.periodDate,
                            PaymentMethod: ch.PaymentMethod || ch.paymentMethod,
                            Amount: ch.Amount || ch.amount,
                            Count: ch.Count || ch.count,
                            Percentage: ch.Percentage || ch.percentage
                        })
                    })
                }
            })
            this.rawTableData = list
            this.tableData = [...this.rawTableData]
        },
        // 更新应付表格
        updatePayableTable() {
            if (!this.payableData) {
                this.rawTableData = []
                this.tableData = []
                return
            }
            this.tableColumns = [
                { prop: 'StoreName', label: '门店名称', minWidth: 150 },
                { prop: 'PeriodDate', label: '统计日期', minWidth: 120 },
                { prop: 'CooperationName', label: '合作机构', minWidth: 200 },
                {
                    prop: 'PayableAmount',
                    label: '应付金额',
                    minWidth: 150,
                    formatter: (row) => this.formatCurrency(row.PayableAmount || row.payableAmount)
                },
                { prop: 'BillingCount', label: '开单笔数', minWidth: 120 }
            ]
            const list = []
            this.payableData.forEach(store => {
                const cooperationItems = store.CooperationItems || store.cooperationItems
                if (cooperationItems) {
                    cooperationItems.forEach(item => {
                        list.push({
                            StoreName: store.StoreName || store.storeName,
                            PeriodDate: store.PeriodDate || store.periodDate,
                            CooperationName: item.CooperationName || item.cooperationName,
                            PayableAmount: item.PayableAmount || item.payableAmount,
                            BillingCount: item.BillingCount || item.billingCount
                        })
                    })
                }
            })
            this.rawTableData = list
            this.tableData = [...this.rawTableData]
        },
        // 更新应收表格
        updateReceivableTable() {
            if (!this.receivableData) {
                this.rawTableData = []
                this.tableData = []
                return
            }
            this.tableColumns = [
                { prop: 'StoreName', label: '门店名称', minWidth: 150 },
                { prop: 'PeriodDate', label: '统计日期', minWidth: 120 },
                { prop: 'HospitalName', label: '付款医院', minWidth: 200 },
                {
                    prop: 'ReceivableAmount',
                    label: '应收金额',
                    minWidth: 150,
                    formatter: (row) => this.formatCurrency(row.ReceivableAmount || row.receivableAmount)
                },
                { prop: 'BillingCount', label: '开单笔数', minWidth: 120 }
            ]
            const list = []
            this.receivableData.forEach(store => {
                const hospitalItems = store.HospitalItems || store.hospitalItems
                if (hospitalItems) {
                    hospitalItems.forEach(item => {
                        list.push({
                            StoreName: store.StoreName || store.storeName,
                            PeriodDate: store.PeriodDate || store.periodDate,
                            HospitalName: item.HospitalName || item.hospitalName,
                            ReceivableAmount: item.ReceivableAmount || item.receivableAmount,
                            BillingCount: item.BillingCount || item.billingCount
                        })
                    })
                }
            })
            this.rawTableData = list
            this.tableData = [...this.rawTableData]
        },
        // 格式化货币
        formatCurrency(value) {
            if (value === null || value === undefined) return '¥0.00'
            const num = Number(value)
            if (isNaN(num)) return '¥0.00'
            return '¥' + num.toLocaleString('zh-CN', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.financial-report-container {
    padding: 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
    min-height: calc(100vh - 84px);
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: rgba(144, 147, 153, 0.1);
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(144, 147, 153, 0.3);
        border-radius: 4px;
        transition: background 0.3s ease;

        &:hover {
            background: rgba(144, 147, 153, 0.5);
        }
    }

    // 筛选卡片
    .search-card {
        margin-bottom: 16px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(144, 147, 153, 0.15);
        transition: all 0.3s ease;
        padding: 14px 18px;

        &:hover {
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
            transform: translateY(-1px);
        }

        .search-form {
            margin: 0;

            ::v-deep .el-form-item {
                margin-bottom: 0;
                margin-right: 8px;

                .el-form-item__label {
                    color: #475569;
                    font-weight: 500;
                    font-size: 13px;
                    padding-right: 6px;
                    padding-bottom: 0;
                    line-height: 26px;
                }
            }

            .compact-item {
                ::v-deep .el-form-item__content {
                    line-height: 26px;
                }
            }

            ::v-deep .el-button {
                border-radius: 8px;
                font-weight: 500;
                transition: all 0.3s ease;
                padding: 4px 12px;
                height: 26px;
                font-size: 13px;

                &.el-button--primary {
                    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                    border: none;
                    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);

                    &:hover {
                        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
                    }
                }

                &:not(.el-button--primary) {
                    background: rgba(255, 255, 255, 0.9);
                    border-color: rgba(144, 147, 153, 0.3);
                    color: #606266;

                    &:hover {
                        background: rgba(255, 255, 255, 1);
                        border-color: rgba(144, 147, 153, 0.5);
                        transform: translateY(-1px);
                    }
                }
            }
        }
    }

    // 统计卡片区域
    .stat-cards-section {
        margin-bottom: 16px;

        .stat-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            border: 1px solid rgba(144, 147, 153, 0.15);
            height: 100%;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                transition: left 0.5s ease;
            }

            &:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);

                &::before {
                    left: 100%;
                }
            }

            .stat-icon {
                width: 56px;
                height: 56px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                font-size: 24px;
                flex-shrink: 0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;

                &::before {
                    content: '';
                    position: absolute;
                    top: -50%;
                    left: -50%;
                    width: 200%;
                    height: 200%;
                    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                    transform: rotate(45deg);
                    transition: all 0.6s ease;
                }

                i {
                    position: relative;
                    z-index: 1;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                }
            }

            &:hover .stat-icon {
                transform: scale(1.1) rotate(5deg);
                box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

                &::before {
                    top: 50%;
                    left: 50%;
                }
            }

            .stat-content {
                flex: 1;
                min-width: 0;

                .stat-label {
                    font-size: 13px;
                    color: #606266;
                    margin-bottom: 8px;
                    font-weight: 500;
                    line-height: 1.3;
                    letter-spacing: 0.01em;
                }

                .stat-value {
                    font-size: 24px;
                    font-weight: 700;
                    background: linear-gradient(135deg, #303133 0%, #606266 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    margin-bottom: 6px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.2;
                    letter-spacing: -0.02em;
                }

                .stat-meta {
                    font-size: 12px;
                    color: #909399;
                    line-height: 1.3;
                    font-weight: 400;
                }
            }

            &.income-card {
                .stat-icon {
                    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                    color: #fff;
                }
            }

            &.channel-card {
                .stat-icon {
                    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
                    color: #fff;
                }
            }

            &.payable-card {
                .stat-icon {
                    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                    color: #fff;
                }
            }

            &.receivable-card {
                .stat-icon {
                    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                    color: #fff;
                }
            }
        }
    }

    // 图表区域
    .charts-section {
        margin-bottom: 16px;

        .chart-card {
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(144, 147, 153, 0.15);
            transition: all 0.3s ease;
            overflow: hidden;

            &:hover {
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
                transform: translateY(-2px);
            }

            ::v-deep .el-card__header {
                padding: 16px 20px;
                background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(240, 242, 245, 0.8) 100%);
                border-bottom: 2px solid rgba(144, 147, 153, 0.2);
                border-radius: 12px 12px 0 0;
            }

            ::v-deep .el-card__body {
                padding: 20px;
            }

            .chart-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0;
                border-bottom: none;
                background: transparent;
                min-height: auto;
                height: auto;

                .chart-title {
                    font-size: 15px;
                    font-weight: 700;
                    background: linear-gradient(135deg, #303133 0%, #606266 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    letter-spacing: -0.01em;
                    height: auto;
                    line-height: 1.5;

                    i {
                        width: 32px;
                        height: 32px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 8px;
                        font-size: 16px;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        position: relative;
                        overflow: hidden;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                            transition: left 0.5s ease;
                        }

                        &.el-icon-data-line {
                            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
                            color: #3b82f6;
                        }

                        &.el-icon-pie-chart {
                            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);
                            color: #a855f7;
                        }

                        &.el-icon-shopping-bag-1 {
                            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
                            color: #f59e0b;
                        }

                        &.el-icon-wallet {
                            background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
                            color: #22c55e;
                        }

                        &:hover {
                            transform: scale(1.1) rotate(5deg);
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

                            &::before {
                                left: 100%;
                            }

                            &.el-icon-data-line {
                                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                                color: #fff;
                            }

                            &.el-icon-pie-chart {
                                background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
                                color: #fff;
                            }

                            &.el-icon-shopping-bag-1 {
                                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                                color: #fff;
                            }

                            &.el-icon-wallet {
                                background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
                                color: #fff;
                            }
                        }
                    }
                }
            }

            .chart-container {
                width: 100%;
                height: 360px;
                min-height: 360px;
                padding: 0;
            }
        }
    }

    // 表格卡片
    .table-card {
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(144, 147, 153, 0.15);
        transition: all 0.3s ease;
        width: 100%;
        overflow: hidden;

        &:hover {
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
            transform: translateY(-2px);
        }

        ::v-deep .el-card__header {
            padding: 16px 20px;
            background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(240, 242, 245, 0.8) 100%);
            border-bottom: 2px solid rgba(144, 147, 153, 0.2);
            border-radius: 12px 12px 0 0;
        }

        ::v-deep .el-card__body {
            padding: 20px;
        }

        .table-filters {
            padding: 14px 20px;
            background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(240, 242, 245, 0.8) 100%);
            border-bottom: 2px solid rgba(144, 147, 153, 0.2);
            margin-top: 0;

            .filter-form {
                margin: 0;

                ::v-deep .el-form-item {
                    margin-bottom: 0;
                    margin-right: 8px;

                    .el-form-item__label {
                        color: #475569;
                        font-weight: 500;
                        font-size: 13px;
                        padding-right: 6px;
                        padding-bottom: 0;
                        line-height: 26px;
                    }

                    .el-select {
                        .el-input__inner {
                            border-radius: 6px;
                            border-color: #cbd5e1;
                            transition: all 0.2s ease;
                            height: 26px;
                            line-height: 26px;
                            font-size: 13px;

                            &:hover {
                                border-color: #94a3b8;
                            }

                            &:focus {
                                border-color: #2563eb;
                            }
                        }
                    }
                }
            }
        }

        .table-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0;
            border-bottom: none;
            background: transparent;
            min-height: auto;
            height: auto;

            .table-title {
                font-size: 15px;
                font-weight: 700;
                background: linear-gradient(135deg, #303133 0%, #606266 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                display: flex;
                align-items: center;
                gap: 12px;
                letter-spacing: -0.01em;
                flex-shrink: 0;
                height: auto;
                line-height: 1.5;

                i {
                    width: 32px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 8px;
                    font-size: 16px;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
                    color: #3b82f6;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -100%;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
                        transition: left 0.5s ease;
                    }

                    &:hover {
                        transform: scale(1.1) rotate(5deg);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                        color: #fff;

                        &::before {
                            left: 100%;
                        }
                    }
                }
            }

            .table-tabs {
                flex: 1;
                margin-left: 16px;

                ::v-deep .el-tabs__header {
                    margin: 0;
                }

                ::v-deep .el-tabs__nav-wrap {
                    &::after {
                        background-color: rgba(144, 147, 153, 0.2);
                        height: 2px;
                    }
                }

                ::v-deep .el-tabs__item {
                    font-weight: 500;
                    color: #606266;
                    padding: 0 16px;
                    height: 32px;
                    line-height: 32px;
                    font-size: 14px;
                    transition: all 0.3s ease;
                    border-radius: 6px;
                    margin-right: 4px;

                    &.is-active {
                        color: #3b82f6;
                        font-weight: 600;
                        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
                    }

                    &:hover:not(.is-active) {
                        color: #3b82f6;
                        background: rgba(59, 130, 246, 0.05);
                    }
                }

                ::v-deep .el-tabs__active-bar {
                    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                    height: 3px;
                    border-radius: 2px;
                }
            }
        }

        .table-wrapper {
            width: 100%;
            padding: 0;
            overflow-x: auto;
            overflow-y: hidden;

            &::-webkit-scrollbar {
                height: 8px;
            }

            &::-webkit-scrollbar-track {
                background: rgba(144, 147, 153, 0.1);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(144, 147, 153, 0.3);
                border-radius: 4px;
                transition: background 0.3s ease;

                &:hover {
                    background: rgba(144, 147, 153, 0.5);
                }
            }

            .data-table {
                width: 100% !important;
                min-width: 100%;

                ::v-deep .el-table {
                    width: 100% !important;
                    font-size: 14px;
                    border-radius: 8px;
                    overflow: hidden;
                    border: 1px solid rgba(144, 147, 153, 0.2);

                    .el-table__header-wrapper {
                        width: 100% !important;
                    }

                    .el-table__body-wrapper {
                        width: 100% !important;
                    }

                    .el-table__header {
                        width: 100% !important;
                        background: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(240, 242, 245, 0.9) 100%);

                        th {
                            background: transparent;
                            color: #303133;
                            font-weight: 600;
                            border-bottom: 2px solid rgba(144, 147, 153, 0.2);
                            padding: 12px 16px;
                            text-align: left;
                            font-size: 13px;
                            letter-spacing: 0.01em;
                        }
                    }

                    .el-table__body {
                        width: 100% !important;

                        tr {
                            width: 100% !important;
                            transition: all 0.3s ease;

                            &:hover {
                                background: linear-gradient(135deg, rgba(248, 249, 250, 0.5) 0%, rgba(240, 242, 245, 0.5) 100%) !important;
                                transform: translateX(2px);
                            }
                        }

                        td {
                            border-bottom: 1px solid rgba(144, 147, 153, 0.15);
                            padding: 12px 16px;
                            color: #303133;
                            text-align: left;
                            font-size: 14px;
                            line-height: 1.5;
                        }
                    }

                    .el-table__row {
                        width: 100% !important;

                        &:nth-child(even) {
                            background-color: rgba(248, 249, 250, 0.3);
                        }

                        &:last-child td {
                            border-bottom: none;
                        }
                    }

                    // 确保最后一列自动扩展填充剩余空间
                    .el-table__fixed-right-patch {
                        width: 0 !important;
                    }

                    // 优化加载状态
                    .el-loading-mask {
                        background-color: rgba(248, 250, 252, 0.9);
                        backdrop-filter: blur(2px);
                    }
                }
            }
        }
    }
}

// 响应式适配
@media (max-width: 1400px) {
    .financial-report-container {
        padding: 16px;
    }
}

@media (max-width: 1200px) {
    .financial-report-container {
        padding: 16px;

        .stat-cards-section {
            .stat-card {
                .stat-icon {
                    width: 56px;
                    height: 56px;
                    font-size: 24px;
                    margin-right: 16px;
                }

                .stat-value {
                    font-size: 22px;
                }
            }
        }

        .chart-card {
            .chart-container {
                height: 360px;
                min-height: 360px;
            }
        }
    }
}

@media (max-width: 992px) {
    .financial-report-container {
        .stat-cards-section {
            .stat-card {
                padding: 16px 20px;

                .stat-icon {
                    width: 56px;
                    height: 56px;
                    font-size: 24px;
                    margin-right: 16px;
                }

                .stat-value {
                    font-size: 22px;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .financial-report-container {
        padding: 16px;

        .search-card {
            padding: 14px 18px;
            margin-bottom: 16px;
            border-radius: 12px;

            .search-form {
                ::v-deep .el-form-item {
                    margin-right: 12px;
                    margin-bottom: 10px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .el-form-item__content {
                        width: 100%;
                    }

                    .el-form-item__label {
                        padding-bottom: 6px;
                        line-height: 1.4;
                    }
                }
            }
        }

        .stat-cards-section {
            margin-bottom: 24px;

            ::v-deep .el-row {
                margin-left: -12px !important;
                margin-right: -12px !important;

                .el-col {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
                    margin-bottom: 16px;
                }
            }

            .stat-card {
                padding: 16px 20px;

                .stat-icon {
                    width: 56px;
                    height: 56px;
                    font-size: 24px;
                    margin-right: 16px;
                }

                .stat-content {
                    .stat-label {
                        font-size: 13px;
                        margin-bottom: 8px;
                    }

                    .stat-value {
                        font-size: 22px;
                        margin-bottom: 6px;
                    }

                    .stat-meta {
                        font-size: 12px;
                    }
                }
            }
        }

        .charts-section {
            margin-bottom: 24px;

            ::v-deep .el-row {
                margin-left: -12px !important;
                margin-right: -12px !important;

                .el-col {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
                    margin-bottom: 16px;
                }
            }

            .chart-card {
                border-radius: 12px;

                .chart-header {
                    padding: 16px 20px;

                    .chart-title {
                        font-size: 15px;

                        i {
                            font-size: 16px;
                            width: 32px;
                            height: 32px;
                        }
                    }
                }

                .chart-container {
                    height: 300px;
                    min-height: 300px;
                    padding: 0;
                }
            }
        }

        .table-card {
            .table-filters {
                padding: 14px 20px;

                .filter-form {
                    ::v-deep .el-form-item {
                        margin-right: 12px;
                        margin-bottom: 10px;

                        .el-form-item__label {
                            padding-bottom: 6px;
                            line-height: 1.4;
                        }
                    }
                }
            }

            .table-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
                padding: 0;

                .table-title {
                    font-size: 15px;

                    i {
                        font-size: 16px;
                        width: 32px;
                        height: 32px;
                    }
                }

                .table-tabs {
                    width: 100%;
                    margin-left: 0;

                    ::v-deep .el-tabs__item {
                        padding: 0 16px;
                        height: 32px;
                        line-height: 32px;
                        font-size: 14px;
                        margin-right: 4px;
                    }
                }
            }

            .table-wrapper {
                padding: 0;
            }
        }
    }
}

@media (max-width: 480px) {
    .financial-report-container {
        padding: 16px;

        .search-card {
            padding: 16px;
            border-radius: 12px;
        }

        .stat-cards-section {
            .stat-card {
                padding: 18px;
                border-radius: 12px;
                flex-direction: column;
                text-align: center;

                .stat-icon {
                    width: 56px;
                    height: 56px;
                    font-size: 28px;
                    margin-right: 0;
                    margin-bottom: 12px;
                }

                .stat-content {
                    .stat-value {
                        font-size: 20px;
                    }
                }
            }
        }

        .chart-card {
            border-radius: 12px;

            .chart-header {
                padding: 14px 16px;
            }

            .chart-container {
                height: 280px;
                min-height: 280px;
                padding: 14px 16px;
            }
        }

        .table-card {
            border-radius: 12px;

            .table-filters {
                padding: 14px 16px;
            }

            .table-header {
                padding: 14px 16px;
            }

            .table-wrapper {
                padding: 14px 16px;
            }
        }
    }
}
</style>
