import { FileItem, PreviewFileItem, UploadResultStatus } from '../types/typing';
import { isImgTypeByName } from '../helper';
import { Progress, Tag } from 'ant-design-vue';
import ThumbUrl from './ThumbUrl.vue';
<%_ if (enableTranslation) { _%>
import { useI18n } from '@/hooks/web/useI18nOut';
<%_ } _%>

// 文件上传列表
export function createTableColumns(): any[] {
  <%_ if (enableTranslation) { _%>
  const { t } = useI18n();
  <%_ } _%>
  return [
    {
      dataIndex: 'thumbUrl',
      title: <% if (enableTranslation) { %>t('component.upload.legend')<% } else { %>'t$t('component.upload.legend')$t$'<% } %>,
      width: 100,
      customRender: ({ record }) => {
        const { thumbUrl } = (record as FileItem) || {};
        return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
      },
    },
    {
      dataIndex: 'name',
      title: <% if (enableTranslation) { %>t('component.upload.fileName')<% } else { %>'t$t('component.upload.fileName')$t$'<% } %>,
      align: 'left',
      customRender: ({ text, record }) => {
        const { percent, status: uploadStatus } = (record as FileItem) || {};
        let status: 'normal' | 'exception' | 'active' | 'success' = 'normal';
        if (uploadStatus === UploadResultStatus.ERROR) {
          status = 'exception';
        } else if (uploadStatus === UploadResultStatus.UPLOADING) {
          status = 'active';
        } else if (uploadStatus === UploadResultStatus.SUCCESS) {
          status = 'success';
        }
        return (
          <div>
            <p class="truncate mb-1 max-w-[280px]" title={text}>
              {text}
            </p>
            <Progress percent={percent} size="small" status={status} />
          </div>
        );
      },
    },
    {
      dataIndex: 'size',
      title: <% if (enableTranslation) { %>t('component.upload.fileSize')<% } else { %>'t$t('component.upload.fileSize')$t$'<% } %>,
      width: 100,
      customRender: ({ text = 0 }) => {
        return text && (text / 1024).toFixed(2) + 'KB';
      },
    },
    // {
    //   dataIndex: 'type',
    //   title: '文件类型',
    //   width: 100,
    // },
    {
      dataIndex: 'status',
      title: <% if (enableTranslation) { %>t('component.upload.fileStatue')<% } else { %>'t$t('component.upload.fileStatue')$t$'<% } %>,
      width: 100,
      customRender: ({ text }) => {
        if (text === UploadResultStatus.SUCCESS) {
          return <Tag color="green">{() => <% if (enableTranslation) { %>t('component.upload.uploadSuccess')<% } else { %>'t$t('component.upload.uploadSuccess')$t$'<% } %>}</Tag>;
        } else if (text === UploadResultStatus.ERROR) {
          return <Tag color="red">{() => <% if (enableTranslation) { %>t('component.upload.uploadError')<% } else { %>'t$t('component.upload.uploadError')$t$'<% } %>}</Tag>;
        } else if (text === UploadResultStatus.UPLOADING) {
          return <Tag color="blue">{() => <% if (enableTranslation) { %>t('component.upload.uploading')<% } else { %>'t$t('component.upload.uploading')$t$'<% } %>}</Tag>;
        }

        return text || <% if (enableTranslation) { %>t('component.upload.pending')<% } else { %>'t$t('component.upload.pending')$t$'<% } %>;
      },
    },
  ];
}
// 文件预览列表
export function createPreviewColumns(): any[] {
  <%_ if (enableTranslation) { _%>
  const { t } = useI18n();
  <%_ } _%>
  return [
    {
      dataIndex: 'url',
      title: <% if (enableTranslation) { %>t('component.upload.legend')<% } else { %>'t$t('component.upload.legend')$t$'<% } %>,
      width: 100,
      customRender: ({ record }) => {
        const { url } = (record as PreviewFileItem) || {};
        return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
      },
    },
    {
      dataIndex: 'name',
      title: <% if (enableTranslation) { %>t('component.upload.fileName')<% } else { %>'t$t('component.upload.fileName')$t$'<% } %>,
      align: 'left',
    },
  ];
}
