<template>
  <div class="native-designer-page">
    <div class="designer-toolbar">
      <div class="toolbar-left">
        <span class="title">原生打印模板设计器</span>
        <span v-if="templateId" class="tip">ID: {{ templateId }}</span>
      </div>
      <a-space>
        <a-button @click="backToList">返回列表</a-button>
        <a-button @click="handleDelete">删除选中</a-button>
        <a-button @click="duplicateElement">复制元素</a-button>
        <a-button @click="bringForward">上移图层</a-button>
        <a-button @click="sendBackward">下移图层</a-button>
        <a-button @click="previewTemplate">即时预览</a-button>
        <a-button @click="printTemplate">打印</a-button>
        <a-button type="primary" :loading="saving" @click="saveTemplate">保存模板</a-button>
      </a-space>
    </div>

    <div class="designer-meta">
      <div class="designer-meta__grid">
        <a-input v-model:value="meta.templateCode" placeholder="模板编码" allow-clear />
        <a-input v-model:value="meta.templateName" placeholder="模板名称" allow-clear />
        <a-input v-model:value="meta.category" placeholder="分类（默认form）" allow-clear />
        <a-input v-model:value="meta.remark" placeholder="备注" allow-clear />
      </div>
      <div class="designer-meta__actions">
        <a-input-number
          :value="state.scale"
          :min="0.2"
          :max="2"
          :step="0.1"
          addon-before="按比例缩放"
          class="meta-scale-input"
          @change="setScale(Number($event || 1))"
        />
        <a-button class="meta-scale-btn" @click="pageConfigModalOpen = true">页面配置</a-button>
        <a-button class="meta-scale-btn" @click="openImageAnalyzeModal">上传图片分析模板</a-button>
      </div>
    </div>

    <div class="designer-main">
      <div
        class="left-panel-wrap"
        :class="{ 'is-collapsed': leftPanelWidth <= 0 }"
        :style="leftPanelWrapStyle"
      >
        <div class="left-panel">
        <ToolbarPalette
          v-model:insert-region="insertRegion"
          :data-binding="state.schema.dataBinding"
          @add="handleAddElement"
          @update-data-binding="handleUpdateDataBinding"
        />
        <a-divider />
        <a-space direction="vertical" style="width: 100%">
          <a-tabs v-model:activeKey="jsonTabKey" size="small" class="json-tabs">
            <a-tab-pane key="template" tab="模板JSON">
              <div class="json-template-pane">
                <div class="json-box-title">画布实际 JSON（模板样式）</div>
                <a-space class="json-action-row json-action-row--capsule" size="small" :wrap="true">
                  <a-button size="small" class="json-capsule-btn" @click="generateCanvasJson">从画布生成</a-button>
                  <a-button size="small" type="primary" ghost class="json-capsule-btn" @click="applyCanvasJsonToCanvas">应用到画布</a-button>
                </a-space>
                <a-textarea
                  v-model:value="canvasJsonText"
                  :rows="18"
                  class="json-textarea"
                  placeholder="记录画布实际JSON，可反向应用到画布并还原模板样式"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="params" tab="参数JSON">
              <a-tabs v-model:activeKey="dataSourceType" size="small" class="json-sub-tabs json-sub-tabs--segmented">
                <a-tab-pane key="manual" tab="手动JSON">
                  <a-textarea
                    v-model:value="previewDataText"
                    :rows="16"
                    class="json-textarea"
                    placeholder="手动输入预览/打印数据 JSON"
                  />
                </a-tab-pane>
                <a-tab-pane key="mock" tab="模拟JSON">
                  <div class="json-mock-toolbar">
                    <a-button size="small" type="primary" ghost class="json-capsule-btn" @click="generateMockData">根据画布生成</a-button>
                  </div>
                  <a-textarea
                    v-model:value="mockDataText"
                    :rows="14"
                    class="json-textarea"
                    placeholder="点击「根据画布生成」自动填充模拟数据"
                  />
                </a-tab-pane>
              </a-tabs>
            </a-tab-pane>
          </a-tabs>
        </a-space>
        </div>
      </div>
      <div
        class="left-panel-resizer"
        role="separator"
        aria-orientation="vertical"
        :title="leftResizerTitle"
        @mousedown="startLeftPanelResize"
        @dblclick.prevent="onLeftResizerDblClick"
      />
      <div class="center-panel">
        <DesignerCanvas
          :schema="state.schema"
          :selected-id="state.selectedId"
          :scale="state.scale"
          :preview-data="previewData"
          :selected-table-column="selectedTableColumn"
          :selected-free-table-cell="selectedFreeTableCell"
          :selected-free-table-merge-corner="selectedFreeTableRangeCorner"
          @select="handleSelectElement"
          @update="handleElementUpdate"
          @select-table-column="handleSelectTableColumn"
          @select-free-table-cell="handleSelectFreeTableCell"
          @edit-free-table-cell="handleEditFreeTableCell"
        />
      </div>
      <div class="right-panel">
        <PropertiesPanel
          :schema="state.schema"
          :selected-element="selectedElement"
          :selected-table-column-key="resolveSelectedTableColumnKey()"
          :selected-free-table-cell="resolveSelectedFreeTableCell()"
          :selected-free-table-merge-rect="resolveSelectedFreeTableMergeRect()"
          @update-element="handleElementUpdate"
        />
      </div>
    </div>

    <PageConfigModal v-model:open="pageConfigModalOpen" :schema="state.schema" @update-page="updatePage" />

    <a-drawer v-model:open="previewVisible" title="即时预览" width="70%" placement="right">
      <iframe class="preview-frame" :srcdoc="previewHtml"></iframe>
    </a-drawer>

    <FreeTableCellEditModal
      v-model:open="freeTableCellModalOpen"
      :element-id="freeTableCellModalTarget?.elementId || ''"
      :row="freeTableCellModalTarget?.row ?? 0"
      :col="freeTableCellModalTarget?.col ?? 0"
      :schema="state.schema"
      @save="handleFreeTableCellModalSave"
    />

    <a-modal
      v-model:open="imageAnalyzeVisible"
      title="上传图片分析模板"
      width="920px"
      destroy-on-close
      :closable="!imageAnalyzeLoading"
      :mask-closable="!imageAnalyzeLoading"
      @cancel="resetImageAnalyzeModal"
    >
      <div class="image-analyze-body">
        <a-alert type="info" show-icon style="margin-bottom: 12px">
          <template #message>
            <span>选择或拖拽图片到下方区域，系统将生成画布 JSON 与模拟数据；先预览渲染效果，确认后再应用到画布。</span>
          </template>
        </a-alert>
        <div
          class="image-analyze-drop"
          :class="{ 'is-dragover': imageAnalyzeDragover, 'is-busy': imageAnalyzeLoading }"
          @dragenter.prevent="onImageAnalyzeDragEnter"
          @dragover.prevent="onImageAnalyzeDragOver"
          @dragleave.prevent="onImageAnalyzeDragLeave"
          @drop.prevent="onImageAnalyzeDrop"
        >
          <input
            ref="imageAnalyzeFileInputRef"
            type="file"
            accept="image/*"
            class="image-analyze-file-input"
            :disabled="imageAnalyzeLoading"
            @change="onImageAnalyzeFileInputChange"
          />
          <p class="image-analyze-drop-title">拖拽图片到此处，或</p>
          <a-button type="link" :disabled="imageAnalyzeLoading" @click="triggerImageAnalyzeFilePick">点击选择文件</a-button>
        </div>
        <div v-if="imageAnalyzeLoading" class="image-analyze-progress">
          <a-progress
            :percent="Math.min(100, Math.round(imageAnalyzeProgress))"
            :status="imageAnalyzeProgress >= 100 ? 'success' : 'active'"
            :stroke-width="10"
          />
          <p class="image-analyze-progress-tip">{{ imageAnalyzeProgressTip }}</p>
          <p class="image-analyze-progress-sub">大模型分析可能需要数十秒至两分钟，请耐心等待，勿关闭窗口。</p>
        </div>
        <div v-if="imageAnalyzeHint" class="image-analyze-hint">{{ imageAnalyzeHint }}</div>
        <a-divider v-if="imageAnalyzePreviewHtml" plain orientation="left">效果预览（应用前）</a-divider>
        <div v-if="imageAnalyzePreviewHtml" class="image-analyze-preview-wrap">
          <div v-if="imageAnalyzeThumbUrl" class="image-analyze-thumb">
            <div class="thumb-label">原图</div>
            <img :src="imageAnalyzeThumbUrl" alt="上传原图" />
          </div>
          <div class="image-analyze-preview-frame-wrap">
            <div class="thumb-label">按生成模板渲染</div>
            <iframe class="image-analyze-preview-frame" :srcdoc="imageAnalyzePreviewHtml"></iframe>
          </div>
        </div>
      </div>
      <template #footer>
        <a-button @click="resetImageAnalyzeModal">取消</a-button>
        <a-button type="primary" :disabled="!imageAnalyzePendingSchema || imageAnalyzeLoading" @click="confirmApplyImageAnalyze">
          应用到画布
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { add, analyzeImageForNativeFile, edit, queryByCode, queryById } from '../printTemplate.api';
  import DesignerCanvas from './components/DesignerCanvas.vue';
  import FreeTableCellEditModal from './components/FreeTableCellEditModal.vue';
  import PageConfigModal from './components/PageConfigModal.vue';
  import PropertiesPanel from './components/PropertiesPanel.vue';
  import ToolbarPalette from './components/ToolbarPalette.vue';
  import { printHtml } from './core/printService';
  import { renderNativePrintHtml } from './core/printRenderer';
  import { generateNativeMockDataObject } from './core/nativeMockData';
  import { buildNativeTemplateStylePayload } from './core/nativeTemplateStyleSerialize';
  import { normalizeImportedNativeSchema } from './core/nativeSchemaNormalize';
  import { normalizeFreeTableAnchors } from './core/freeTableGrid';
  import { scaleFreeTableTracks } from './core/freeTableTracks';
  import { useDesignerStore } from './core/useDesignerStore';
  import type { NativeElement, NativeElementType, NativeTemplateSchema } from './core/types';

  defineOptions({ name: 'NativePrintDesigner' });

  const router = useRouter();
  const route = useRoute();
  const { createMessage } = useMessage();
  const {
    state,
    selectedElement,
    setSchema,
    patchDataBinding,
    addElement,
    updateElement,
    setSelected,
    removeSelected,
    duplicateSelected,
    bringForward,
    sendBackward,
    setScale,
    serialize,
  } = useDesignerStore();
  const templateId = ref('');
  const saving = ref(false);
  const previewVisible = ref(false);
  const previewHtml = ref('');
  const selectedTableColumn = ref<{ elementId: string; columnKey: string } | null>(null);
  const selectedFreeTableCell = ref<{ elementId: string; row: number; col: number } | null>(null);
  /** Shift 点选第二角，与 selectedFreeTableCell 组成合并矩形 */
  const selectedFreeTableRangeCorner = ref<{ elementId: string; row: number; col: number } | null>(null);
  /** 自由表格单元格双击编辑弹窗 */
  const freeTableCellModalOpen = ref(false);
  const freeTableCellModalTarget = ref<{ elementId: string; row: number; col: number } | null>(null);
  /** 页面尺寸、边距、网格（从第二行工具区打开） */
  const pageConfigModalOpen = ref(false);

  /** 上传图片分析模板 */
  const imageAnalyzeVisible = ref(false);
  const imageAnalyzeLoading = ref(false);
  /** 分析过程假进度（0–100），接口无真实进度，仅用于缓解长时间无反馈 */
  const imageAnalyzeProgress = ref(0);
  const imageAnalyzeProgressTip = ref('正在准备上传…');
  let imageAnalyzeProgressTimer: ReturnType<typeof setInterval> | null = null;
  /** 关闭弹窗或发起新任务时递增，用于丢弃在途请求结果 */
  let imageAnalyzeSeq = 0;

  const imageAnalyzeHint = ref('');
  const imageAnalyzePreviewHtml = ref('');
  const imageAnalyzeThumbUrl = ref('');
  const imageAnalyzePendingSchema = ref<NativeTemplateSchema | null>(null);
  const imageAnalyzeMockJson = ref('');
  const imageAnalyzeDragover = ref(false);
  const imageAnalyzeFileInputRef = ref<HTMLInputElement | null>(null);

  /** 左侧工具栏宽度（px），0 表示隐藏 */
  const LS_LEFT_PANEL_KEY = 'qhmes-native-print-left-panel-w';
  const LEFT_PANEL_MIN = 260;
  const LEFT_PANEL_MAX = 640;
  const LEFT_PANEL_DEFAULT = 360;
  /** 松手时宽度小于此值则收拢为隐藏 */
  const LEFT_PANEL_COLLAPSE_SNAP = 96;

  const leftPanelWidth = ref(LEFT_PANEL_DEFAULT);
  const lastLeftPanelWidth = ref(LEFT_PANEL_DEFAULT);
  let leftResizeActive = false;
  let leftResizeStartX = 0;
  let leftResizeStartW = 0;

  const leftPanelWrapStyle = computed(() => ({
    width: leftPanelWidth.value <= 0 ? '0px' : `${leftPanelWidth.value}px`,
  }));

  const leftResizerTitle = '拖动调整左侧工具栏宽度；拖至极窄可隐藏。双击收起或恢复。';

  function startLeftPanelResize(e: MouseEvent) {
    if (e.button !== 0) return;
    e.preventDefault();
    leftResizeActive = true;
    leftResizeStartX = e.clientX;
    leftResizeStartW = leftPanelWidth.value;
    window.addEventListener('mousemove', onLeftPanelResizeMove);
    window.addEventListener('mouseup', stopLeftPanelResize);
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
  }

  function onLeftPanelResizeMove(e: MouseEvent) {
    if (!leftResizeActive) return;
    const delta = e.clientX - leftResizeStartX;
    let next = leftResizeStartW + delta;
    next = Math.max(0, Math.min(LEFT_PANEL_MAX, next));
    leftPanelWidth.value = next;
  }

  function stopLeftPanelResize() {
    if (!leftResizeActive) return;
    leftResizeActive = false;
    window.removeEventListener('mousemove', onLeftPanelResizeMove);
    window.removeEventListener('mouseup', stopLeftPanelResize);
    document.body.style.cursor = '';
    document.body.style.userSelect = '';

    let w = leftPanelWidth.value;
    if (w > 0 && w < LEFT_PANEL_COLLAPSE_SNAP) {
      w = 0;
    } else if (w >= LEFT_PANEL_COLLAPSE_SNAP && w < LEFT_PANEL_MIN) {
      w = LEFT_PANEL_MIN;
    }
    if (w > 0) {
      lastLeftPanelWidth.value = w;
    }
    leftPanelWidth.value = w;
    try {
      localStorage.setItem(LS_LEFT_PANEL_KEY, String(w));
    } catch (_e) {
      /* 忽略存储异常 */
    }
  }

  function onLeftResizerDblClick() {
    if (leftPanelWidth.value <= 0) {
      const restore = Math.min(
        LEFT_PANEL_MAX,
        Math.max(LEFT_PANEL_MIN, lastLeftPanelWidth.value || LEFT_PANEL_DEFAULT),
      );
      leftPanelWidth.value = restore;
    } else {
      lastLeftPanelWidth.value = Math.max(leftPanelWidth.value, LEFT_PANEL_MIN);
      leftPanelWidth.value = 0;
    }
    try {
      localStorage.setItem(LS_LEFT_PANEL_KEY, String(leftPanelWidth.value));
    } catch (_e) {
      /* 忽略 */
    }
  }

  watch(freeTableCellModalOpen, (v) => {
    if (!v) {
      freeTableCellModalTarget.value = null;
    }
  });
  const insertRegion = ref<'header' | 'body'>('body');
  const jsonTabKey = ref<'template' | 'params'>('template');
  const dataSourceType = ref<'manual' | 'mock'>('manual');
  const previewDataText = ref('{}');
  const mockDataText = ref('{}');
  const canvasJsonText = ref('{}');
  const meta = reactive({
    templateCode: `NATIVE_${Date.now()}`,
    templateName: '原生打印模板',
    category: 'form',
    remark: '原生设计器模板',
  });

  const activeDataText = computed(() => (dataSourceType.value === 'mock' ? mockDataText.value : previewDataText.value));

  const previewData = computed(() => {
    try {
      return JSON.parse(activeDataText.value || '{}');
    } catch (_error) {
      return {};
    }
  });

  function generateMockData(options: { syncManual?: boolean; showMessage?: boolean } = {}) {
    const { syncManual = false, showMessage = true } = options;
    const mock = generateNativeMockDataObject(state.schema.elements, canvasJsonText.value);
    const nextText = JSON.stringify(mock, null, 2);
    mockDataText.value = nextText;
    if (syncManual || !String(previewDataText.value || '').trim() || previewDataText.value === '{}') {
      previewDataText.value = nextText;
    }
    if (showMessage) {
      createMessage.success('已根据画布组件生成模拟数据 JSON');
    }
  }

  function mapTemplateStyleToElement(item: any): NativeElement {
    const type = String(item?.component || 'text') as NativeElementType;
    const rect = item?.rect || {};
    const base: any = {
      id: String(item?.id || `${type}_${Math.random().toString(36).slice(2, 8)}`),
      type,
      bindField: String(item?.bindField || ''),
      region: item?.region || '',
      bandId: String(item?.bandId || ''),
      x: Number(rect?.x || 0),
      y: Number(rect?.y || 0),
      w: Number(rect?.w || 40),
      h: Number(rect?.h || 12),
      zIndex: Number(rect?.zIndex || 1),
      style: item?.style || {},
    };
    const payload = item?.payload || {};
    if (type === 'image') {
      base.src = payload.src || '';
      base.fit = payload.fit || 'contain';
      return base as NativeElement;
    }
    if (type === 'table' || type === 'detailTable') {
      base.source = payload.source || (type === 'detailTable' ? 'detailList' : 'mainTable');
      base.mergeColumnKeys = Array.isArray(payload?.mergeColumnKeys) ? payload.mergeColumnKeys.map((item: any) => String(item || '')) : [];
      base.strictGrouping = payload?.strictGrouping !== false;
      base.enableMultiHeader = payload.enableMultiHeader === true;
      base.tableHeightMode = payload.tableHeightMode || 'autoPage';
      base.fixedRows = Number(payload.fixedRows || 5);
      base.showHeader = payload.showHeader !== false;
      base.rowHeight = Number(payload.rowHeight || 8);
      base.headerHeight = Number(payload.headerHeight || 10);
      base.headerFontSize = Number(payload.headerFontSize || 12);
      base.bodyFontSize = Number(payload.bodyFontSize || 12);
      base.headerBgColor = payload.headerBgColor || '#f5f5f5';
      base.headerTextColor = payload.headerTextColor || '#111111';
      base.footerLabelColumnKey = payload.footerLabelColumnKey || '';
      base.footerLabelText = payload.footerLabelText || '合计';
      base.footerLabelCenter = payload.footerLabelCenter !== false;
      base.footerShowTotal = payload.footerShowTotal !== false;
      base.footerTotalMode = payload.footerTotalMode === 'page' ? 'page' : 'overall';
      base.headerConfig =
        payload?.headerConfig && Array.isArray(payload.headerConfig?.cells)
          ? {
              rowCount: Math.max(1, Number(payload.headerConfig.rowCount || 1)),
              colCount: Math.max(1, Number(payload.headerConfig.colCount || 1)),
              cells: payload.headerConfig.cells.map((cell: any, idx: number) => ({
                id: String(cell?.id || `h_${idx}`),
                row: Math.max(0, Number(cell?.row || 0)),
                col: Math.max(0, Number(cell?.col || 0)),
                rowspan: Math.max(1, Number(cell?.rowspan || 1)),
                colspan: Math.max(1, Number(cell?.colspan || 1)),
                title: String(cell?.title || ''),
                align: String(cell?.align || 'center'),
              })),
            }
          : undefined;
      base.columns = Array.isArray(payload.columns)
        ? payload.columns.map((col: any, index: number) => ({
            key: col?.key || `col_${index + 1}`,
            title: col?.title || `列${index + 1}`,
            field: col?.field || `field${index + 1}`,
            bindField: col?.bindField || col?.field || `field${index + 1}`,
            width: Number(col?.width || 30),
            align: col?.align || 'left',
            contentType: col?.contentType || 'text',
            fontFamily: col?.fontFamily || '',
            fontSize: Number(col?.fontSize || 12),
            useCustomFontSize: !!col?.useCustomFontSize,
            fontColor: col?.fontColor || '#111111',
            autoFitFont: !!col?.autoFitFont,
            autoWrap: col?.autoWrap !== false,
            fillCell: col?.fillCell !== false,
            contentScale: Number(col?.contentScale || 100),
            imageFit: col?.imageFit || 'contain',
            qrLevel: col?.qrLevel || 'M',
            qrRenderType: col?.qrRenderType || 'image/png',
            barcodeFormat: col?.barcodeFormat || 'CODE128',
            decimalPlaces: Number(col?.decimalPlaces ?? 2),
            roundHalfUp: col?.roundHalfUp !== false,
            amountType: col?.amountType || 'CNY',
            enableFooterTotal: !!col?.enableFooterTotal,
            mergeByValue: !!col?.mergeByValue,
          }))
        : [];
      if (!base.mergeColumnKeys?.length) {
        base.mergeColumnKeys = (base.columns || []).filter((col: any) => col?.mergeByValue).map((col: any) => String(col?.key || ''));
      }
      return base as NativeElement;
    }
    if (type === 'freeTable') {
      const rowCount = Math.max(1, Number(payload?.rowCount || 3));
      const colCount = Math.max(1, Number(payload?.colCount || 3));
      base.rowCount = rowCount;
      base.colCount = colCount;
      base.borderColor = String(payload?.borderColor || '#d9d9d9');
      base.borderWidth = Math.max(1, Number(payload?.borderWidth || 1));
      base.outerBorderLineStyle = payload?.outerBorderLineStyle || 'solid';
      base.innerBorderHorizontalLineStyle = payload?.innerBorderHorizontalLineStyle || 'solid';
      base.innerBorderVerticalLineStyle = payload?.innerBorderVerticalLineStyle || 'solid';
      if (Array.isArray(payload?.colWidths)) {
        base.colWidths = payload.colWidths.map((n: any) => Number(n));
      }
      if (Array.isArray(payload?.rowHeights)) {
        base.rowHeights = payload.rowHeights.map((n: any) => Number(n));
      }
      if (payload?.outerBorder && typeof payload.outerBorder === 'object') {
        base.outerBorder = { ...payload.outerBorder };
      }
      if (payload?.innerBorder && typeof payload.innerBorder === 'object') {
        base.innerBorder = { ...payload.innerBorder };
      }
      base.cells = Array.isArray(payload?.cells)
        ? payload.cells
            .map((cell: any) => ({
              row: Math.max(0, Number(cell?.row || 0)),
              col: Math.max(0, Number(cell?.col || 0)),
              rowspan: Math.max(1, Number(cell?.rowspan || 1)),
              colspan: Math.max(1, Number(cell?.colspan || 1)),
              text: String(cell?.text || ''),
              bindField: String(cell?.bindField || ''),
              contentType: cell?.contentType || 'text',
              fillCell: cell?.fillCell,
              contentScale: cell?.contentScale != null ? Number(cell.contentScale) : undefined,
              imageFit: cell?.imageFit,
              qrLevel: cell?.qrLevel,
              qrRenderType: cell?.qrRenderType,
              barcodeFormat: cell?.barcodeFormat,
              decimalPlaces: cell?.decimalPlaces != null ? Number(cell.decimalPlaces) : undefined,
              roundHalfUp: cell?.roundHalfUp,
              amountType: cell?.amountType,
              autoWrap: cell?.autoWrap,
              autoFitFont: cell?.autoFitFont,
              align: String(cell?.align || 'left'),
              verticalAlign: String(cell?.verticalAlign || 'middle'),
              fontSize: Math.max(8, Number(cell?.fontSize || 12)),
              color: String(cell?.color || '#111111'),
              backgroundColor: String(cell?.backgroundColor || '#ffffff'),
              hideBorderTop: cell?.hideBorderTop === true,
              hideBorderRight: cell?.hideBorderRight === true,
              hideBorderBottom: cell?.hideBorderBottom === true,
              hideBorderLeft: cell?.hideBorderLeft === true,
            }))
            .filter(
              (cell: any) =>
                cell.row < rowCount &&
                cell.col < colCount &&
                cell.row + cell.rowspan <= rowCount &&
                cell.col + cell.colspan <= colCount,
            )
        : [];
      return base as NativeElement;
    }
    if (type === 'qrcode' || type === 'barcode') {
      base.value = payload.value || '';
      return base as NativeElement;
    }
    if (type === 'reportHeader' || type === 'reportFooter') {
      base.region = item?.region || (type === 'reportHeader' ? 'header' : 'footer');
      base.text = payload.text || '';
      base.bookmarkText = payload.bookmarkText || '';
      base.keepTogether = payload.keepTogether !== false;
      base.centerWithDetail = payload.centerWithDetail !== false;
      base.refreshPage = payload.refreshPage || 'none';
      base.visible = payload.visible !== false;
      base.stretch = payload.stretch === true;
      base.shrink = payload.shrink === true;
      base.printRepeated = payload.printRepeated === true;
      base.printAtPageBottom = payload.printAtPageBottom === true;
      base.removeBlankWhenNoData = payload.removeBlankWhenNoData === true;
      return base as NativeElement;
    }
    base.text = payload.text || '';
    if (payload.format) {
      base.format = payload.format;
    }
    return base as NativeElement;
  }

  function defaultDataBinding() {
    return {
      fieldMap: {} as Record<string, string>,
      tableSources: ['mainTable', 'detailList'],
      params: [] as any[],
      detailTables: [] as any[],
    };
  }

  function generateCanvasJson() {
    const payload = buildNativeTemplateStylePayload(state.schema);
    canvasJsonText.value = JSON.stringify(payload, null, 2);
  }

  function handleUpdateDataBinding(value: Partial<NonNullable<NativeTemplateSchema['dataBinding']>>) {
    patchDataBinding(value);
    generateCanvasJson();
  }

  function applyCanvasJsonToCanvas() {
    try {
      const parsed = JSON.parse(canvasJsonText.value || '{}');
      if (!Array.isArray(parsed?.elements) || !parsed?.page) {
        createMessage.warning('实际 JSON 格式无效，缺少 page 或 elements');
        return;
      }
      const dbIn = parsed.dataBinding || {};
      const curDb = state.schema.dataBinding || defaultDataBinding();
      const schema: NativeTemplateSchema = {
        engine: 'native',
        version: '1.0.0',
        page: {
          width: Number(parsed.page?.width || 210),
          height: Number(parsed.page?.height || 297),
          unit: 'mm',
          margin: Array.isArray(parsed.page?.margin) ? parsed.page.margin : [10, 10, 10, 10],
          gridSize: Number(parsed.page?.gridSize || 2),
        },
        elements: parsed.elements.map((item: any) => mapTemplateStyleToElement(item)),
        dataBinding: {
          fieldMap: { ...(curDb.fieldMap || {}), ...(dbIn.fieldMap || {}) },
          tableSources: Array.isArray(dbIn.tableSources) && dbIn.tableSources.length
            ? [...dbIn.tableSources]
            : curDb.tableSources || ['mainTable', 'detailList'],
          params: Array.isArray(dbIn.params) ? [...dbIn.params] : curDb.params || [],
          detailTables: Array.isArray(dbIn.detailTables)
            ? dbIn.detailTables.map((t: any) => ({
                tableKey: String(t.tableKey || ''),
                label: t.label ? String(t.label) : undefined,
                fields: Array.isArray(t.fields)
                  ? t.fields.map((f: any) => ({
                      key: String(f.key || ''),
                      label: f.label ? String(f.label) : undefined,
                    }))
                  : [],
              }))
            : curDb.detailTables || [],
        },
      };
      setSchema(schema);
      generateCanvasJson();
      createMessage.success('已按实际 JSON 还原画布模板样式');
    } catch (error: any) {
      createMessage.error(`应用失败：${error?.message || 'JSON格式错误'}`);
    }
  }

  async function loadTemplate() {
    const id = String(route.query.id || '');
    if (!id) {
      return;
    }
    const record = await queryById(id);
    templateId.value = String(record.id || id);
    meta.templateCode = String(record.templateCode || meta.templateCode);
    meta.templateName = String(record.templateName || meta.templateName);
    meta.category = String(record.category || 'form');
    meta.remark = String(record.remark || '');
    if (record.templateJson) {
      const parsed = JSON.parse(record.templateJson);
      if (parsed?.engine === 'native') {
        // 列表「纸张(mm)」来自实体字段；若仅在编辑弹窗改过纸张，JSON 内 page 可能未同步，以实体为准
        const pw = Number(record.paperWidthMm);
        const ph = Number(record.paperHeightMm);
        if (pw > 0 && ph > 0) {
          if (!parsed.page || typeof parsed.page !== 'object') {
            parsed.page = { unit: 'mm', margin: [10, 10, 10, 10], gridSize: 2 };
          }
          parsed.page.width = pw;
          parsed.page.height = ph;
        }
        setSchema(parsed);
      }
    }
    generateCanvasJson();
  }

  function handleElementUpdate(payload: { id: string; patch: Partial<NativeElement> }) {
    const before = state.schema.elements.find((item) => item.id === payload.id) as any;
    const prevW = Number(before?.w);
    const prevH = Number(before?.h);
    const wasFreeTable = before?.type === 'freeTable';
    const patch = payload.patch || ({} as Partial<NativeElement>);
    updateElement(payload.id, patch);
    const current = state.schema.elements.find((item) => item.id === payload.id) as any;
    if (wasFreeTable && current?.type === 'freeTable') {
      const rowCount = Math.max(1, Number(current.rowCount || 1));
      const colCount = Math.max(1, Number(current.colCount || 1));
      const cw = Array.isArray(current.colWidths) ? current.colWidths.map((x: any) => Number(x)) : [];
      const rh = Array.isArray(current.rowHeights) ? current.rowHeights.map((x: any) => Number(x)) : [];
      const touchedTracks =
        Object.prototype.hasOwnProperty.call(patch, 'colWidths') || Object.prototype.hasOwnProperty.call(patch, 'rowHeights');
      const bboxChanged =
        (Object.prototype.hasOwnProperty.call(patch, 'w') || Object.prototype.hasOwnProperty.call(patch, 'h')) && !touchedTracks;
      const nw = Number(current.w);
      const nh = Number(current.h);
      if (
        bboxChanged &&
        cw.length === colCount &&
        rh.length === rowCount &&
        prevW > 0 &&
        prevH > 0 &&
        (Math.abs(nw - prevW) > 0.001 || Math.abs(nh - prevH) > 0.001)
      ) {
        const scaled = scaleFreeTableTracks(cw, rh, prevW, prevH, nw, nh);
        updateElement(payload.id, { colWidths: scaled.colWidths, rowHeights: scaled.rowHeights } as any);
      }
    }
    if (current?.type === 'reportHeader') {
      updateElement(payload.id, {
        x: 0,
        y: 0,
        w: state.schema.page.width,
        region: 'header',
        bandId: payload.id,
      } as any);
    } else if (current?.type === 'reportFooter') {
      updateElement(payload.id, {
        x: 0,
        y: Math.max(0, state.schema.page.height - current.h),
        w: state.schema.page.width,
        region: 'footer',
        bandId: payload.id,
      } as any);
    }
    if (selectedTableColumn.value?.elementId === payload.id) {
      const columns = Array.isArray(current?.columns) ? current.columns : [];
      if (!columns.some((col: any) => col?.key === selectedTableColumn.value?.columnKey)) {
        selectedTableColumn.value = null;
      }
    }
    if (selectedFreeTableCell.value?.elementId === payload.id) {
      const rowCount = Math.max(1, Number(current?.rowCount || 1));
      const colCount = Math.max(1, Number(current?.colCount || 1));
      const row = Number(selectedFreeTableCell.value.row || 0);
      const col = Number(selectedFreeTableCell.value.col || 0);
      if (row >= rowCount || col >= colCount) {
        selectedFreeTableCell.value = null;
      }
    }
    if (payload.patch && 'cells' in payload.patch && selectedFreeTableRangeCorner.value?.elementId === payload.id) {
      selectedFreeTableRangeCorner.value = null;
    }
    generateCanvasJson();
  }

  function updatePage(patch: any) {
    state.schema.page = { ...state.schema.page, ...patch };
    state.schema.elements.forEach((item: any) => {
      if (item.type === 'reportHeader') {
        item.x = 0;
        item.y = 0;
        item.w = state.schema.page.width;
        item.region = 'header';
        item.bandId = item.id;
      } else if (item.type === 'reportFooter') {
        item.x = 0;
        item.y = Math.max(0, state.schema.page.height - item.h);
        item.w = state.schema.page.width;
        item.region = 'footer';
        item.bandId = item.id;
      }
    });
    generateCanvasJson();
  }

  function handleAddElement(type: NativeElementType) {
    if (type === 'reportHeader') {
      const exists = state.schema.elements.find((item) => item.type === 'reportHeader');
      if (exists) {
        setSelected(exists.id);
        createMessage.warning('报表头已存在，可直接调整其高度');
        return;
      }
    }
    if (type === 'reportFooter') {
      const exists = state.schema.elements.find((item) => item.type === 'reportFooter');
      if (exists) {
        setSelected(exists.id);
        createMessage.warning('报表尾已存在，可直接调整其高度');
        return;
      }
    }
    addElement(type);
    const current = selectedElement.value as any;
    if (current) {
      const layout = resolveBandLayout();
      if (type === 'reportHeader') {
        updateElement(current.id, {
          x: 0,
          y: 0,
          w: state.schema.page.width,
          region: 'header',
          bandId: current.id,
        } as any);
      } else if (type === 'reportFooter') {
        updateElement(current.id, {
          x: 0,
          y: Math.max(0, state.schema.page.height - current.h),
          w: state.schema.page.width,
          region: 'footer',
          bandId: current.id,
        } as any);
      } else {
        let targetRegion = insertRegion.value;
        if (targetRegion === 'header' && layout.headerHeight <= 0) {
          targetRegion = 'body';
          createMessage.warning('尚未设置报表头区域，已自动放入报表主体');
        }
        const minY = targetRegion === 'header' ? 0 : layout.headerHeight;
        const maxY = targetRegion === 'header' ? Math.max(0, layout.headerHeight - current.h) : Math.max(layout.headerHeight, layout.bodyBottom - current.h);
        const nextY = Math.min(maxY, Math.max(minY, current.y));
        const headerBand = state.schema.elements.find((item) => item.type === 'reportHeader') as any;
        updateElement(current.id, {
          y: nextY,
          region: targetRegion,
          bandId: targetRegion === 'header' ? String(headerBand?.id || '') : '',
        } as any);
      }
    }
    selectedTableColumn.value = null;
    selectedFreeTableCell.value = null;
    selectedFreeTableRangeCorner.value = null;
    generateCanvasJson();
  }

  function resolveBandLayout() {
    const pageHeight = state.schema.page.height;
    const header = state.schema.elements.find((item) => item.type === 'reportHeader') as any;
    const footer = state.schema.elements.find((item) => item.type === 'reportFooter') as any;
    const headerHeight = Number(header?.h || 0);
    const footerHeight = Number(footer?.h || 0);
    const bodyBottom = Math.max(headerHeight, pageHeight - footerHeight);
    return { headerHeight, footerHeight, bodyBottom };
  }

  function buildSavePayload() {
    const orientation = state.schema.page.width > state.schema.page.height ? 'landscape' : 'portrait';
    return {
      id: templateId.value || undefined,
      templateCode: meta.templateCode,
      templateName: meta.templateName,
      category: meta.category || 'form',
      paperWidthMm: state.schema.page.width,
      paperHeightMm: state.schema.page.height,
      paperOrientation: orientation,
      remark: meta.remark,
      templateJson: serialize(),
    };
  }

  async function saveTemplate() {
    if (!meta.templateCode || !meta.templateName) {
      createMessage.warning('请先填写模板编码和模板名称');
      return;
    }
    saving.value = true;
    try {
      const payload = buildSavePayload();
      if (templateId.value) {
        await edit(payload);
      } else {
        await add(payload);
        const queryResult = await queryByCode(meta.templateCode);
        if (queryResult?.id) {
          templateId.value = String(queryResult.id);
        }
      }
      createMessage.success('原生模板保存成功');
    } catch (error: any) {
      createMessage.error(error?.message || '保存失败');
    } finally {
      saving.value = false;
    }
  }

  async function previewTemplate() {
    previewHtml.value = await renderNativePrintHtml(state.schema, previewData.value);
    previewVisible.value = true;
  }

  async function printTemplate() {
    const html = await renderNativePrintHtml(state.schema, previewData.value);
    previewHtml.value = html;
    printHtml(html);
  }

  function handleDelete() {
    removeSelected();
    selectedTableColumn.value = null;
    selectedFreeTableCell.value = null;
    selectedFreeTableRangeCorner.value = null;
    generateCanvasJson();
  }

  function duplicateElement() {
    duplicateSelected();
    selectedTableColumn.value = null;
    selectedFreeTableCell.value = null;
    selectedFreeTableRangeCorner.value = null;
    generateCanvasJson();
  }

  function handleSelectElement(id: string) {
    setSelected(id);
    if (!id || selectedTableColumn.value?.elementId !== id) {
      selectedTableColumn.value = null;
    }
    if (!id || selectedFreeTableCell.value?.elementId !== id) {
      selectedFreeTableCell.value = null;
    }
    if (!id || selectedFreeTableRangeCorner.value?.elementId !== id) {
      selectedFreeTableRangeCorner.value = null;
    }
  }

  function handleSelectTableColumn(payload: { elementId: string; columnKey: string }) {
    setSelected(payload.elementId);
    selectedTableColumn.value = payload;
    selectedFreeTableCell.value = null;
    selectedFreeTableRangeCorner.value = null;
  }

  function handleSelectFreeTableCell(payload: { elementId: string; row: number; col: number; shiftKey?: boolean }) {
    setSelected(payload.elementId);
    selectedTableColumn.value = null;
    if (payload.shiftKey === true && selectedFreeTableCell.value?.elementId === payload.elementId) {
      selectedFreeTableRangeCorner.value = {
        elementId: payload.elementId,
        row: payload.row,
        col: payload.col,
      };
      return;
    }
    selectedFreeTableCell.value = {
      elementId: payload.elementId,
      row: payload.row,
      col: payload.col,
    };
    selectedFreeTableRangeCorner.value = null;
  }

  /** 画布内双击自由表格单元格：打开仅针对该表的编辑弹窗 */
  function handleEditFreeTableCell(payload: { elementId: string; row: number; col: number }) {
    setSelected(payload.elementId);
    selectedTableColumn.value = null;
    selectedFreeTableRangeCorner.value = null;
    selectedFreeTableCell.value = {
      elementId: payload.elementId,
      row: payload.row,
      col: payload.col,
    };
    freeTableCellModalTarget.value = {
      elementId: payload.elementId,
      row: payload.row,
      col: payload.col,
    };
    freeTableCellModalOpen.value = true;
  }

  function handleFreeTableCellModalSave(payload: {
    elementId: string;
    row: number;
    col: number;
    patch: Record<string, unknown>;
  }) {
    const el = state.schema.elements.find((e) => e.id === payload.elementId) as any;
    if (!el || el.type !== 'freeTable') {
      freeTableCellModalOpen.value = false;
      return;
    }
    const rowCount = Math.max(1, Number(el.rowCount || 1));
    const colCount = Math.max(1, Number(el.colCount || 1));
    const anchors = normalizeFreeTableAnchors(rowCount, colCount, el.cells || []);
    const next = anchors.map((item: any) =>
      item.row === payload.row && item.col === payload.col ? { ...item, ...payload.patch } : { ...item },
    );
    handleElementUpdate({ id: payload.elementId, patch: { cells: next } as any });
    freeTableCellModalOpen.value = false;
  }

  function resolveSelectedTableColumnKey() {
    if (!selectedElement.value || (selectedElement.value.type !== 'table' && selectedElement.value.type !== 'detailTable')) {
      return '';
    }
    if (selectedTableColumn.value?.elementId === selectedElement.value.id) {
      return selectedTableColumn.value.columnKey;
    }
    return '';
  }

  function resolveSelectedFreeTableCell() {
    if (!selectedElement.value || selectedElement.value.type !== 'freeTable') {
      return null;
    }
    if (selectedFreeTableCell.value?.elementId === selectedElement.value.id) {
      return {
        row: Number(selectedFreeTableCell.value.row || 0),
        col: Number(selectedFreeTableCell.value.col || 0),
      };
    }
    return null;
  }

  function resolveSelectedFreeTableMergeRect() {
    if (!selectedFreeTableCell.value || !selectedFreeTableRangeCorner.value) {
      return null;
    }
    if (
      selectedFreeTableCell.value.elementId !== selectedFreeTableRangeCorner.value.elementId ||
      !selectedElement.value ||
      selectedElement.value.type !== 'freeTable' ||
      selectedFreeTableCell.value.elementId !== selectedElement.value.id
    ) {
      return null;
    }
    const a = selectedFreeTableCell.value;
    const b = selectedFreeTableRangeCorner.value;
    return {
      r0: Math.min(a.row, b.row),
      r1: Math.max(a.row, b.row),
      c0: Math.min(a.col, b.col),
      c1: Math.max(a.col, b.col),
    };
  }

  function invalidatePendingImageAnalyze() {
    imageAnalyzeSeq += 1;
  }

  function clearImageAnalyzeProgressTimer() {
    if (imageAnalyzeProgressTimer != null) {
      clearInterval(imageAnalyzeProgressTimer);
      imageAnalyzeProgressTimer = null;
    }
  }

  function resetImageAnalyzeProgressUi() {
    clearImageAnalyzeProgressTimer();
    imageAnalyzeProgress.value = 0;
    imageAnalyzeProgressTip.value = '正在准备上传…';
  }

  function startImageAnalyzeFakeProgress() {
    resetImageAnalyzeProgressUi();
    imageAnalyzeProgress.value = 8;
    imageAnalyzeProgressTip.value = '正在上传图片…';
    imageAnalyzeProgressTimer = setInterval(() => {
      imageAnalyzeProgress.value = Math.min(86, imageAnalyzeProgress.value + (Math.random() * 4 + 0.6));
      if (imageAnalyzeProgress.value >= 28 && imageAnalyzeProgress.value < 48) {
        imageAnalyzeProgressTip.value = '正在调用大模型识别版式与字段…';
      } else if (imageAnalyzeProgress.value >= 48) {
        imageAnalyzeProgressTip.value = '正在生成模板 JSON，请稍候…';
      }
    }, 420);
  }

  function completeImageAnalyzeProgressSuccess() {
    clearImageAnalyzeProgressTimer();
    imageAnalyzeProgress.value = 100;
    imageAnalyzeProgressTip.value = '分析完成';
  }

  function clearImageAnalyzeState() {
    if (imageAnalyzeThumbUrl.value) {
      URL.revokeObjectURL(imageAnalyzeThumbUrl.value);
    }
    imageAnalyzeThumbUrl.value = '';
    imageAnalyzePreviewHtml.value = '';
    imageAnalyzeHint.value = '';
    imageAnalyzePendingSchema.value = null;
    imageAnalyzeMockJson.value = '';
    imageAnalyzeDragover.value = false;
    imageAnalyzeLoading.value = false;
    resetImageAnalyzeProgressUi();
  }

  function resetImageAnalyzeModal() {
    invalidatePendingImageAnalyze();
    clearImageAnalyzeState();
    imageAnalyzeVisible.value = false;
  }

  function openImageAnalyzeModal() {
    clearImageAnalyzeState();
    imageAnalyzeVisible.value = true;
  }

  function onImageAnalyzeDragEnter(e: DragEvent) {
    e.preventDefault();
    if (imageAnalyzeLoading.value) {
      return;
    }
    imageAnalyzeDragover.value = true;
  }

  function onImageAnalyzeDragOver(e: DragEvent) {
    e.preventDefault();
    if (imageAnalyzeLoading.value) {
      return;
    }
    imageAnalyzeDragover.value = true;
  }

  function onImageAnalyzeDragLeave(e: DragEvent) {
    e.preventDefault();
    if (imageAnalyzeLoading.value) {
      return;
    }
    imageAnalyzeDragover.value = false;
  }

  function triggerImageAnalyzeFilePick() {
    if (imageAnalyzeLoading.value) {
      return;
    }
    imageAnalyzeFileInputRef.value?.click();
  }

  function onImageAnalyzeFileInputChange(e: Event) {
    const input = e.target as HTMLInputElement;
    const file = input.files?.[0];
    input.value = '';
    if (file) {
      void processImageAnalyzeFile(file);
    }
  }

  function onImageAnalyzeDrop(e: DragEvent) {
    e.preventDefault();
    imageAnalyzeDragover.value = false;
    if (imageAnalyzeLoading.value) {
      return;
    }
    const file = e.dataTransfer?.files?.[0];
    if (!file) {
      return;
    }
    if (!file.type.startsWith('image/')) {
      createMessage.warning('请拖拽图片文件');
      return;
    }
    void processImageAnalyzeFile(file);
  }

  async function processImageAnalyzeFile(file: File) {
    if (imageAnalyzeLoading.value) {
      createMessage.warning('正在分析中，请稍候');
      return;
    }
    const mySeq = ++imageAnalyzeSeq;
    imageAnalyzeLoading.value = true;
    startImageAnalyzeFakeProgress();
    try {
      const res = await analyzeImageForNativeFile(file);
      if (mySeq !== imageAnalyzeSeq) {
        return;
      }
      imageAnalyzeProgress.value = Math.max(imageAnalyzeProgress.value, 44);
      imageAnalyzeProgressTip.value = '正在解析返回结果…';

      const parsed = normalizeImportedNativeSchema(JSON.parse(res.templateJson));
      imageAnalyzePendingSchema.value = parsed;
      imageAnalyzeMockJson.value = res.mockDataJson || '{}';
      const extra = res.aiUsed ? '（已调用视觉大模型）' : '（未调用大模型或已回退占位）';
      imageAnalyzeHint.value = `${res.hint || ''}${extra}`.trim();
      if (imageAnalyzeThumbUrl.value) {
        URL.revokeObjectURL(imageAnalyzeThumbUrl.value);
      }
      imageAnalyzeThumbUrl.value = URL.createObjectURL(file);
      let mock: Record<string, any> = {};
      try {
        mock = JSON.parse(imageAnalyzeMockJson.value || '{}');
      } catch (_e) {
        mock = {};
      }

      if (mySeq !== imageAnalyzeSeq) {
        return;
      }
      imageAnalyzeProgress.value = Math.max(imageAnalyzeProgress.value, 72);
      imageAnalyzeProgressTip.value = '正在生成本地预览…';
      imageAnalyzePreviewHtml.value = await renderNativePrintHtml(parsed, mock);

      if (mySeq !== imageAnalyzeSeq) {
        return;
      }
      completeImageAnalyzeProgressSuccess();
      await new Promise<void>((r) => setTimeout(r, 360));
      if (mySeq !== imageAnalyzeSeq) {
        return;
      }
      createMessage.success('已生成预览，请确认后应用到画布');
    } catch (err: any) {
      if (mySeq === imageAnalyzeSeq) {
        createMessage.error(err?.message || '图片分析失败');
      }
    } finally {
      if (mySeq === imageAnalyzeSeq) {
        imageAnalyzeLoading.value = false;
        resetImageAnalyzeProgressUi();
      }
    }
  }

  function confirmApplyImageAnalyze() {
    const pending = imageAnalyzePendingSchema.value;
    if (!pending) {
      createMessage.warning('请先生成预览');
      return;
    }
    setSchema(pending);
    const mockText = imageAnalyzeMockJson.value || '{}';
    mockDataText.value = mockText;
    previewDataText.value = mockText;
    dataSourceType.value = 'mock';
    selectedTableColumn.value = null;
    selectedFreeTableCell.value = null;
    selectedFreeTableRangeCorner.value = null;
    setSelected('');
    generateCanvasJson();
    resetImageAnalyzeModal();
    createMessage.success('已应用到画布');
  }

  function backToList() {
    router.push('/print/template');
  }

  onMounted(async () => {
    try {
      const raw = localStorage.getItem(LS_LEFT_PANEL_KEY);
      if (raw != null && raw !== '') {
        const n = Number.parseInt(raw, 10);
        if (!Number.isNaN(n) && n >= 0 && n <= LEFT_PANEL_MAX) {
          leftPanelWidth.value = n;
          if (n >= LEFT_PANEL_MIN) {
            lastLeftPanelWidth.value = n;
          }
        }
      }
    } catch (_e) {
      /* 忽略 */
    }
    await loadTemplate();
    generateCanvasJson();
    generateMockData({ syncManual: true, showMessage: false });
  });

  onUnmounted(() => {
    stopLeftPanelResize();
    invalidatePendingImageAnalyze();
    clearImageAnalyzeProgressTimer();
    imageAnalyzeLoading.value = false;
    if (imageAnalyzeThumbUrl.value) {
      URL.revokeObjectURL(imageAnalyzeThumbUrl.value);
    }
  });
</script>

<style scoped lang="less">
  .native-designer-page {
    background: #fff;
    min-height: 100%;
  }

  .designer-toolbar {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .toolbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
    }

    .tip {
      color: #666;
      font-size: 12px;
    }
  }

  .designer-meta {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }

  /** 模板编码/名称等：均分列宽，避免单行 24 栅格在窄宽度下挤压重叠 */
  .designer-meta__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
  }

  @media (max-width: 1200px) {
    .designer-meta__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .designer-meta__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .designer-meta__grid :deep(.ant-input) {
    min-width: 0;
  }

  /** 缩放 + 按钮单独一行，保证「按比例缩放」与按钮完整展示 */
  .designer-meta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
  }

  .meta-scale-input {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
  }

  .meta-scale-input :deep(.ant-input-number) {
    width: 100%;
    min-width: 0;
  }

  .meta-scale-input :deep(.ant-input-number-group-addon) {
    white-space: nowrap;
  }

  .meta-scale-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .designer-main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: calc(100vh - 132px);
  }

  .left-panel-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #f0f0f0;
    background: #fafbfc;

    &.is-collapsed {
      border-right: none;
    }
  }

  .left-panel-resizer {
    flex-shrink: 0;
    width: 6px;
    cursor: col-resize;
    align-self: stretch;
    position: relative;
    z-index: 2;
    background: transparent;
    user-select: none;

    &:hover {
      background: rgba(22, 119, 255, 0.08);
    }

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 18%;
      bottom: 18%;
      width: 2px;
      transform: translateX(-50%);
      border-radius: 1px;
      background: #d9d9d9;
    }
  }

  .left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 12px;

    .json-box-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.75);
      line-height: 20px;
    }

    .json-box-title-space {
      margin-top: 10px;
    }

    .json-action-row {
      margin-bottom: 8px;
    }

    /* 模板 JSON：纵向 flex + gap，避免 margin 合并导致按钮与文本框仍贴在一起 */
    .json-template-pane {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .json-template-pane > .json-box-title {
      margin-bottom: 0;
    }

    .json-template-pane > .json-action-row.json-action-row--capsule {
      margin-bottom: 0;
    }

    /* 模板 JSON：操作按钮胶囊形 */
    .json-action-row--capsule,
    .json-mock-toolbar {
      :deep(.json-capsule-btn.ant-btn) {
        height: 28px;
        padding: 0 16px;
        line-height: 26px;
        border-radius: 999px;
      }
    }

    .json-tabs {
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      background: #fff;
      padding: 8px;
    }

    /* 参数 JSON：子级「分段胶囊」；灰色轨道随内容收缩，不铺满整行 */
    .json-sub-tabs.json-sub-tabs--segmented {
      margin-top: 4px;

      :deep(.ant-tabs-nav) {
        margin-bottom: 10px;
        width: fit-content;
        max-width: 100%;
        align-self: flex-start;

        &::before {
          display: none;
        }
      }

      :deep(.ant-tabs-nav-wrap) {
        border-bottom: none;
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: 100%;
        padding: 3px 5px;
        background: #f0f2f5;
        border-radius: 999px;
        border: 1px solid #e8e8e8;
      }

      :deep(.ant-tabs-nav-list) {
        display: flex;
        align-items: center;
        gap: 3px;
      }

      :deep(.ant-tabs-tab) {
        margin: 0 !important;
        padding: 4px 12px !important;
        border: none !important;
        border-radius: 999px !important;
        background: transparent;
        font-size: 12px;
        line-height: 1.4;
        color: rgba(0, 0, 0, 0.65);
        transition:
          background 0.2s,
          color 0.2s,
          box-shadow 0.2s;
      }

      :deep(.ant-tabs-tab-active) {
        background: #fff !important;
        color: #1677ff !important;
        font-weight: 500;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      }

      :deep(.ant-tabs-tab:hover:not(.ant-tabs-tab-active)) {
        color: rgba(0, 0, 0, 0.85);
      }

      :deep(.ant-tabs-ink-bar) {
        display: none !important;
      }

      :deep(.ant-tabs-content-holder) {
        border-top: none;
      }

      :deep(.ant-tabs-content) {
        padding-top: 4px;
      }
    }

    .json-mock-toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .json-textarea {
      :deep(textarea) {
        font-family: Consolas, 'Courier New', monospace;
        font-size: 12px;
      }
    }
  }

  .center-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  .right-panel {
    width: 320px;
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid #f0f0f0;
  }

  .preview-frame {
    width: 100%;
    height: calc(100vh - 120px);
    border: 1px solid #f0f0f0;
  }

  .image-analyze-body {
    min-height: 120px;
  }

  .image-analyze-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    left: -100px;
  }

  .image-analyze-drop {
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;

    &.is-dragover {
      border-color: #1677ff;
      background: #f0f7ff;
    }

    &.is-busy {
      pointer-events: none;
      opacity: 0.72;
    }
  }

  .image-analyze-progress {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f0f7ff;
    border: 1px solid #d6e4ff;
  }

  .image-analyze-progress-tip {
    margin: 10px 0 0;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.78);
    font-weight: 500;
  }

  .image-analyze-progress-sub {
    margin: 6px 0 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 1.5;
  }

  .image-analyze-drop-title {
    margin: 0 0 4px;
    color: rgba(0, 0, 0, 0.65);
  }

  .image-analyze-hint {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.6;
  }

  .image-analyze-preview-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .image-analyze-thumb {
    flex: 0 0 200px;
    max-width: 100%;

    img {
      max-width: 100%;
      max-height: 280px;
      object-fit: contain;
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      background: #fff;
    }
  }

  .image-analyze-preview-frame-wrap {
    flex: 1;
    min-width: 260px;
  }

  .thumb-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 6px;
  }

  .image-analyze-preview-frame {
    width: 100%;
    height: 320px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    background: #fff;
  }
</style>
