<template>
  <!-- 这是一个功能性组件，不需要渲染任何可见元素 -->
  <div style="display: none;"></div>
</template>

<script>
import getLodop from './LodopFuncs' // 确保路径正确指向你的 LodopFuncs.js

export default {
  title: '元素打印',
  props: {
    id: { type: String, required: true }, // 打印区域的 ID
    styleid: { type: String },           // 样式标签的 ID
    top: { type: [String, Number], default: 0 },
    left: { type: [String, Number], default: 0 },
    width: { type: [String, Number], default: '100%' },
    height: { type: [String, Number], default: '100%' },
    attach: { type: String, default: 'name' },
    type: { type: String, default: 'PREVIEW' }
  },
  methods: {
    PrintTable () {
      // 1. 获取 Lodop 对象
      let LODOP = getLodop()
      if (!LODOP) {
        alert("Lodop控件未安装或加载失败！请检查 LodopFuncs.js 配置。");
        return;
      }

      // 2. 获取打印内容元素
      let contentEl = document.getElementById(this.id)
      if (!contentEl) {
        console.error('未找到打印区域 ID:', this.id)
        alert('打印错误：未找到打印内容区域')
        return
      }

      // 3. 获取样式内容
      let styleContent = ''
      if (this.styleid) {
        let styleEl = document.getElementById(this.styleid)
        if (styleEl) {
          // 确保样式被 <style> 标签包裹
          styleContent = `<style>${styleEl.innerHTML}</style>`
        }
      }

      // 4. 核心修复：构造完整的 HTML 结构
      // 原代码只取了 innerHTML (表格)，但 CSS 是针对 #id 的。
      // 这里我们构造一个新的包裹 div，赋予它相同的 ID，这样 CSS 就能匹配了。
      let printHtml = `
        ${styleContent}
        <div id="${this.id}">
            ${contentEl.innerHTML}
        </div>
      `

      // 5. 执行 Lodop 打印指令
      LODOP.PRINT_INIT('')
      // 将构造好的 HTML 字符串添加到打印任务中
      LODOP.ADD_PRINT_HTM(this.top, this.left, this.width, this.height, printHtml)
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width')

      // 6. 根据 type 属性执行操作
      if (this.type === 'PRINT') {
        LODOP.PRINT()
      } else if (this.type === 'PREVIEW') {
        LODOP.PREVIEW()
      } else if (this.type === 'PRINT_SETUP') {
        LODOP.PRINT_SETUP()
      } else if (this.type === 'PRINT_DESIGN') {
        LODOP.PRINT_DESIGN()
      }
    }
  }
}
</script>
