import { h } from 'vue';
import { ElAvatar, ElTag } from 'element-plus';

/**
 * [[$.ModuleComment]]表格列配置
 *
 * 定义列表页表格的显示列，包含多选框、ID、各业务字段及审计字段。
 * 字段按类型自动选择渲染方式：图片用 ElAvatar、选项用 ElTag、
 * 链接用 a 标签，其余为普通文本。
 */
export const columns = [
  {
    type: 'selection', // 多选框列
  },
  {
    label: 'ID',
    prop: 'id',
    fixed: 'left',
    width: 50,
  },
[[- range .ListFields]]
  {
    label: '[[.Label]]',
    prop: '[[.CamelName]]',
    minWidth: [[if eq .Type "CharField"]]120[[else if eq .Type "IntegerField"]]100[[else if eq .Type "DateTimeField"]]180[[else]]120[[end]],
[[- if .IsImage]]
    // 图片渲染：以方形头像形式展示
    render(record) {
      return h(ElAvatar, {
        size: 48,
        src: record.row.[[.CamelName]],
        shape: 'square',
        fit: 'fill',
      });
    },
[[- else if .Choices]]
    // 选项标签渲染：按选项值映射文字与标签颜色
    render(record) {
      const statusMap = {
[[- range .Choices]]
        [[.Value]]: { text: '[[.Label]]', type: '[[.Type]]' },
[[- end]]
      };
      const status = statusMap[record.row.[[.CamelName]]];
      return h(
        ElTag,
        {
          type: status?.type || 'info',
        },
        {
          default: () => status?.text || record.row.[[.CamelName]],
        },
      );
    },
[[- else if and (eq .Type "CharField") ((isUrlField .CamelName))]]
    // 链接渲染：新窗口打开
    render(record) {
      return h(
        'a',
        {
          href: record.row.[[.CamelName]],
          target: '_blank',
        },
        '点击查看',
      );
    },
[[- else]]
    // 普通文本渲染
[[- end]]
  },
[[- end]]
  {
    label: '创建人',
    prop: 'createUser',
    minWidth: 100,
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180,
  },
];