<script setup lang="ts">
import { message } from 'ant-design-vue/lib';
import { FileType } from 'ant-design-vue/lib/upload/interface';
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const emit = defineEmits(['upload', 'close', 'update:visible']);
const props = defineProps({
  /**窗口标题 */
  title: {
    type: String,
    default: '标题',
  },
  /**是否上传中 */
  loading: {
    type: Boolean,
    default: false,
  },
  /**是否弹出显示，必传 */
  visible: {
    type: Boolean,
    required: true,
  },
  /**允许上传的文件拓展类型，默认任意，可指定['.xls', '.xlsx'] */
  ext: {
    type: Array<string>,
    default: [],
  },
  /**上传文件大小（单位MB），默认不限制，可指定10 */
  size: {
    type: Number,
    default: 0,
  },
});

/**弹框关闭事件 */
function fnModalClose() {
  if (props.loading) return;
  emit('close');
}

/**上传前检查或转换压缩 */
function fnBeforeUpload(file: FileType) {
  if (props.loading) return false;
  // 检查文件大小
  if (props.size > 0) {
    const fileSize = file.size;
    const isLtM = fileSize / 1024 / 1024 < props.size;
    if (!isLtM) {
      message.error(
        `${t('components.UploadModal.allowFilter')} ${props.size}MB`,
        3
      );
      return false;
    }
  }
  // 检查后缀
  if (props.ext.length > 0) {
    const fileName = file.name;
    const isAllowType = props.ext.some(v => fileName.endsWith(v));
    if (!isAllowType) {
      message.error(
        `${t('components.UploadModal.onlyAllow')} ${props.ext.join('、')}`,
        3
      );
      return false;
    }
  }
  return true;
}

/**上传请求发出 */
function fnUpload(up: UploadRequestOption) {
  emit('upload', up.file);
}
</script>

<template>
  <ProModal
    :drag="true"
    :destroyOnClose="true"
    :title="props.title"
    :visible="props.visible"
    :keyboard="false"
    :mask-closable="false"
    :confirm-loading="props.loading"
    :footer="false"
    @cancel="fnModalClose"
  >
    <a-space :size="8" direction="vertical" style="width: 100%">
      <a-upload-dragger
        :disabled="props.loading"
        :accept="props.ext.join(',')"
        name="file"
        :max-count="1"
        :show-upload-list="false"
        :before-upload="fnBeforeUpload"
        :custom-request="fnUpload"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">
          {{ t('components.UploadModal.uploadTip') }}
        </p>
        <p class="ant-upload-hint">
          <template v-if="props.size > 0">
            <div>
              {{ t('components.UploadModal.allowSize') }} {{ props.size }} MB
            </div>
          </template>
          <template v-if="props.ext.length > 0">
            <div>
              {{ t('components.UploadModal.allowFormat') }}
              {{ props.ext.join('、') }}
            </div>
          </template>
        </p>
      </a-upload-dragger>
      <slot></slot>
    </a-space>
  </ProModal>
</template>

<style lang="less" scoped></style>
