<template>
    <div class="home-statistics">
        <!-- 设备选择器 -->
        <Card class="home-card" style="margin-bottom: 16px;">
            <p slot="title">设备选择</p>
            <Select
                v-model="selectedDeviceSn"
                @on-change="handleDeviceChange"
                placeholder="请选择设备"
                style="width: 300px;"
            >
                <Option
                    v-for="device in deviceList"
                    :value="device.deviceSn"
                    :key="device.deviceSn || device.deviceName"
                >
                    {{ device.deviceName || device.deviceSn }}
                </Option>
            </Select>
        </Card>

        <!-- 账户信息卡片 -->
        <Card v-if="accountInfo && (accountInfo.id || accountInfo.sn_code)" style="margin-bottom: 16px;" class="account-info-card">
            <div slot="title" style="display: flex; align-items: center; justify-content: space-between;">
                <span>账户信息</span>
                <Button type="primary" size="small" @click="viewAccountDetail">查看详情</Button>
            </div>
            <Row :gutter="16" style="margin-bottom: 16px;">
                <Col span="6">
                    <div class="account-info-item">
                        <div class="info-label">账户名</div>
                        <div class="info-value">{{ accountInfo.name || '-' }}</div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="account-info-item">
                        <div class="info-label">平台</div>
                        <div class="info-value">
                            <Tag :color="getPlatformColor(accountInfo.platform_type)">
                                {{ getPlatformText(accountInfo.platform_type) }}
                            </Tag>
                        </div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="account-info-item">
                        <div class="info-label">登录名</div>
                        <div class="info-value">{{ accountInfo.login_name || '-' }}</div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="account-info-item">
                        <div class="info-label">设备SN码</div>
                        <div class="info-value">{{ accountInfo.sn_code || '-' }}</div>
                    </div>
                </Col>
            </Row>
            <Divider style="margin: 12px 0;"></Divider>
            <Row :gutter="16">
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">是否启用</div>
                        <i-switch 
                            v-model="accountInfo.is_enabled" 
                            :true-value="1" 
                            :false-value="0"
                            @on-change="handleSwitchChange('is_enabled', $event)"
                            :loading="switchLoading.is_enabled"
                        ></i-switch>
                    </div>
                </Col>
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">是否在线</div>
                        <i-switch 
                            v-model="accountInfo.is_online" 
                            :true-value="true" 
                            :false-value="false"
                            @on-change="handleSwitchChange('is_online', $event)"
                            :loading="switchLoading.is_online"
                            :disabled="true"
                        ></i-switch>
                    </div>
                </Col>
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">是否登录</div>
                        <i-switch 
                            v-model="accountInfo.is_logged_in" 
                            :true-value="true" 
                            :false-value="false"
                            @on-change="handleSwitchChange('is_logged_in', $event)"
                            :loading="switchLoading.is_logged_in"
                            :disabled="true"
                        ></i-switch>
                    </div>
                </Col>
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">自动投递</div>
                        <i-switch 
                            v-model="accountInfo.auto_deliver" 
                            :true-value="1" 
                            :false-value="0"
                            @on-change="handleSwitchChange('auto_deliver', $event)"
                            :loading="switchLoading.auto_deliver"
                        ></i-switch>
                    </div>
                </Col>
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">自动沟通</div>
                        <i-switch 
                            v-model="accountInfo.auto_chat" 
                            :true-value="1" 
                            :false-value="0"
                            @on-change="handleSwitchChange('auto_chat', $event)"
                            :loading="switchLoading.auto_chat"
                        ></i-switch>
                    </div>
                </Col>
                <Col span="4">
                    <div class="account-switch-item">
                        <div class="switch-label">自动活跃</div>
                        <i-switch 
                            v-model="accountInfo.auto_active" 
                            :true-value="1" 
                            :false-value="0"
                            @on-change="handleSwitchChange('auto_active', $event)"
                            :loading="switchLoading.auto_active"
                        ></i-switch>
                    </div>
                </Col>
            </Row>
        </Card>

        <!-- 统计卡片 -->
        <Row :gutter="16" style="margin-bottom: 16px;">
            <Col span="6">
                <Card class="home-card">
                    <div class="statistic-item">
                        <div class="statistic-title">今日投递</div>
                        <div class="statistic-value">{{ todayStats.applyCount }}</div>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <Card class="home-card">
                    <div class="statistic-item">
                        <div class="statistic-title">今日找工作</div>
                        <div class="statistic-value">{{ todayStats.jobSearchCount }}</div>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <Card class="home-card">
                    <div class="statistic-item">
                        <div class="statistic-title">今日沟通</div>
                        <div class="statistic-value">{{ todayStats.chatCount }}</div>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <Card class="home-card">
                    <div class="statistic-item">
                        <div class="statistic-title">执行中任务</div>
                        <div class="statistic-value">{{ todayStats.runningTaskCount }}</div>
                    </div>
                </Card>
            </Col>
        </Row>

        <!-- 当前执行任务的命令区块（指令列表） -->
        <Card class="home-card" style="margin-bottom: 16px;">
            <p slot="title">当前执行中的任务</p>
            <Table 
                v-if="runningTasks.length > 0" 
                :columns="taskColumns" 
                :data="commandTableData" 
                :loading="taskLoading"
            ></Table>
            <div v-else-if="!taskLoading" style="text-align: center; padding: 40px; color: #999;">
                <Icon type="ios-list-outline" size="48" />
                <p style="margin-top: 16px; font-size: 14px;">暂无执行中的任务</p>
            </div>
            <div v-else style="text-align: center; padding: 40px;">
                <Spin size="large"></Spin>
                <p style="margin-top: 16px; color: #999;">加载中...</p>
            </div>
        </Card>

        <!-- 趋势图表（7天趋势） -->
        <Card class="home-card">
            <p slot="title">近7天统计趋势</p>
            <div ref="chartContainer" style="height: 400px;"></div>
        </Card>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import DeviceStatusServer from '../../api/device/device_status_server.js'
import StatisticsServer from '../../api/statistics/statistics_server.js'
import PlaAccountServer from '../../api/profile/pla_account_server.js'

export default {
    name: 'HomePage',

    data() {
        return {
            selectedDeviceSn: '',
            deviceList: [],
            todayStats: {
                applyCount: 0,
                jobSearchCount: 0,
                chatCount: 0,
                runningTaskCount: 0
            },
            chartData: {
                dates: [],
                applyData: [],
                jobSearchData: [],
                chatData: []
            },
            runningTasks: [],
            commandTableData: [], // 指令表格数据
            taskLoading: false,
            chartInstance: null, // ECharts实例
            taskColumns: [],
            refreshTimer: null,
            accountInfo: {}, // 账户信息
            switchLoading: {
                is_enabled: false,
                is_online: false,
                is_logged_in: false,
                auto_deliver: false,
                auto_chat: false,
                auto_active: false
            }
        }
    },

    computed: {
        // 从 store 获取选中的设备
        storeDeviceSn() {
            return this.$store.getters['device/selectedDeviceSn']
        }
    },

    watch: {
        storeDeviceSn: {
            immediate: true,
            handler(val) {
                if (val && val !== this.selectedDeviceSn) {
                    this.selectedDeviceSn = val
                    this.loadData()
                }
            }
        }
    },

    mounted() {
        this.loadDeviceList()
        // 每30秒刷新一次数据
        this.refreshTimer = setInterval(() => {
            this.loadData()
        }, 30000)
    },

    beforeDestroy() {
        // 清理定时器
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer)
            this.refreshTimer = null
        }
        // 移除窗口大小调整监听
        if (this._chartResizeHandler) {
            window.removeEventListener('resize', this._chartResizeHandler)
            this._chartResizeHandler = null
        }
        // 销毁图表实例
        if (this.chartInstance) {
            this.chartInstance.dispose()
            this.chartInstance = null
        }
    },

    methods: {
        // 加载设备列表
        async loadDeviceList() {
            try {
                const res = await DeviceStatusServer.page({
                    seachOption: {},
                    pageOption: { page: 1, pageSize: 100 }
                })

                console.log('设备列表接口返回:', res)
                console.log('res.data:', res.data)
                console.log('res.data.list:', res.data?.list)
                console.log('res.data.rows:', res.data?.rows)

                // 支持多种数据格式
                const deviceList = res.data?.list || res.data?.rows || res.data?.data || []
                
                console.log('解析后的设备列表:', deviceList)
                console.log('设备数量:', deviceList.length)
                
                if (deviceList.length > 0) {
                    // 统一设备字段名，去重处理
                    const deviceMap = new Map()
                    
                    deviceList.forEach(device => {
                        const sn = device.deviceSn || device.sn_code || device.snCode || device.id
                        if (sn && !deviceMap.has(sn)) {
                            deviceMap.set(sn, {
                                deviceSn: sn,
                                deviceName: device.deviceName || device.device_name || device.name || sn
                            })
                        }
                    })
                    
                    this.deviceList = Array.from(deviceMap.values())
                    
                    console.log('处理后的设备列表:', this.deviceList)
                    console.log('处理后设备数量:', this.deviceList.length)
                    
                    this.$store.dispatch('device/setDeviceList', this.deviceList)

                    // 如果没有选中设备且有设备列表，选中第一个
                    if (!this.selectedDeviceSn && this.deviceList.length > 0) {
                        this.selectedDeviceSn = this.deviceList[0].deviceSn
                        this.$store.dispatch('device/setSelectedDevice', this.selectedDeviceSn)
                        // 立即加载数据
                        this.loadData()
                    } else if (this.selectedDeviceSn) {
                        // 如果已有选中设备，直接加载数据
                        this.loadData()
                    }
                } else {
                    console.warn('设备列表为空，原始数据:', res)
                }
            } catch (error) {
                console.error('加载设备列表失败:', error)
                this.$Message.error('加载设备列表失败: ' + (error.message || '未知错误'))
            }
        },

        // 设备切换
        handleDeviceChange(deviceSn) {
            this.$store.dispatch('device/setSelectedDevice', deviceSn)
            this.loadData()
        },

        // 加载所有数据
        async loadData() {
            if (!this.selectedDeviceSn) return

            await Promise.all([
                this.loadTodayStats(),
                this.loadChartData(),
                this.loadRunningTasks(),
                this.loadAccountInfo()
            ])
        },

        // 加载今日统计
        async loadTodayStats() {
            try {
                console.log('加载今日统计，设备SN:', this.selectedDeviceSn)
                const res = await StatisticsServer.getOverview(this.selectedDeviceSn)
                console.log('今日统计接口返回:', res)
                
                if (res.code === 0) {
                    this.todayStats = {
                        applyCount: res.data?.applyCount || res.data?.todayApplyCount || 0,
                        jobSearchCount: res.data?.jobSearchCount || res.data?.todayJobSearchCount || 0,
                        chatCount: res.data?.chatCount || res.data?.todayChatCount || 0,
                        runningTaskCount: res.data?.runningTaskCount || res.data?.runningTasks || 0
                    }
                }
            } catch (error) {
                console.error('加载今日统计失败:', error)
                // 不显示错误，避免干扰用户
            }
        },

        // 加载图表数据
        async loadChartData() {
            try {
                console.log('加载图表数据，设备SN:', this.selectedDeviceSn)
                const res = await StatisticsServer.getDailyStatistics({
                    deviceSn: this.selectedDeviceSn,
                    days: 7
                })
                console.log('图表数据接口返回:', res)

                if (res.code === 0) {
                    this.chartData = {
                        dates: res.data?.dates || [],
                        applyData: res.data?.applyData || [],
                        jobSearchData: res.data?.jobSearchData || [],
                        chatData: res.data?.chatData || []
                    }
                    this.$nextTick(() => {
                        this.renderChart()
                    })
                } else {
                    console.warn('加载图表数据失败:', res.msg || res.message)
                }
            } catch (error) {
                console.error('加载图表数据失败:', error)
            }
        },

        // 加载正在执行的任务
        async loadRunningTasks() {
            this.taskLoading = true
            try {
                console.log('加载执行中任务，设备SN:', this.selectedDeviceSn)
                const res = await StatisticsServer.getRunningTasks(this.selectedDeviceSn)
                console.log('执行中任务接口返回:', res)
                
                if (res.code === 0) {
                    // 处理数据并计算进度
                    this.runningTasks = (res.data || []).map(task => {
                        return {
                            ...task,
                            progress: this.calculateProgress(task.commands || [])
                        }
                    })
                    // 构建表格数据：任务作为表头，指令作为数据行
                    this.buildCommandTableData()
                } else {
                    console.warn('加载执行中任务失败:', res.msg || res.message)
                    this.runningTasks = []
                    this.commandTableData = []
                }
            } catch (error) {
                console.error('加载执行中任务失败:', error)
                this.runningTasks = []
                this.commandTableData = []
            } finally {
                this.taskLoading = false
            }
        },

        // 构建指令表格数据：任务作为表头，指令作为数据行
        buildCommandTableData() {
            if (!this.runningTasks || this.runningTasks.length === 0) {
                this.taskColumns = []
                this.commandTableData = []
                return
            }

            // 构建表头：第一列是指令序号，后续列是每个任务
            this.taskColumns = [
                {
                    title: '指令序号',
                    key: 'sequence',
                    width: 100,
                    align: 'center',
                    fixed: 'left'
                }
            ]

            // 为每个任务添加一列，使用 render 函数渲染指令
            const self = this
            this.runningTasks.forEach(task => {
                this.taskColumns.push({
                    title: task.taskName || task.taskType || '未知任务',
                    minWidth: 200,
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row
                        const taskId = task.taskId
                        if (row.commands && row.commands[taskId]) {
                            const cmd = row.commands[taskId]
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    flexWrap: 'wrap',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Tag', {
                                    props: {
                                        color: self.getCommandColor(cmd.status)
                                    },
                                    style: {
                                        margin: '2px'
                                    }
                                }, cmd.commandName)
                            ])
                        } else {
                            return h('span', {
                                style: {
                                    color: '#999'
                                }
                            }, '-')
                        }
                    }
                })
            })

            // 找出所有任务中指令数量的最大值
            const maxCommandCount = Math.max(
                ...this.runningTasks.map(task => (task.commands || []).length),
                0
            )

            // 构建数据行：每一行代表一个指令序号
            this.commandTableData = []
            for (let i = 0; i < maxCommandCount; i++) {
                const row = {
                    sequence: i + 1,
                    commands: {}
                }
                
                // 为每个任务填充对应序号的指令
                this.runningTasks.forEach(task => {
                    if (task.commands && task.commands[i]) {
                        row.commands[task.taskId] = task.commands[i]
                    }
                })
                
                this.commandTableData.push(row)
            }
        },

        // 渲染图表
        renderChart() {
            if (!this.$refs.chartContainer) return

            // 如果没有数据，显示提示
            if (!this.chartData.dates || this.chartData.dates.length === 0) {
                if (this.chartInstance) {
                    this.chartInstance.dispose()
                    this.chartInstance = null
                }
                this.$refs.chartContainer.innerHTML = `
                    <div style="text-align: center; padding: 100px 0; color: #999;">
                        <p>暂无统计数据</p>
                    </div>
                `
                return
            }

            // 初始化或获取图表实例
            if (!this.chartInstance) {
                this.chartInstance = echarts.init(this.$refs.chartContainer)
            }

            // 格式化日期显示（只显示月-日）
            const formattedDates = this.chartData.dates.map(date => {
                const d = new Date(date)
                return `${d.getMonth() + 1}-${d.getDate()}`
            })

            // 配置图表选项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data: ['投递', '找工作', '沟通'],
                    top: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: formattedDates,
                    axisLabel: {
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量'
                },
                series: [
                    {
                        name: '投递',
                        type: 'line',
                        smooth: true,
                        data: this.chartData.applyData,
                        itemStyle: {
                            color: '#2d8cf0'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(45, 140, 240, 0.3)' },
                                    { offset: 1, color: 'rgba(45, 140, 240, 0.1)' }
                                ]
                            }
                        }
                    },
                    {
                        name: '找工作',
                        type: 'line',
                        smooth: true,
                        data: this.chartData.jobSearchData,
                        itemStyle: {
                            color: '#19be6b'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(25, 190, 107, 0.3)' },
                                    { offset: 1, color: 'rgba(25, 190, 107, 0.1)' }
                                ]
                            }
                        }
                    },
                    {
                        name: '沟通',
                        type: 'line',
                        smooth: true,
                        data: this.chartData.chatData,
                        itemStyle: {
                            color: '#ff9900'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: 'rgba(255, 153, 0, 0.3)' },
                                    { offset: 1, color: 'rgba(255, 153, 0, 0.1)' }
                                ]
                            }
                        }
                    }
                ]
            }

            // 设置图表选项
            this.chartInstance.setOption(option, true)

            // 响应式调整 - 使用箭头函数确保this指向正确
            if (!this._chartResizeHandler) {
                this._chartResizeHandler = () => {
                    if (this.chartInstance) {
                        this.chartInstance.resize()
                    }
                }
                window.addEventListener('resize', this._chartResizeHandler)
            }
        },

        // 获取命令状态颜色
        getCommandColor(status) {
            const colorMap = {
                'pending': 'default',
                'running': 'blue',
                'success': 'green',
                'failed': 'red',
                'skipped': 'warning'
            }
            return colorMap[status] || 'default'
        },

        // 获取要显示的命令列表（最多显示3个）
        getDisplayCommands(commands) {
            if (!commands || !Array.isArray(commands)) {
                return []
            }
            return commands.slice(0, 3)
        },

        // 根据命令状态计算进度
        calculateProgress(commands) {
            if (!commands || !Array.isArray(commands) || commands.length === 0) {
                return 0
            }
            
            // 统计已完成和已失败的命令数（这些状态表示命令已执行完成）
            const completedCount = commands.filter(cmd => {
                const status = cmd.status || ''
                return status === 'completed' || status === 'failed' || status === 'skipped'
            }).length
            
            // 计算进度百分比
            const progress = Math.round((completedCount / commands.length) * 100)
            return progress
        },

        // 加载账户信息
        async loadAccountInfo() {
            if (!this.selectedDeviceSn) {
                this.accountInfo = {}
                return
            }
            
            try {
                console.log('加载账户信息，设备SN:', this.selectedDeviceSn)
                
                // 通过 sn_code 直接获取账户信息
                const res = await PlaAccountServer.getBySnCode(this.selectedDeviceSn)
                
                console.log('账户信息接口返回:', res)
                
                if (res.code === 0 && res.data) {
                    const accountData = res.data
                    console.log('找到账户信息原始数据:', accountData)
                    
                    // 确保 id 字段存在，支持多种字段名
                    if (!accountData.id) {
                        accountData.id = accountData.account_id || accountData.accountId || accountData.ID || null
                    }
                    
                    console.log('账户ID:', accountData.id)
                    
                    // 如果接口没有返回设备状态，则单独查询
                    if (accountData.is_online === undefined || accountData.is_logged_in === undefined) {
                        try {
                            const deviceRes = await DeviceStatusServer.getById(this.selectedDeviceSn)
                            console.log('设备状态接口返回:', deviceRes)
                            if (deviceRes.code === 0 && deviceRes.data) {
                                accountData.is_online = deviceRes.data.isOnline || false
                                accountData.is_logged_in = deviceRes.data.isLoggedIn || false
                            } else {
                                accountData.is_online = false
                                accountData.is_logged_in = false
                            }
                        } catch (deviceError) {
                            console.error('获取设备状态失败:', deviceError)
                            accountData.is_online = false
                            accountData.is_logged_in = false
                        }
                    }
                    
                    // 确保布尔值字段正确初始化，转换为数字类型（0 或 1）
                    accountData.is_enabled = accountData.is_enabled !== undefined ? Number(accountData.is_enabled) : 1
                    accountData.auto_deliver = accountData.auto_deliver !== undefined ? Number(accountData.auto_deliver) : 0
                    accountData.auto_chat = accountData.auto_chat !== undefined ? Number(accountData.auto_chat) : 0
                    accountData.auto_active = accountData.auto_active !== undefined ? Number(accountData.auto_active) : 0
                    
                    this.accountInfo = accountData
                    console.log('设置账户信息:', this.accountInfo)
                    console.log('accountInfo.id 值:', this.accountInfo.id)
                    console.log('v-if 判断结果:', !!this.accountInfo.id)
                } else {
                    console.warn('未找到账户信息，设备SN:', this.selectedDeviceSn, '响应:', res)
                    this.accountInfo = {}
                }
            } catch (error) {
                console.error('加载账户信息失败:', error)
                this.accountInfo = {}
            }
        },

        // 处理开关变化
        async handleSwitchChange(field, value) {
            if (!this.accountInfo || !this.accountInfo.id) {
                this.$Message.warning('账户信息不存在')
                return
            }

            // is_online 和 is_logged_in 是只读的，不应该被修改
            if (field === 'is_online' || field === 'is_logged_in') {
                this.$Message.warning('该状态由设备状态决定，无法手动修改')
                // 恢复原值
                this.$nextTick(() => {
                    if (field === 'is_online') {
                        this.accountInfo.is_online = !value
                    } else {
                        this.accountInfo.is_logged_in = !value
                    }
                })
                return
            }

            // 设置加载状态
            this.switchLoading[field] = true

            try {
                // i-switch 的 on-change 事件已经返回了正确的值（1 或 0），直接使用
                const numericValue = Number(value)
                
                // 构建更新数据，确保是纯对象，只包含基本类型
                const updateData = {
                    id: Number(this.accountInfo.id),
                    [field]: numericValue
                }

                // 调用更新接口
                await PlaAccountServer.update(updateData)

                // 更新本地数据
                this.accountInfo[field] = numericValue

                this.$Message.success('更新成功')
            } catch (error) {
                console.error(`更新${field}失败:`, error)
                const errorMsg = error.response?.data?.message || error.message || '请稍后重试'
                this.$Message.error('更新失败：' + errorMsg)
                
                // 恢复原值（从数据库重新加载）
                await this.loadAccountInfo()
            } finally {
                this.switchLoading[field] = false
            }
        },

        // 查看账户详情
        viewAccountDetail() {
            if (this.accountInfo.id) {
                this.$router.push({
                    path: '/pla_account/pla_account_detail',
                    query: { id: this.accountInfo.id }
                })
            }
        },

        // 获取平台颜色
        getPlatformColor(platformType) {
            const colorMap = {
                'boss': 'blue',
                'liepin': 'green'
            }
            return colorMap[platformType] || 'default'
        },

        // 获取平台文本
        getPlatformText(platformType) {
            const textMap = {
                'boss': 'Boss直聘',
                'liepin': '猎聘'
            }
            return textMap[platformType] || platformType || '-'
        }
    }
}
</script>

<style scoped>
.home-statistics {
    padding: 16px;
    background: #f7f8fa;
    min-height: 100%;
}

.statistic-item {
    text-align: center;
}

.statistic-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}

.statistic-value {
    font-size: 32px;
    font-weight: bold;
    color: #2d8cf0;
}

.account-info-card {
    cursor: pointer;
    background: #fff !important;
}

.account-info-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 所有卡片背景色 */
.home-card {
    background: #fff !important;
}

.home-card >>> .ivu-card,
.home-card /deep/ .ivu-card,
.home-card ::v-deep .ivu-card {
    background: #fff !important;
}

.account-info-item {
    padding: 8px 0;
}

.info-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.account-switch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.switch-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    text-align: center;
}

/* 确保卡片样式正常 */
.home-statistics >>> .ivu-card,
.home-statistics /deep/ .ivu-card,
.home-statistics ::v-deep .ivu-card {
    background: #fff !important;
    border-radius: 4px;
}

.home-statistics >>> .ivu-card-head,
.home-statistics /deep/ .ivu-card-head,
.home-statistics ::v-deep .ivu-card-head {
    border-bottom: 1px solid #e8eaec;
    background: #fff;
}

.home-statistics >>> .ivu-card-body,
.home-statistics /deep/ .ivu-card-body,
.home-statistics ::v-deep .ivu-card-body {
    padding: 16px;
    background: #fff;
}

/* 确保表格样式正常 */
.home-statistics >>> .ivu-table {
    font-size: 13px;
}

.home-statistics >>> .ivu-table th {
    background: #f8f8f9;
    font-weight: 600;
}

.home-statistics >>> .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td {
    background-color: #fafafa;
}

.home-statistics >>> .ivu-table td {
    padding: 12px 8px;
}

/* 确保图表容器样式正常 */
.home-statistics >>> .ivu-card-body {
    position: relative;
}
</style>
