<template>
  <el-dialog title="批量创建" v-model="dialogVisible" width="500px" destroy-on-close :close-on-click-modal="false">
    <el-upload
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      class="upload-demo"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text"><em>点击</em>或将文件拖拽到这里上传</div>
      <template #tip>
        <div class="tip-text">
          <div class="el-upload__tip">只能上传excel文件，且不超过500KB</div>
          <div class="down el-upload__tip">下载导入模板</div>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
defineExpose({ dialogVisible });
const handleSuccess = (rawFile: any) => {
  console.log(rawFile);
};
const beforeUpload = (rawFile: any) => {
  if (rawFile.size / 1024 > 500) {
    ElMessage.error("文件大小不能超过500KB");
    return false;
  }
  if (rawFile.name.indexOf(".xlsx") === -1 && rawFile.name.indexOf(".xls‌") === -1) {
    ElMessage.error("只能上传excel文件");
    return false;
  }
};
</script>

<style scoped>
.tip-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.down {
  cursor: pointer;
  text-decoration: underline;

  color: #409eff;
}
</style>
