<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="`${paramsProps.title}`"
    draggable
    append-to-body
    :destroy-on-close="true"
    width="500"
  >
    <el-upload
      class="upload-demo"
      drag
      method="PUT"
      action="http://10.10.14.210:9000/dsideal/resources/77d45a2c-af46-4c47-bc4e-056a9335e131.doc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AOxWewe7pywwEc1NQeP6%2F20241030%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241030T071930Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=bb1c75d0acbeb287a28d4810dd8d4c518ef3cb98a3dc2001abbcf0a31dd7173e"
      :multiple="true"
      :on-success="uploadSuccess"
      :on-exceed="uploadExceed"
      :on-change="uploadChange"
      :limit="5"
      :show-file-list="true"
      list-type="picture"
      v-model:file-list="fileList"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖动文件到此区域 或 <em>点击上传</em></div>
    </el-upload>
  </el-dialog>
</template>

<script setup lang="ts" name="uploadDialog">
import { ref, onMounted } from "vue";
import { ElMessage, UploadUserFile } from "element-plus";
import { getFileExtIcon } from "@/api/modules/res";

const dialogFormVisible = ref(false);

const fileList = ref<UploadUserFile[]>([]);

const iconList = ref<any>([]);

const paramsProps = ref<View.DefaultParams>({
  title: "",
  row: {},
  updateId: 0,
  getTableList: undefined
});

const acceptParams = (params: View.DefaultParams) => {
  console.log(params);
  paramsProps.value = params;
  dialogFormVisible.value = true;
};

const uploadChange = async (uploadFile, uploadFiles) => {
  if (uploadFile.status == "ready") {
    const fileExt = uploadFile.name.split(".").pop();
    const imageExt = ["jpg", "jpeg", "png", "gif", "bmp"];
    const isImage = imageExt.includes(fileExt.toLowerCase());
    if (!isImage) {
      const extObj = iconList.value.find(item => item.ext === fileExt);
      if (extObj) {
        uploadFile.url = extObj.thumb_name;
      } else {
        const extOtherObj = iconList.value.find(item => item.ext === "other");
        uploadFile.url = extOtherObj.thumb_name;
      }
    }
  }
};

const uploadSuccess = (response, uploadFile, uploadFiles) => {
  setTimeout(() => {
    const _index = fileList.value.findIndex(item => item.name === uploadFile.name);
    fileList.value.splice(_index, 1);
  }, 3000);
};

const uploadExceed = () => {
  ElMessage.warning(`一次最多只能选择5个文件上传！`);
};

const getFileExtIconList = async () => {
  const res = await getFileExtIcon();
  iconList.value = res.data;
};

onMounted(() => {
  getFileExtIconList();
});

defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss">
:deep(li) {
  height: 50px; /* 设置固定高度 */
}

:deep(.el-upload-list__item) {
  margin-top: 0;
}

:deep(.el-upload-list__item-thumbnail) {
  height: 30px;
  width: none;
}
</style>
