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

import { QUALITY_ICONS } from '../core/icons';
import { QUALITY_CATEGORY } from '../core/types';

/** 未设置图片时的占位图，避免画布上出现破图 */
const PLACEHOLDER_SRC =
  'data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="160" height="90"%3E%3Crect width="160" height="90" fill="%23f0f0f0"/%3E%3Ctext x="80" y="50" font-size="12" fill="%23999" text-anchor="middle"%3E图片%3C/text%3E%3C/svg%3E';

export const imageDefinition: QualityComponentDefinition = {
  type: 'Image',
  name: 'image',
  label: '图片',
  category: QUALITY_CATEGORY.BASIC,
  icon: QUALITY_ICONS.image,
  aiHint: '报告里的插图、印章、签名图片。识别阶段只放占位图，不写真实图片地址。',
  defaults: { src: PLACEHOLDER_SRC, alt: '图片', width: 60 },
  propertySchema: [
    {
      key: 'src',
      label: '图片地址',
      type: 'string',
      defaultValue: PLACEHOLDER_SRC,
      bindable: true,
      tip: '可直接填图片地址，或绑定数据字段',
    },
    { key: 'alt', label: '替代文字', type: 'string', defaultValue: '图片' },
    {
      key: 'width',
      label: '宽度(%)',
      type: 'number',
      defaultValue: 60,
    },
  ],
  dataSchema: [{ key: 'src', label: '图片地址', type: 'string', bindable: true }],
  buildContent: (properties) => ({
    tagName: 'img',
    attributes: {
      src: String(properties.src ?? PLACEHOLDER_SRC),
      alt: String(properties.alt ?? ''),
    },
    style: {
      display: 'block',
      'max-width': '100%',
      width: `${Number(properties.width ?? 60)}%`,
    },
  }),
};