<script setup>
const emit = defineEmits(['success'])
const file = ref()

const onSuccess = res => {
  file.value = res.data
  emit('success', file.value)
}
</script>

<template>
  <el-upload
    class="ai-upload"
    drag
    action="/api/ai/api/upload-file"
    accept=".csv, .xls, .xlsx, text/csv, application/csv,text/comma-separated-values, application/csv, application/excel,application/vnd.msexcel, text/anytext, application/vnd. ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    :data="{ purpose: 'file-extract' }"
    :show-file-list="false"
    :on-success="onSuccess">
    <ul class="ai-upload-list" v-if="file">
      <li>{{ file.file_name }}</li>
    </ul>
    <div class="ai-upload-box">
      <img src="@/assets/images/ai_plus.png" height="40" />
      <div class="el-upload__text"><em>点击</em>上传数据文件</div>
    </div>
  </el-upload>
</template>

<style lang="scss">
.ai-upload {
  .el-upload-dragger {
    padding: 20px;
  }
  .ai-upload-list {
    margin-bottom: 20px;
    text-align: left;
    li {
      padding: 0 10px;
      display: flex;
      align-items: center;
      min-height: 40px;
      background: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
    }
  }
  .el-upload__text {
    margin-top: 20px;
    em {
      text-decoration: underline;
    }
  }
}
</style>
