import type { QualityComponentDefinition } from '../core/types';

import { cssStyle, escapeHtml } from '../core/html';
import { QUALITY_ICONS } from '../core/icons';
import { QUALITY_CATEGORY } from '../core/types';

/** 报告编号行；未绑定成功时渲染为空，不会在报告上留下花括号 */
const REPORT_NO_EXPR = '{{report.reportNo}}';

export const reportHeaderDefinition: QualityComponentDefinition = {
  type: 'ReportHeader',
  name: 'reportHeader',
  label: '报告页眉',
  category: QUALITY_CATEGORY.HEADER,
  icon: QUALITY_ICONS.header,
  aiHint:
    '文档最顶部的抬头块：公司名称、报告标题、报告编号。整份报告最多一个，且必须是最外层第一个组件。',
  defaults: {
    title: '智能质检报告',
    align: 'center',
    showReportNo: true,
    reportNo: REPORT_NO_EXPR,
  },
  propertySchema: [
    {
      key: 'title',
      label: '报告标题',
      type: 'string',
      defaultValue: '智能质检报告',
      required: true,
      bindable: true,
    },
    {
      key: 'align',
      label: '对齐方式',
      type: 'enum',
      defaultValue: 'center',
      options: [
        { label: '左对齐', value: 'left' },
        { label: '居中', value: 'center' },
      ],
    },
    { key: 'showReportNo', label: '显示报告编号', type: 'boolean', defaultValue: true },
    {
      key: 'reportNo',
      label: '报告编号',
      type: 'string',
      defaultValue: REPORT_NO_EXPR,
      bindable: true,
    },
  ],
  dataSchema: [
    { key: 'title', label: '报告标题', type: 'string', bindable: true },
    { key: 'reportNo', label: '报告编号', type: 'string', bindable: true },
  ],
  buildContent: (properties) => {
    const align = String(properties.align ?? 'center');
    const title = `<div style="${cssStyle({
      'font-size': '18px',
      'font-weight': 600,
      'text-align': align,
      padding: '8px 0',
      border: 'none',
      'border-bottom': '2px solid #1677ff',
    })}">${escapeHtml(properties.title)}</div>`;
    const reportNo = properties.showReportNo
      ? `<div style="${cssStyle({
          'font-size': '11px',
          color: '#8c8c8c',
          'text-align': align,
          padding: '4px 0 0',
        })}">报告编号：${escapeHtml(properties.reportNo)}</div>`
      : '';
    return {
      tagName: 'div',
      components: title + reportNo,
      style: { margin: '0 0 12px' },
    };
  },
};