<template>
  <div class="flex flex-col gap-[8px]">
    <div v-for="file in props.files" :key="file.id" class="crm-file-item">
      <div class="flex flex-1 items-center gap-[12px]">
        <CrmFileIcon :type="file.type" :size="32" />
        <div class="flex flex-1 flex-col gap-[2px]">
          <span class="text-[var(--text-n2)]">{{ file.name }}</span>
          <div class="flex items-center gap-[8px] text-[12px] text-[var(--text-n4)]">
            {{ `${(file.size / 1024).toFixed(2)} KB` }}
            {{
              t('crm.fileListModal.uploadAt', {
                name: file.createUser,
                time: dayjs(file.createTime).format('YYYY-MM-DD HH:mm:ss'),
              })
            }}
          </div>
        </div>
      </div>
      <div class="flex items-center gap-[4px]">
        <CrmPopConfirm
          v-if="!props.readonly"
          :title="t('crm.fileListModal.deleteTipTitle')"
          icon-type="error"
          :content="t('crm.fileListModal.deleteTipContent')"
          :positive-text="t('common.confirm')"
          trigger="click"
          :negative-text="t('common.cancel')"
          placement="bottom-end"
          @confirm="handleDelete(file, $event)"
        >
          <n-button :disabled="props.readonly" type="error" text>{{ t('common.delete') }}</n-button>
        </CrmPopConfirm>
        <template v-if="/(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.type)">
          <n-divider vertical />
          <n-button type="default" text @click="handlePreview(file)">{{ t('common.preview') }}</n-button>
        </template>
        <n-divider v-if="/(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.type) || !props.readonly" vertical />
        <n-button type="default" text @click="handleDownload(file)">{{ t('common.download') }}</n-button>
      </div>
    </div>
    <n-image-preview v-model:show="showPreview" :src="previewSrc" />
  </div>
</template>

<script setup lang="ts">
  import { NButton, NDivider, NImagePreview, useMessage } from 'naive-ui';
  import dayjs from 'dayjs';

  import { PreviewAttachmentUrl } from '@lib/shared/api/requrls/system/module';
  import { useI18n } from '@lib/shared/hooks/useI18n';
  import { isDingTalkBrowser, isLarkBrowser, isWeComBrowser } from '@lib/shared/method';

  import CrmFileIcon from '@/components/pure/crm-file-icon/index.vue';
  import CrmPopConfirm from '@/components/pure/crm-pop-confirm/index.vue';

  import { downloadAttachment } from '@/api/modules';
  import useUserStore from '@/store/modules/user';

  import { AttachmentInfo } from '../crm-form-create/types';

  const props = defineProps<{
    files: AttachmentInfo[];
    readonly?: boolean;
  }>();
  const emit = defineEmits<{
    (e: 'deleteFile', id: string): void;
  }>();

  const Message = useMessage();
  const { t } = useI18n();
  const userStore = useUserStore();

  async function handleDelete(file: AttachmentInfo, close: () => void) {
    close();
    emit('deleteFile', file.id);
  }

  const showPreview = ref(false);
  const previewSrc = ref('');
  function handlePreview(file: AttachmentInfo) {
    previewSrc.value = `${PreviewAttachmentUrl}/${file.id}?userId=${userStore.userInfo.id}`;
    showPreview.value = true;
  }

  async function handleDownload(file: AttachmentInfo) {
    if (isWeComBrowser() || isDingTalkBrowser() || isLarkBrowser()) {
      Message.warning(t('crm.fileListModal.wxworkDownloadTip'));
      return;
    }
    try {
      const res = await downloadAttachment(file.id);
      const url = URL.createObjectURL(new Blob([res], { type: 'application/octet-stream' }));
      const a = document.createElement('a');
      a.href = url;
      a.download = file.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    } catch (error) {
      // eslint-disable-next-line no-console
      console.log(error);
    }
  }
</script>

<style lang="less" scoped>
  .crm-file-item {
    @apply flex w-full items-center justify-between;

    padding: 8px 12px;
    border: 1px solid var(--text-n8);
    border-radius: var(--border-radius-small);
    background-color: var(--text-n10);
  }
</style>
