<template>
  <div class="data-board-container">
    <!-- 头部导航 -->
    <div class="header">
      <div class="header-left">
        <el-button link class="back-btn" @click="handleBack">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回AI助手</span>
        </el-button>
      </div>
      <div class="header-right">
        <el-button class="export-btn" @click="handleExport">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出文档</span>
        </el-button>
      </div>
    </div>

    <!-- 查询表单区域 -->
    <div class="query-form">
      <div class="form-container">
        <el-form :model="queryForm" label-width="80px" :inline="true">
          <el-form-item label="统计范围">
            <el-tree-select v-model="queryForm.deptId" :data="deptTreeOptions"
              :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择统计范围"
              check-strictly clearable style="width: 300px" @change="handleDeptChange" />
          </el-form-item>
          <el-form-item label="查询时间">
            <div class="form-row">
              <div class="form-content">
                <el-select v-model="queryForm.dateRangeQueryType" placeholder="请选择时间类型"
                  @change="handledateRangeQueryTypeChange" class="select-field">
                  <el-option label="年" value="YEAR" />
                  <el-option label="季度" value="QUARTER" />
                  <el-option label="月" value="MONTH" />
                </el-select>
                <el-select v-model="queryForm.year" placeholder="请选择年份" v-if="queryForm.dateRangeQueryType"
                  class="select-field">
                  <el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
                </el-select>
                <el-select v-model="queryForm.quarter" placeholder="请选择季度"
                  v-if="queryForm.dateRangeQueryType === 'QUARTER'" class="select-field">
                  <el-option label="第一季度" value="1" />
                  <el-option label="第二季度" value="2" />
                  <el-option label="第三季度" value="3" />
                  <el-option label="第四季度" value="4" />
                </el-select>
                <el-select v-model="queryForm.month" placeholder="请选择月份" v-if="queryForm.dateRangeQueryType === 'MONTH'"
                  class="select-field">
                  <el-option v-for="month in monthOptions" :key="month" :label="month + '月'" :value="month" />
                </el-select>
              </div>
              <div class="form-actions">
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="handleReset">重置</el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 勤务组织组件 -->
    <DutyOrganization :query-form="currentQueryParams" :selected-dept-object="selectedDeptObject" />

    <!-- 质控活动组件 -->
    <QualityControl :query-form="currentQueryParams" :selected-dept-object="selectedDeptObject" />

    <!-- 风险隐患组件 -->
    <RiskHazard :query-form="currentQueryParams" :selected-dept-object="selectedDeptObject" />
    <!-- 抽问抽答组件 -->
    <QaAnalysis :query-form="currentQueryParams" :selected-dept-object="selectedDeptObject" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ArrowLeft, Download } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { Document, Packer, Paragraph, ImageRun, HeadingLevel, AlignmentType } from 'docx'
import { saveAs } from 'file-saver'
import { getDeptUserTree } from '@/api/system/user.js'
import DutyOrganization from './dutyOrganization.vue'
import QualityControl from './qualityControl.vue'
import RiskHazard from './riskHazard.vue'
import QaAnalysis from './qaAnalysis.vue'

// 定义emit事件
const emit = defineEmits(['back'])
// 部门树状数据
const deptTreeOptions = ref([])
// 选中的部门对象（单独变量）
const selectedDeptObject = ref(null)
// 临时存储部门选择，点击查询后才赋值
const tempSelectedDeptObject = ref(null)
// 生成年份选项（近10年）
const currentYear = new Date().getFullYear()

// 查询表单数据
const queryForm = ref({
  deptId: 100,
  dateRangeQueryType: 'YEAR',
  year: currentYear,
  quarter: '',
  month: ''
})

// 当前查询参数（只有点击查询按钮时才更新）
const currentQueryParams = ref({
  deptId: null,
  dateRangeQueryType: 'YEAR',
  year: currentYear,
  quarter: '',
  month: ''
})
const yearOptions = computed(() => {
  const years = []
  for (let i = currentYear; i >= currentYear - 9; i--) {
    years.push(i)
  }
  return years
})

// 月份选项
const monthOptions = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])

// 时间类型变化处理
const handledateRangeQueryTypeChange = () => {
  // 根据选择的时间类型清空相关字段
  if (queryForm.value.dateRangeQueryType === 'QUARTER') {
    // 选择季度时清空月份
    queryForm.value.month = ''
  } else if (queryForm.value.dateRangeQueryType === 'MONTH') {
    // 选择月份时清空季度
    queryForm.value.quarter = ''
  } else if (queryForm.value.dateRangeQueryType === 'YEAR') {
    // 选择年时清空季度和月份
    queryForm.value.quarter = ''
    queryForm.value.month = ''
  }
}

// 返回按钮点击事件
const handleBack = () => {
  emit('back')
}

// 查询处理
const handleQuery = () => {
  console.log('查询参数:', queryForm.value)
  // 将查询表单值复制到当前查询参数
  currentQueryParams.value = { ...queryForm.value }
  // 将临时存储的部门选择赋值给 selectedDeptObject
  selectedDeptObject.value = tempSelectedDeptObject.value
  console.log('当前查询参数已更新:', currentQueryParams.value)
  console.log('部门对象已更新:', selectedDeptObject.value)
}
// 处理部门选择变化
const handleDeptChange = (selectedId) => {
  console.log('部门选择变化:', selectedId)

  if (!selectedId) {
    // 清空选择
    tempSelectedDeptObject.value = null
    console.log('已清空部门选择（临时）')
    return
  }

  // 在部门树中查找对应的对象
  const findDeptInTree = (nodes, targetId) => {
    for (const node of nodes) {
      if (node.id === targetId) {
        return node
      }
      if (node.children && node.children.length > 0) {
        const found = findDeptInTree(node.children, targetId)
        if (found) {
          return found
        }
      }
    }
    return null
  }

  const foundDept = findDeptInTree(deptTreeOptions.value, selectedId)
  if (foundDept) {
    let user = !foundDept.deptType ? { deptType: 'USER' } : {};
    tempSelectedDeptObject.value = { ...foundDept, ...user }
    console.log('保存的部门对象（临时）:', foundDept)
  } else {
    tempSelectedDeptObject.value = null
    console.warn('未找到对应的部门对象')
  }
}

// 获取部门树状数据
const fetchDeptTree = async () => {
  try {
    const response = await getDeptUserTree({ deptId: 100 })
    deptTreeOptions.value = response.data || []
    console.log('部门树数据:', deptTreeOptions.value)
    handleDeptChange(100)
    // 部门树加载完成后，初始化默认的部门对象
    handleQuery()

  } catch (error) {
    console.error('获取部门树状数据失败:', error)
    ElMessage.error('获取部门数据失败')
  }
}
// 重置表单
const handleReset = () => {
  queryForm.value = {
    dateRangeQueryType: 'YEAR',
    year: currentYear,
    quarter: '',
    month: ''
  }
  // 重置后自动查询接口
  handleQuery()
}
// 组件挂载时初始化
onMounted(() => {
  fetchDeptTree()
})
const handleExport = async () => {

  const btn = document.querySelector('.export-btn');
  const loading = ElLoading.service({
    lock: true,
    text: '正在生成Word文档...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  btn.disabled = true;
  btn.textContent = '导出中...';

  try {

    // 获取所有组件的大标题和面板项
    const sectionTitles = document.querySelectorAll('.section-title h2');
    const panelItems = document.querySelectorAll('.panel-item');
    const children = [];

    // 生成动态文档标题
    let reportTitle = '质控分析报告';

    if (queryForm.value.year) {
      if (queryForm.value.dateRangeQueryType === 'YEAR') {
        reportTitle = `${queryForm.value.year}年质控分析报告`;
      } else if (queryForm.value.dateRangeQueryType === 'QUARTER' && queryForm.value.quarter) {
        const quarterNames = ['', '第一季度', '第二季度', '第三季度', '第四季度'];
        reportTitle = `${queryForm.value.year}年${quarterNames[parseInt(queryForm.value.quarter)]}质控分析报告`;
      } else if (queryForm.value.dateRangeQueryType === 'MONTH' && queryForm.value.month) {
        reportTitle = `${queryForm.value.year}年${queryForm.value.month}月质控分析报告`;
      }
    }

    // 添加文档标题
    children.push(
      new Paragraph({
        text: reportTitle,
        heading: HeadingLevel.TITLE,
        alignment: AlignmentType.CENTER,
      }),
      new Paragraph({
        text: `导出时间: ${new Date().toLocaleString('zh-CN')}`,
        alignment: AlignmentType.CENTER,
      }),
      new Paragraph({ text: '' }) // 空行
    );

    // 按组件顺序处理：先处理大标题，再处理对应的面板项
    let panelIndex = 0;
    for (let i = 0; i < sectionTitles.length; i++) {
      const sectionTitle = sectionTitles[i];
      const sectionName = sectionTitle.textContent;

      // 检查组件是否显示（通过检查父组件的显示状态）
      const componentContainer = sectionTitle.closest('.duty-organization, .quality-control, .risk-hazard, .qa-analysis');
      const isComponentVisible = componentContainer &&
        window.getComputedStyle(componentContainer).display !== 'none' &&
        componentContainer.offsetHeight > 0 &&
        componentContainer.offsetWidth > 0;

      // 如果组件被隐藏，跳过该组件的导出
      if (!isComponentVisible) {
        // 跳过该组件下的所有面板项
        while (panelIndex < panelItems.length) {
          const panelItem = panelItems[panelIndex];
          const panelSectionTitle = panelItem.closest('.quality-control, .duty-organization, .risk-hazard, .qa-analysis')?.querySelector('.section-title h2');
          if (panelSectionTitle && panelSectionTitle.textContent === sectionName) {
            panelIndex++;
          } else {
            break;
          }
        }
        continue;
      }

      // 添加组件大标题
      children.push(
        new Paragraph({
          text: `${i + 1}. ${sectionName}`,
          heading: HeadingLevel.HEADING_1,
        }),
        new Paragraph({ text: '' }) // 空行
      );

      // 处理该组件下的所有面板项
      const componentPanelItems = [];
      while (panelIndex < panelItems.length) {
        const panelItem = panelItems[panelIndex];

        // 检查这个面板项是否属于当前组件
        const panelSectionTitle = panelItem.closest('.quality-control, .duty-organization, .risk-hazard, .qa-analysis')?.querySelector('.section-title h2');
        if (panelSectionTitle && panelSectionTitle.textContent === sectionName) {
          // 检查面板项是否显示
          const isPanelVisible = window.getComputedStyle(panelItem).display !== 'none' &&
            panelItem.offsetHeight > 0 &&
            panelItem.offsetWidth > 0;

          if (isPanelVisible) {
            componentPanelItems.push(panelItem);
          }
          panelIndex++;
        } else {
          break; // 遇到下一个组件的面板项，停止处理
        }
      }

      // 处理当前组件下的面板项
      for (let j = 0; j < componentPanelItems.length; j++) {
        const panelItem = componentPanelItems[j];

        // 获取面板项标题
        const titleElement = panelItem.querySelector('.panel-header h2, .panel-header h3');
        const title = titleElement?.textContent || `图表${j + 1}`;

        // 添加面板项标题
        children.push(
          new Paragraph({
            text: `${i + 1}.${j + 1} ${title}`,
            heading: HeadingLevel.HEADING_2,
          }),
          new Paragraph({ text: '' }) // 在小标题后添加空行
        );

        // 获取面板项中的所有相关元素，按DOM顺序排列
        const contentElements = panelItem.querySelectorAll('.stat-card, .describe-card, .chart-container');

        // 按DOM顺序处理每个元素
        for (let k = 0; k < contentElements.length; k++) {
          const element = contentElements[k];

          // 检查元素是否实际可见（包括检查父容器）
          const isElementVisible = window.getComputedStyle(element).display !== 'none' &&
            element.offsetHeight > 0 &&
            element.offsetWidth > 0;

          if (!isElementVisible) {
            console.warn('元素被隐藏，跳过:', element.classList);
            continue;
          }

          if (element.classList.contains('stat-card') || element.classList.contains('describe-card')) {
            // 处理描述内容卡片
            const description = element.textContent || '';
            if (description && description.trim() !== '') {
              children.push(
                new Paragraph({
                  text: description,
                  alignment: AlignmentType.LEFT,
                }),
                new Paragraph({ text: '' }) // 空行
              );
            }
          } else if (element.classList.contains('chart-container')) {
            // 处理图表容器
            // 截图
            const canvas = await html2canvas(element, {
              backgroundColor: '#ffffff',
              scale: 2, // 高清截图
              logging: false
            });

            // 转换为 base64
            const imageData = canvas.toDataURL('image/png');
            const base64Data = imageData.replace(/^data:image\/png;base64,/, '');

            // 验证 base64 数据格式
            if (!base64Data || base64Data.trim() === '') {
              console.warn('截图数据为空，跳过该图表');
              continue;
            }

            // 计算保持宽高比的尺寸
            const maxWidth = 500; // Word中最大宽度
            const originalWidth = canvas.width;
            const originalHeight = canvas.height;
            const aspectRatio = originalWidth / originalHeight;

            let finalWidth = maxWidth;
            let finalHeight = maxWidth / aspectRatio;

            // 如果高度超过限制，按高度缩放
            const maxHeight = 400;
            if (finalHeight > maxHeight) {
              finalHeight = maxHeight;
              finalWidth = maxHeight * aspectRatio;
            }

            // 添加图片（保持原始宽高比）
            try {
              const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
              children.push(
                new Paragraph({
                  children: [
                    new ImageRun({
                      data: imageBytes,
                      transformation: {
                        width: Math.round(finalWidth),
                        height: Math.round(finalHeight)
                      }
                    })
                  ],
                  alignment: AlignmentType.CENTER,
                }),
                new Paragraph({ text: '' }) // 图片后空行
              );
            } catch (error) {
              console.error('图片数据处理失败:', error);
              // 跳过该图表，继续处理其他内容
              continue;
            }

            // 小延迟，让UI更新
            await new Promise(resolve => setTimeout(resolve, 100));
          }
        }

        // 获取表格容器
        const tableContainer = panelItem.querySelector('.table-container');
        if (tableContainer) {
          // 临时移除表格容器的高度和宽度限制，让表格显示所有内容
          const originalMaxHeight = tableContainer.style.maxHeight || '';
          const originalOverflowY = tableContainer.style.overflowY || '';
          const originalOverflowX = tableContainer.style.overflowX || '';
          const originalTableContainerWidth = tableContainer.style.width || '';

          tableContainer.style.maxHeight = 'none';
          tableContainer.style.overflowY = 'visible';
          tableContainer.style.overflowX = 'visible';
          tableContainer.style.width = '800px'; // 统一表格容器宽度

          // 临时移除表格的高度和宽度属性，让Element Plus表格显示所有行和列
          const tableElement = tableContainer.querySelector('.el-table');
          let originalTableHeight = '';
          let originalTableWidth = '';
          if (tableElement) {
            originalTableHeight = tableElement.style.height || '';
            originalTableWidth = tableElement.style.width || '';
            tableElement.style.height = 'auto';
            tableElement.style.width = '800px'; // 统一表格宽度

            // 临时移除表格内部滚动容器的限制
            const bodyWrapper = tableElement.querySelector('.el-table__body-wrapper');
            if (bodyWrapper) {
              bodyWrapper.style.overflowX = 'visible';
              bodyWrapper.style.overflowY = 'visible';
            }
          }

          // 等待DOM更新
          await new Promise(resolve => setTimeout(resolve, 200));

          // 截图 - 使用固定宽度确保所有表格宽度一致
          const canvas = await html2canvas(tableContainer, {
            backgroundColor: '#ffffff',
            scale: 1.5, // 适当降低缩放比例以避免图片过大
            logging: false,
            useCORS: true,
            allowTaint: true,
            scrollX: 0, // 确保从最左侧开始截图
            scrollY: 0, // 确保从最顶部开始截图
            width: 800, // 固定宽度，确保所有表格宽度一致
            height: tableContainer.scrollHeight // 使用完整高度
          });

          // 恢复原始样式
          tableContainer.style.maxHeight = originalMaxHeight;
          tableContainer.style.overflowY = originalOverflowY;
          tableContainer.style.overflowX = originalOverflowX;
          tableContainer.style.width = originalTableContainerWidth;

          if (tableElement) {
            tableElement.style.height = originalTableHeight;
            tableElement.style.width = originalTableWidth;

            const bodyWrapper = tableElement.querySelector('.el-table__body-wrapper');
            if (bodyWrapper) {
              bodyWrapper.style.overflowX = '';
              bodyWrapper.style.overflowY = '';
            }
          }

          // 转换为 base64
          const imageData = canvas.toDataURL('image/png');
          const base64Data = imageData.replace(/^data:image\/png;base64,/, '');

          // 验证 base64 数据格式
          if (!base64Data || base64Data.trim() === '') {
            console.warn('表格截图数据为空，跳过该表格');
            continue;
          }

          // 计算保持宽高比的尺寸
          const maxWidth = 500; // Word中最大宽度
          const originalWidth = canvas.width;
          const originalHeight = canvas.height;
          const aspectRatio = originalWidth / originalHeight;

          let finalWidth = maxWidth;
          let finalHeight = maxWidth / aspectRatio;

          // 如果高度超过限制，按高度缩放
          const maxHeight = 400;
          if (finalHeight > maxHeight) {
            finalHeight = maxHeight;
            finalWidth = maxHeight * aspectRatio;
          }

          // 添加表格图片（保持原始宽高比）
          try {
            const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
            children.push(
              new Paragraph({
                children: [
                  new ImageRun({
                    data: imageBytes,
                    transformation: {
                      width: Math.round(finalWidth),
                      height: Math.round(finalHeight)
                    }
                  })
                ],
                alignment: AlignmentType.CENTER,
              }),
              new Paragraph({ text: '' }) // 图片后空行
            );
          } catch (error) {
            console.error('表格图片数据处理失败:', error);
            // 跳过该表格，继续处理其他内容
            continue;
          }

          // 小延迟，让UI更新
          await new Promise(resolve => setTimeout(resolve, 100));
        }
      }
    }

    // 创建文档
    const doc = new Document({
      sections: [{
        properties: {},
        children: children
      }]
    });

    // 生成并下载
    const blob = await Packer.toBlob(doc);
    const fileName = `质控分析报告_${new Date().toISOString().slice(0, 10)}.docx`;
    saveAs(blob, fileName);

    ElMessage.success('Word文档导出成功');

  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败: ' + error.message);
  } finally {
    btn.disabled = false;
    btn.textContent = '导出文档';
    loading.close();
  }
}

// 导出PDF功能
// const handleExport1 = async () => {
//   const loading = ElLoading.service({
//     lock: true,
//     text: '正在生成PDF文档...',
//     background: 'rgba(0, 0, 0, 0.7)'
//   })

//   try {
//     // 等待所有图表完全渲染
//     await new Promise(resolve => setTimeout(resolve, 3000))

//     // 获取查询条件下面的内容（不包括头部导航和查询表单）
//     const contentElement = document.querySelector('.data-board-container')
//     if (!contentElement) {
//       throw new Error('未找到导出内容')
//     }

//     // 创建PDF
//     const pdf = new jsPDF({
//       orientation: 'portrait',
//       unit: 'mm',
//       format: 'a4'
//     })

//     // 设置PDF样式
//     const pageWidth = pdf.internal.pageSize.getWidth()
//     const pageHeight = pdf.internal.pageSize.getHeight()
//     const margin = 15
//     const contentWidth = pageWidth - 2 * margin

//     let currentY = margin

//     // 添加报告标题 - 使用图片方式支持中文
//     const titleElement = document.createElement('div')
//     titleElement.style.position = 'fixed'
//     titleElement.style.left = '-9999px'
//     titleElement.style.top = '0'
//     titleElement.style.fontSize = '18px'
//     titleElement.style.fontWeight = 'bold'
//     titleElement.style.fontFamily = 'sans-serif' // 使用系统默认字体以确保中文支持
//     titleElement.style.color = 'black'
//     titleElement.style.whiteSpace = 'nowrap'
//     titleElement.textContent = '质控分析报告'
//     document.body.appendChild(titleElement)

//     const titleCanvas = await html2canvas(titleElement, {
//       scale: 2,
//       useCORS: true,
//       allowTaint: true,
//       backgroundColor: '#ffffff',
//       logging: false
//     })

//     const titleImgData = titleCanvas.toDataURL('image/png')
//     const titleImgWidth = Math.min(100, contentWidth) // 限制标题宽度
//     const titleImgHeight = (titleCanvas.height * titleImgWidth) / titleCanvas.width

//     pdf.addImage(titleImgData, 'PNG', margin, currentY, titleImgWidth, titleImgHeight)
//     document.body.removeChild(titleElement)

//     currentY += titleImgHeight + 5

//     // 添加生成时间 - 使用图片方式支持中文
//     const timeElement = document.createElement('div')
//     timeElement.style.position = 'fixed'
//     timeElement.style.left = '-9999px'
//     timeElement.style.top = '0'
//     timeElement.style.fontSize = '10px'
//     timeElement.style.fontFamily = 'sans-serif'
//     timeElement.style.color = 'black'
//     timeElement.style.whiteSpace = 'nowrap'
//     timeElement.textContent = `生成时间: ${new Date().toLocaleString()}`
//     document.body.appendChild(timeElement)

//     const timeCanvas = await html2canvas(timeElement, {
//       scale: 2,
//       useCORS: true,
//       allowTaint: true,
//       backgroundColor: '#ffffff',
//       logging: false
//     })

//     const timeImgData = timeCanvas.toDataURL('image/png')
//     const timeImgWidth = Math.min(120, contentWidth) // 限制时间信息宽度
//     const timeImgHeight = (timeCanvas.height * timeImgWidth) / timeCanvas.width

//     pdf.addImage(timeImgData, 'PNG', margin, currentY, timeImgWidth, timeImgHeight)
//     document.body.removeChild(timeElement)

//     currentY += timeImgHeight + 10

//     currentY += 15

//     // 获取查询条件后面的所有内容元素
//     const contentSections = Array.from(contentElement.children).slice(2); // 跳过头部和查询表单

//     // 用于跟踪已处理的元素，避免重复
//     const processedElements = new Set();

//     for (let i = 0; i < contentSections.length; i++) {
//       const section = contentSections[i]

//       // 检查是否需要分页
//       if (currentY > pageHeight - 50) {
//         pdf.addPage()
//         currentY = margin
//       }

//       // 获取该section中的所有元素，按DOM顺序处理
//       const allElements = Array.from(section.querySelectorAll('h2, h3, .stat-card, .describe-card, .echarts-chart, .table-container'));

//       for (let idx = 0; idx < allElements.length; idx++) {
//         const element = allElements[idx];

//         // 使用元素的位置和内容来判断是否已处理
//         const elementKey = `${element.tagName}-${element.className}-${element.getBoundingClientRect().top}-${element.getBoundingClientRect().left}-${element.innerText.substring(0, 20)}`;
//         if (processedElements.has(elementKey)) {
//           continue; // 跳过已处理的元素
//         }

//         // 标记为已处理，防止重复处理
//         processedElements.add(elementKey);

//         // 根据元素类型分别处理
//         if (element.classList.contains('echarts-chart')) {
//           // 处理ECharts图表
//           // 确保图表可见
//           element.style.visibility = 'visible'
//           element.style.opacity = '1'
//           element.style.display = 'block'

//           // 等待图表渲染完成
//           await new Promise(resolve => setTimeout(resolve, 500))

//           try {
//             // 尝试通过ECharts实例获取图表数据
//             let chartData = null

//             // 使用ECharts自带的getDataURL
//             if (window.echarts && window.echarts.getInstanceByDom) {
//               const instance = window.echarts.getInstanceByDom(element)
//               if (instance) {
//                 chartData = instance.getDataURL({
//                   type: 'png',
//                   pixelRatio: 2,
//                   backgroundColor: '#fff'
//                 })

//                 // 强制刷新图表
//                 instance.resize()
//               }
//             }

//             if (chartData) {
//               // 计算合适的图表高度，保持宽高比
//               const img = new Image()
//               img.src = chartData

//               // 由于异步问题，我们使用固定比例
//               const imgHeight = 80 // 固定图表高度

//               // 检查是否需要分页
//               if (currentY + imgHeight > pageHeight - margin) {
//                 pdf.addPage()
//                 currentY = margin
//               }

//               // 添加图表到PDF
//               pdf.addImage(chartData, 'PNG', margin, currentY, contentWidth, imgHeight)
//               currentY += imgHeight + 10
//             } else {
//               // 如果无法获取图表数据，尝试使用html2canvas
//               const canvas = await html2canvas(element, {
//                 scale: 2,
//                 useCORS: true,
//                 allowTaint: true,
//                 backgroundColor: '#ffffff',
//                 logging: false
//               })

//               const chartImgData = canvas.toDataURL('image/png')
//               const imgHeight = 80 // 固定图表高度

//               // 检查是否需要分页
//               if (currentY + imgHeight > pageHeight - margin) {
//                 pdf.addPage()
//                 currentY = margin
//               }

//               // 添加图表到PDF
//               pdf.addImage(chartImgData, 'PNG', margin, currentY, contentWidth, imgHeight)
//               currentY += imgHeight + 10
//             }
//           } catch (error) {
//             console.error(`图表导出失败:`, error)
//             // 添加错误提示
//             pdf.setFontSize(10)
//             pdf.setTextColor(255, 0, 0) // 红色
//             pdf.text(`图表导出失败`, margin, currentY)
//             pdf.setTextColor(0, 0, 0) // 重置为黑色
//             currentY += 10
//           }
//         } else {
//           // 处理文本内容（标题、统计卡片、描述等）- 转换为图片以支持中文
//           const text = element.innerText?.trim()

//           if (text && text.length > 0) {
//             // 创建一个临时元素来确保正确的样式显示
//             const tempElement = document.createElement('div');
//             tempElement.innerHTML = element.innerHTML;
//             tempElement.style.position = 'fixed';
//             tempElement.style.left = '-9999px';
//             tempElement.style.top = '0';
//             tempElement.style.width = '600px'; // 设置一个合适的宽度
//             tempElement.style.padding = '10px';
//             tempElement.style.boxSizing = 'border-box';

//             // 根据原始元素的标签类型应用适当的样式
//             if (element.tagName === 'H2') {
//               tempElement.style.fontSize = '18px';
//               tempElement.style.fontWeight = 'bold';
//               tempElement.style.marginBottom = '10px';
//             } else if (element.tagName === 'H3') {
//               tempElement.style.fontSize = '14px';
//               tempElement.style.fontWeight = 'bold';
//               tempElement.style.marginBottom = '8px';
//             } else {
//               tempElement.style.fontSize = '12px';
//               tempElement.style.lineHeight = '1.5';
//             }

//             document.body.appendChild(tempElement);

//             // 使用html2canvas将文本元素转换为图片，以正确显示中文
//             const canvas = await html2canvas(tempElement, {
//               scale: 2,
//               useCORS: true,
//               allowTaint: true,
//               backgroundColor: '#ffffff',
//               logging: false
//             })

//             const textImgData = canvas.toDataURL('image/png')
//             const imgWidth = contentWidth
//             const imgHeight = (canvas.height * imgWidth) / canvas.width

//             // 检查是否需要分页
//             if (currentY + imgHeight > pageHeight - margin) {
//               pdf.addPage()
//               currentY = margin
//             }

//             // 添加文本图片到PDF
//             pdf.addImage(textImgData, 'PNG', margin, currentY, imgWidth, imgHeight)
//             currentY += imgHeight + 5

//             // 移除临时元素
//             document.body.removeChild(tempElement);
//           }
//         }
//       }

//       // 组件之间添加分隔
//       currentY += 10
//     }

//     // 保存PDF
//     pdf.save('质控分析报告_' + new Date().toISOString().slice(0, 10) + '.pdf')

//     ElMessage.success('PDF导出成功')

//   } catch (error) {
//     console.error('导出失败:', error)
//     ElMessage.error('导出失败: ' + error.message)
//   } finally {
//     loading.close()
//   }
// }
</script>

<style scoped>
.data-board-container {
  /* height: 100vh; */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 16px 16px;
}

.back-btn {
  color: #3D3D3D;
  font-size: 14px;
}

.back-btn:hover {
  color: #3D3D3D;
}

.back-btn .el-icon-back {
  margin-right: 8px;
}

.export-btn {
  background-color: transparent;
}

.export-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.query-form {
  background: white;
  border-radius: 8px;
  padding: 24px 24px 5px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-container {
  width: 100%;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.form-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.select-field {
  min-width: 120px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-board-container {
    padding: 16px;
  }

  .header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-right {
    align-self: flex-end;
  }
}
</style>