<template>
  <el-upload
    :show-file-list="false"
    :accept="accept"
    :multiple="multiple"
    :before-upload="addFileFun"
  >
    <slot />
  </el-upload>
  <Dialog v-model="diaVisible" diaTitle="上传文件" :width="400" @close="closeFun">
    <div>
      <TableForm ref="tableFormRef" :tableName="tableName" :itemNum="3" v-model:data="formData" />
    </div>
    <template #footer>
      <div>
        <el-button @click="closeFun">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="submitFun">{{ $t('通用.确定') }}</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { uploadBigFile } from '@/utils/file';
import emitter from '@/utils/eventBus';

const emit = defineEmits(['finished']);

onMounted(() => {
  emitter.on('UPLOAD_FINISHED', uploadFinishedFun);
});

onBeforeUnmount(() => {
  emitter.off('UPLOAD_FINISHED', uploadFinishedFun);
});

interface Props {
  api: any;
  fileType?: any;
  data: any;
  accept?: any;
  multiple?: boolean;
  tableName: string;
  callbackFlag?: string;
  discipline?: string;
}

const props = withDefaults(defineProps<Props>(), {
  api: null,
  data: {},
  fileType: '',
  accept: '',
  multiple: true,
  tableName: '',
  callbackFlag: '',
  discipline: '',
});

const formData = ref<any>({
  files: [],
  fileTypeDictValue: '',
  disciplineDictValue: '',
});

const diaVisible = ref(false);
watch(
  () => diaVisible.value,
  (val: boolean) => {
    if (!val) {
      resetFun();
      tableFormRef.value?.resetFun();
    }
  }
);

const addFileFun = (file: any) => {
  formData.value.files.push(file);
  formData.value.fileTypeDictValue = props.fileType;
  formData.value.disciplineDictValue = props.discipline;
  diaVisible.value = true;
  return false;
};

const tableFormRef = ref<any>();
const submitFun = async () => {
  const valid = await tableFormRef.value.validateFun();
  if (valid) {
    const params = {
      // 必填参数
      fileList: formData.value.files, // 文件列表
      dirId: props.data.dirId, // 文件目录id
      projectId: props.data.projectId, // 项目id
      uuid: props.data.uuid, // 上传任务交付物，任务的uuid
      // 非必填参数
      isApprove: 0, // 0不需要审批 1需要审批 默认0
      callbackFlag: props.callbackFlag, // 回调标识
      type: 0,
      fileType: props.fileType,
      fileTypeDictValue: formData.value.fileTypeDictValue || '',
      disciplineDictValue: formData.value.disciplineDictValue || '',
      fileTypeDictClass: 'ALL_FILE_TYPE',
      disciplineTypeDictClass: 'DISCIPLINE_TYPE',
      dictTags: [
        'fileTypeDictClass',
        'fileTypeDictValue',
        'disciplineTypeDictClass',
        'disciplineDictValue',
      ],
    };
    closeFun();
    await uploadBigFile(params, props.api);
  }
};

const uploadFinishedFun = (data: any) => {
  emit('finished', data);
};

const resetFun = () => {
  formData.value = {
    files: [],
    fileTypeDictValue: '',
  };
};
const closeFun = () => {
  diaVisible.value = false;
};

defineExpose({
  addFileFun,
});
</script>
