<template>
  <el-upload :file-list="_value"
             :action="uploadFileUrl"
             :headers="headers"
             :limit="maxSize"
             with-credentials
             :multiple="maxSize > 0"
             :data="uploadParams"
             :show-file-list="false"
             :auto-upload="true"
             :before-upload="beforeUpload"
             :on-success="handleUploadSuccess"
  >
    <el-button color="#DED0B2" :loading="loading">上传文件</el-button>
  </el-upload>
  <div v-if="showTable||fileList.length!==0">
    <el-table :data="fileList" style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="80"/>
      <el-table-column prop="originalFilename" label="文件名" align="center"/>
      <el-table-column prop="size" label="文件大小" align="center">
        <template #default="scope">
          {{ parseInt(scope.row.size / 1024) }}KB
          <!--          {{ parseInt(scope.row.size / 1024) > 1024 ? 'MB' : 'KB' }}-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="beforeRemove(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {defineProps, computed, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {getToken} from '@/utils/auth'
import {deleteFile} from "@/api/project-demand";

const baseURL = import.meta.env.VITE_BASE_URL
const uploadFileUrl = ref(baseURL + "/workflow/process/file/upload")
const headers = reactive({
  authorization: getToken()
})
const disabled = ref(false)
const loading = ref(false)
const showTable = ref(false)
const uploadParams = ref({})
const props = defineProps({
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  maxSize: {
    type: Number,
    default: 30
  }
})

const emit = defineEmits(["input", "getFile"])
const fileList = ref([])
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
})

const beforeUpload = (file) => {
  // const FileExt = file.name.replace(/.+\./, "");
  // if (['zip', 'rar', 'pdf', 'doc', 'docx', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
  //   ElMessage.warning('请上传后缀名为pdf、doc、docx、xlsx、zip或rar的文件！');
  //   return false;
  // } else
  // if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
  //   ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
  // } else {
  loading.value = true
  return true
  // }
}
const handleUploadSuccess = (res, file) => {
  if (res.code !== 1000) {
    loading.value = false
    ElMessage.error("上传失败")
  } else {
    loading.value = false
    ElMessage.success("上传成功")
  }
  showTable.value = true
  let data = res.data
  fileList.value.push(data)
  emit("getFile", fileList.value)
}
const beforeRemove = (row) => {
  ElMessageBox.confirm(`确认删除名称为${row.originalFilename}的表格吗?`, '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    handleRemove(row)
  }).catch(() => {
    ElMessage.warning("用户取消删除! ");
  })
}

const handleRemove = (row) => {
  deleteFile(row.id).then(res => {
    if (res.code === 1000) {
      ElMessage.success("删除成功");
      fileList.value.splice(fileList.value.findIndex((item) => item.id === row.id), 1);
    }
  });
};

</script>

<style lang="scss" scoped>
a {
  font-size: 12px;
  color: #2a99ff;
}
</style>
