<template>
  <div class="report-chart" ref="reportChartRef">
    <el-card>
      <template #header>
        <div class="chart-header">
          <div class="chart-title-section">
            <h3 class="chart-title">{{ title || t('dataReport.defaultChart') }}</h3>
            <p class="chart-subtitle" v-if="subtitle">{{ subtitle }}</p>
          </div>
          <div class="chart-actions mt-20px justify-between flex">
            <!-- 图表类型切换 -->
            <el-radio-group v-model="currentType" size="small" @change="handleTypeChange" class="chart-type-selector">
              <el-radio-button v-for="type in availableTypes" :key="type.value" :label="type.value"
                :disabled="!type.enabled">
                {{ t(`dataReport.${type.labelKey}`) }}
              </el-radio-button>
            </el-radio-group>

            <div class="chart-controls">
              <!-- 时间范围选择 -->
              <el-date-picker v-if="showDatePicker" v-model="dateRange" type="daterange" range-separator="至"
                :start-placeholder="t('dataReport.startDate')" :end-placeholder="t('dataReport.endDate')" size="small"
                @change="handleDateChange" />

              <!-- 刷新按钮 -->
              <el-button size="small" @click="refreshChart" class="sa-button-refresh">
                <el-icon>
                  <Refresh />
                </el-icon>
              </el-button>

              <!-- 全屏按钮 -->
              <el-button size="small" @click="toggleFullscreen">
                <el-icon>
                  <FullScreen />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </template>

      <div class="chart-container" :class="{ 'fullscreen': isFullscreen }" v-loading="loading">
        <!-- 全屏状态下的控制栏 -->
        <div v-if="isFullscreen" class="fullscreen-header">
          <div class="chart-title-section">
            <h3 class="chart-title">{{ title || t('dataReport.defaultChart') }}</h3>
          </div>
          <div class="chart-controls">
            <!-- 图表类型切换 -->
            <el-radio-group v-model="currentType" size="small" @change="handleTypeChange" class="chart-type-selector">
              <el-radio-button v-for="type in availableTypes" :key="type.value" :label="type.value"
                :disabled="!type.enabled">
                {{ t(`dataReport.${type.labelKey}`) }}
              </el-radio-button>
            </el-radio-group>

            <!-- 退出全屏按钮 -->
            <el-button size="small" @click="toggleFullscreen" type="primary">
              <el-icon>
                <FullScreen />
              </el-icon>
              {{ t('dataReport.exitFullscreen') }}
            </el-button>
          </div>
        </div>

        <!-- 图表内容 -->
        <div v-if="!loading && data && data.length > 0" class="chart-content">
          <v-chart ref="chartRef" :option="chartOption" :autoresize="true" :style="chartStyle"
            @click="handleChartClick" />
        </div>

        <!-- 无数据状态 -->
        <div v-else-if="!loading" class="no-data">
          <div class="empty-chart-placeholder" :style="chartStyle">
            <el-empty description="暂无数据">
              <template #image>
                <div class="empty-chart-icon">
                  📊
                </div>
              </template>
              <template #description>
                <span class="empty-description">{{ t('dataReport.chartPlaceholder', {
                  title: title ||
                    t('dataReport.chart')
                }) }}</span>
              </template>
            </el-empty>
          </div>
        </div>
      </div>

      <!-- 图表说明 -->
      <div v-if="description" class="chart-description">
        <el-text type="info" size="small">{{ description }}</el-text>
      </div>

      <!-- 全屏时的提示框容器 -->
      <div v-if="isFullscreen" ref="fullscreenTipsContainerRef" class="fullscreen-tips-container"></div>
    </el-card>

    <!-- 图表提示框组件 - 根据全屏状态动态选择传送位置 -->
    <Teleport :to="teleportTarget">
      <ChartTipsBox :visible="tipsBoxVisible" :data="tipsBoxData" @close="closeTipsBox" />
    </Teleport>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, FullScreen } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'
import ChartTipsBox from './chart-tips-box.vue'

// 全局提示框管理器
class TipsBoxManager {
  constructor() {
    this.currentTipsBox = null
    this.listeners = new Set()
  }

  // 注册提示框
  register(tipsBoxInstance) {
    this.listeners.add(tipsBoxInstance)
  }

  // 注销提示框
  unregister(tipsBoxInstance) {
    this.listeners.delete(tipsBoxInstance)
  }

  // 显示新的提示框，关闭其他的
  showTipsBox(tipsBoxInstance) {
    // 关闭其他所有提示框
    this.listeners.forEach(instance => {
      if (instance !== tipsBoxInstance) {
        instance.close()
      }
    })
    this.currentTipsBox = tipsBoxInstance
  }

  // 关闭当前提示框
  closeCurrent() {
    if (this.currentTipsBox) {
      this.currentTipsBox.close()
      this.currentTipsBox = null
    }
  }
}

// 全局单例
const tipsBoxManager = new TipsBoxManager()

// 使用国际化
const { t } = useI18n();

// Props
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subtitle: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  },
  type: {
    type: String,
    default: 'line',
    validator: (value) => ['line', 'bar', 'pie', 'scatter', 'radar', 'funnel'].includes(value)
  },
  height: {
    type: [String, Number],
    default: 400
  },
  loading: {
    type: Boolean,
    default: false
  },
  showDatePicker: {
    type: Boolean,
    default: true
  },
  colors: {
    type: Array,
    default: () => ['#806af6', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  },
  xAxisKey: {
    type: String,
    default: 'x'
  },
  yAxisKey: {
    type: String,
    default: 'y'
  },
  seriesKey: {
    type: String,
    default: 'series'
  },
  options: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['refresh', 'dateChange', 'chartClick', 'typeChange'])

// 响应式数据
const chartRef = ref()
const reportChartRef = ref() // 添加图表容器的引用
const fullscreenTipsContainerRef = ref() // 全屏提示框容器引用
const currentType = ref(props.type)
const dateRange = ref([])
const isFullscreen = ref(false)

// 图表提示框相关数据
const tipsBoxVisible = ref(false)
const tipsBoxData = ref({
  title: '',
  items: []
})

// 可用的图表类型
const availableTypes = computed(() => [
  { label: '折线图', labelKey: 'lineChart', value: 'line', enabled: true },
  { label: '柱状图', labelKey: 'barChart', value: 'bar', enabled: true },
  { label: '饼图', labelKey: 'pieChart', value: 'pie', enabled: true },
  // { label: '散点图', labelKey: 'scatterChart', value: 'scatter', enabled: true },
  // { label: '雷达图', labelKey: 'radarChart', value: 'radar', enabled: false },
  // { label: '漏斗图', labelKey: 'funnelChart', value: 'funnel', enabled: false }
])

// 计算属性
const chartStyle = computed(() => {
  if (isFullscreen.value) {
    // 全屏时使用视窗高度减去头部高度
    return {
      height: 'calc(100vh - 120px)',
      width: '100%'
    }
  }
  // 正常状态使用props中的高度
  return {
    height: typeof props.height === 'number' ? `${props.height}px` : props.height,
    width: '100%'
  }
})

// 动态Teleport目标
const teleportTarget = computed(() => {
  // 如果当前组件处于全屏状态，将提示框传送到全屏容器
  if (isFullscreen.value && fullscreenTipsContainerRef.value) {
    return fullscreenTipsContainerRef.value
  }
  // 否则传送到body
  return 'body'
})

const chartOption = computed(() => {
  if (!props.data || props.data.length === 0) {
    return {}
  }

  const baseOption = {
    color: props.colors,
    tooltip: {
      show: false // 禁用默认tooltip
    },
    legend: {
      show: false,
      top: 'top',
      textStyle: {
        color: 'var(--sa-subtitle)'
      }
    },
    grid: {
      left: '10%',
      right: '5%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    // 添加全局的鼠标交互配置
    animation: true,
    animationDuration: 300,
    animationEasing: 'cubicOut',
    ...props.options
  }

  switch (currentType.value) {
    case 'line':
      return generateLineChart(baseOption)
    case 'bar':
      return generateBarChart(baseOption)
    case 'pie':
      return generatePieChart(baseOption)
    case 'scatter':
      return generateScatterChart(baseOption)
    case 'radar':
      return generateRadarChart(baseOption)
    case 'funnel':
      return generateFunnelChart(baseOption)
    default:
      return generateLineChart(baseOption)
  }
})

// 图表生成方法
const generateLineChart = (baseOption) => {
  // 获取唯一的X轴数据（日期）
  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()
  const series = extractSeries()

  return {
    ...baseOption,
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)',
        rotate: 45,
        interval: 'auto',
        fontSize: 12,
        margin: 8
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)',
        fontSize: 12,
        margin: 12
      },
      splitLine: {
        lineStyle: {
          color: 'var(--sa-space)',
          type: 'dashed'
        }
      },
      // 优化Y轴刻度间隔
      minInterval: 1
    },
    series: series.map(s => ({
      ...s,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8, // 增大数据点基础大小
      lineStyle: {
        width: 3
      },
      areaStyle: {
        opacity: 0.1
      },
      // 鼠标悬停时的效果
      emphasis: {
        symbolSize: 14, // 悬停时数据点放大
        lineStyle: {
          width: 4 // 悬停时线条也稍微加粗
        }
      }
    }))
  }
}

const generateBarChart = (baseOption) => {
  // 获取唯一的X轴数据（日期）
  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()
  const series = extractSeries()

  return {
    ...baseOption,
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)',
        rotate: 45,
        interval: 'auto',
        fontSize: 12,
        margin: 8
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)',
        fontSize: 12,
        margin: 12
      },
      splitLine: {
        lineStyle: {
          color: 'var(--sa-space)',
          type: 'dashed'
        }
      },
      // 优化Y轴刻度间隔
      minInterval: 1
    },
    series: series.map(s => ({
      ...s,
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        borderRadius: [4, 4, 0, 0]
      },
      // 鼠标悬停时的效果
      emphasis: {
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 6, // 悬停时添加阴影效果
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      }
    }))
  }
}

const generatePieChart = (baseOption) => {
  const pieData = props.data.map(item => ({
    name: item[props.xAxisKey],
    value: item[props.yAxisKey]
  }))

  return {
    ...baseOption,
    // 调整grid以给标签留出更多空间
    grid: {
      left: '15%',
      right: '15%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      backgroundColor: 'rgba(50, 50, 50, 0.9)',
      borderColor: '#333',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      show: false // 隐藏图例
    },
    series: [{
      name: props.title,
      type: 'pie',
      radius: ['25%', '50%'], // 进一步缩小饼图半径，为标签留出更多空间
      center: ['50%', '50%'], // 居中显示
      data: pieData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: true,
        formatter: function (params) {
          // 格式化日期显示，如果日期太长则截断
          let name = params.name;
          if (name.length > 10) {
            // 如果是日期格式，尝试简化显示
            if (name.includes('-')) {
              const parts = name.split('-');
              if (parts.length >= 2) {
                name = parts[1] + '-' + parts[2]; // 显示月-日
              }
            } else if (name.length > 8) {
              name = name.substring(0, 8) + '...'; // 截断长文本
            }
          }
          return name + ': ' + params.percent + '%';
        },
        fontSize: 11,
        color: 'var(--sa-subfont)',
        // 标签位置优化
        position: 'outside',
        distanceToLabelLine: 8,
        // 文字换行
        rich: {
          name: {
            fontSize: 11,
            color: 'var(--sa-subfont)'
          }
        }
      },
      labelLine: {
        show: true,
        length: 20,      // 增加第一段线长度
        length2: 15,     // 增加第二段线长度
        smooth: 0.2,     // 线条平滑度
        lineStyle: {
          color: 'var(--sa-space)',
          width: 1
        }
      },
      // 避免标签重叠
      avoidLabelOverlap: true,
      // 标签布局优化
      labelLayout: {
        hideOverlap: true,
        moveOverlap: 'shiftY' // 当标签重叠时，垂直移动标签
      },
      // 确保标签在容器内
      silent: false
    }]
  }
}

const generateScatterChart = (baseOption) => {
  const scatterData = props.data.map(item => [
    item[props.xAxisKey],
    item[props.yAxisKey]
  ])

  return {
    ...baseOption,
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)'
      },
      splitLine: {
        lineStyle: {
          color: 'var(--sa-space)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'var(--sa-space)'
        }
      },
      axisLabel: {
        color: 'var(--sa-subfont)'
      },
      splitLine: {
        lineStyle: {
          color: 'var(--sa-space)',
          type: 'dashed'
        }
      }
    },
    series: [{
      name: props.title,
      type: 'scatter',
      data: scatterData,
      symbolSize: 8,
      itemStyle: {
        opacity: 0.8
      }
    }]
  }
}

const generateRadarChart = (baseOption) => {
  // 雷达图实现
  return baseOption
}

const generateFunnelChart = (baseOption) => {
  // 漏斗图实现
  return baseOption
}

// 提取系列数据
const extractSeries = () => {
  if (!props.data || props.data.length === 0) return []

  // 获取唯一的X轴数据（日期）
  const xData = [...new Set(props.data.map(item => item[props.xAxisKey]))].sort()

  // 如果数据中有series字段，按series分组
  if (props.data[0][props.seriesKey]) {
    const seriesMap = new Map()

    // 初始化所有系列
    props.data.forEach(item => {
      const seriesName = item[props.seriesKey]
      if (!seriesMap.has(seriesName)) {
        seriesMap.set(seriesName, new Map())
      }
      // 按X轴值存储Y轴值
      seriesMap.get(seriesName).set(item[props.xAxisKey], item[props.yAxisKey])
    })

    // 根据X轴顺序构建数据
    return Array.from(seriesMap.entries()).map(([name, dataMap]) => ({
      name,
      data: xData.map(xValue => dataMap.get(xValue) || 0)
    }))
  } else {
    // 单系列数据
    const dataMap = new Map()
    props.data.forEach(item => {
      dataMap.set(item[props.xAxisKey], item[props.yAxisKey])
    })

    return [{
      name: props.title,
      data: xData.map(xValue => dataMap.get(xValue) || 0)
    }]
  }
}

// 事件处理
const handleTypeChange = (type) => {
  currentType.value = type
  emit('typeChange', type)
}

const handleDateChange = (dates) => {
  emit('dateChange', dates)
}

const refreshChart = () => {
  emit('refresh')
  ElMessage.success('刷新成功')
}

const handleChartClick = (params) => {
  // 处理图表点击事件 - 显示提示框
  console.log('图表点击事件:', params)

  // 先关闭其他图表的提示框
  tipsBoxManager.closeCurrent()

  // 构建提示框数据
  const clickData = params.data || params
  const chartData = props.data || []
  const chartType = currentType.value
  const chartTitle = props.title || '图表'

  // 根据图表类型和点击数据构建提示框内容
  let title = ''
  let items = []

  if (chartType === 'pie') {
    // 饼图：显示点击的扇形数据
    title = `${chartTitle}: ${clickData.name || ''}`
    items = [{
      name: clickData.name || '数据项',
      value: clickData.value || 0,
      percent: clickData.percent ? `${clickData.percent}%` : '0%',
      color: params.color || props.colors[0]
    }]
  } else {
    // 折线图/柱状图：显示该时间点的所有系列数据
    const xValue = clickData.name || params.name || ''
    title = `${chartTitle}: ${xValue}`

    // 获取该时间点的所有系列数据
    const seriesData = chartData.filter(item => item[props.xAxisKey] === xValue)
    const totalValue = seriesData.reduce((sum, item) => sum + (item[props.yAxisKey] || 0), 0)

    items = seriesData.map((item, index) => ({
      name: item[props.seriesKey] || '系列',
      value: item[props.yAxisKey] || 0,
      percent: totalValue > 0 ? `${((item[props.yAxisKey] || 0) / totalValue * 100).toFixed(2)}%` : '0%',
      color: props.colors[index % props.colors.length]
    }))
  }

  tipsBoxData.value = { title, items }
  tipsBoxVisible.value = true

  // 注册当前提示框到管理器
  const currentTipsBoxInstance = {
    close: () => {
      tipsBoxVisible.value = false
    }
  }
  tipsBoxManager.showTipsBox(currentTipsBoxInstance)

  // 同时发送原有的点击事件，保持向后兼容
  emit('chartClick', {
    ...params,
    chartData: props.data,
    chartType: currentType.value,
    chartTitle: props.title
  })
}

// 关闭提示框
const closeTipsBox = () => {
  tipsBoxVisible.value = false
}

const toggleFullscreen = async () => {
  try {
    if (!isFullscreen.value) {
      // 进入全屏 - 使用当前组件的引用
      const element = reportChartRef.value
      if (!element) {
        console.warn('图表容器引用不存在')
        return
      }

      if (element.requestFullscreen) {
        await element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        await element.webkitRequestFullscreen()
      } else if (element.mozRequestFullScreen) {
        await element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        await element.msRequestFullscreen()
      }
      isFullscreen.value = true
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        await document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        await document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        await document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        await document.msExitFullscreen()
      }
      isFullscreen.value = false
    }

    // 延迟调整图表大小，确保DOM更新完成
    nextTick(() => {
      setTimeout(() => {
        if (chartRef.value) {
          chartRef.value.resize()
        }
      }, 200) // 增加延迟时间，确保全屏动画完成
    })
  } catch (error) {
    console.warn('全屏操作失败:', error)
    ElMessage.warning('您的浏览器不支持全屏功能')
  }
}

// 监听数据变化
watch(() => props.data, () => {
  nextTick(() => {
    if (chartRef.value) {
      chartRef.value.resize()
    }
  })
}, { deep: true })

// 监听类型变化
watch(() => props.type, (newType) => {
  currentType.value = newType
})

// 监听全屏状态变化
watch(isFullscreen, () => {
  nextTick(() => {
    setTimeout(() => {
      if (chartRef.value) {
        chartRef.value.resize()
      }

      // 如果提示框正在显示，需要重新定位
      if (tipsBoxVisible.value) {
        // 强制重新渲染提示框以适应新的容器
        tipsBoxVisible.value = false
        nextTick(() => {
          tipsBoxVisible.value = true
        })
      }
    }, 300) // 等待全屏动画完成
  })
})

// 窗口大小变化处理
const handleResize = () => {
  if (chartRef.value) {
    chartRef.value.resize()
  }
}

// 全屏状态变化监听
const handleFullscreenChange = () => {
  const currentFullscreenElement =
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement

  // 检查当前全屏的元素是否是这个组件
  const isThisComponentFullscreen = currentFullscreenElement === reportChartRef.value

  if (!currentFullscreenElement && isFullscreen.value) {
    // 用户按ESC退出全屏，且之前是这个组件全屏，更新状态
    isFullscreen.value = false
    setTimeout(() => {
      if (chartRef.value) {
        chartRef.value.resize()
      }
    }, 100)
  } else if (isThisComponentFullscreen && !isFullscreen.value) {
    // 这个组件进入全屏，但状态还没更新
    isFullscreen.value = true
  } else if (!isThisComponentFullscreen && isFullscreen.value) {
    // 其他元素全屏了，但这个组件状态还是全屏，需要重置
    isFullscreen.value = false
  }
}

// 生命周期
onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  // 移除全屏状态监听
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
  document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
  document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
})

// 暴露方法
defineExpose({
  resize: () => {
    if (chartRef.value) {
      chartRef.value.resize()
    }
  },
  getChart: () => chartRef.value?.getChart(),
  downloadImage: (name = 'chart') => {
    const chart = chartRef.value?.getChart()
    if (chart) {
      const url = chart.getDataURL({
        type: 'png',
        backgroundColor: '#fff'
      })
      const link = document.createElement('a')
      link.download = `${name}.png`
      link.href = url
      link.click()
      ElMessage.success('下载成功')
    }
  }
})
</script>

<style scoped>
/* 全屏样式需要使用 :global 确保在全屏时能正确应用 */
@import '../styles/report-common.scss';

.chart-container {

  /* 添加鼠标交互样式 */
  .echarts {
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      transform: scale(1.002);
      /* 轻微放大效果 */
    }
  }

}
</style>

<style>
/* 全屏样式 - 全局样式，确保在全屏时正确应用 */
.chart-container.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: white !important;
  display: flex !important;
  flex-direction: column !important;
}

.chart-container.fullscreen .fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  background: white;
  z-index: 10000;
}

.chart-container.fullscreen .fullscreen-header .chart-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.chart-container.fullscreen .fullscreen-header .chart-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-container.fullscreen .chart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-container.fullscreen .chart-content .echarts {
  flex: 1;
  height: auto !important;
  min-height: calc(100vh - 120px);
}

.chart-container.fullscreen .no-data {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-container.fullscreen .no-data .empty-chart-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  min-height: calc(100vh - 120px);
}

/* 全屏时的提示框容器 */
.fullscreen-tips-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

/* 确保提示框在全屏容器中正确显示 */
.fullscreen-tips-container .chart-tips-box {
  pointer-events: auto;
  z-index: 10001;
}
</style>