<template>
  <div class="upload">
    <YaUpload
      :limit="1"
      :file-list="fileList.length > 0 ? fileList : []"
      @handleChangeUpload="handleChange"
      :auto-upload="autoUpload"
      :showUploadTip = false
      :uploadInfo="{
        text:''
      }"
      drag
      ref="uploadRef"
      :sizeName="sizeName"
    >
    </YaUpload>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, defineProps, watchEffect, unref } from 'vue';
import { ElMessageBox, ElMessage, FormRules } from "element-plus";
interface props {
  title?: string,
  sizeName?: string | number,
  sendUrl?: Function,
  autoUpload?:Boolean
}
const {
  title = '可拖拽或点击上传文件',
  sizeName = '',
  sendUrl = (name) => name,
  autoUpload = false
} = defineProps<props>()
const emit = defineEmits(["onList"]);

const fileList = ref([]);
const beforeAvatarUpload = (file) => {
  let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
  const extension2 = testmsg === "xlsx";
  // if (!extension2) {
  //   ElMessage.error("文件只能上传xlsx格式");
  //   return false;
  // } else if (file.size / 1024 / 1024 > 200) {
  //   ElMessage.error("单个文件最多只能上传200MB!");
  //   nextTick(() => {
  //     let _data = fileList.value.findIndex((item) => {
  //       return item.name == file.name;
  //     });
  //     fileList.value.splice(_data, 1);
  //   });

  //   return false;
  // }
  return true;
};
const handleChange = async (uploadFile, uploadFiles) => {
  fileList.value = [];
  console.log(fileList.value);
  let flg = beforeAvatarUpload(uploadFile);
  if (flg) {
    let fd = new FormData();
    fd.append("file", uploadFile.raw);
    let res = await sendUrl(fd);
    if (res.code == 200) {
      ElMessage.success(res.message)
      emit('onList')
    } else {
      // let _data = fileList.value.findIndex((item) => {
      //   return item.name == uploadFile.name;
      // });
      // fileList.value.splice(_data, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .ya-upload .el-upload-dragger {
  background: rgba(28,146,208,0.05);
  padding: 16px 0 !important;
}
::v-deep .yaUpload .ya-upload .upload-icon svg {
  fill: rgba(52, 102, 128, 1);
}
.upload {
  width: 100%;
  // height: 100px;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // background: rgba(28,146,208,0.05);
  // border-radius: 4px;
  // border: 1px dashed #BAC8CD;
  // font-weight: 400;
  // color: #174659;
  // font-size: 14px;
  // .flex-st {
  //   display: flex;
  //   align-items: flex-start;
  //   img {
  //     width: 21px;
  //     height: 16px;
  //     margin-right: 6px;
  //   }
  //   .title {
  //     margin-bottom: 7px;
  //   }
  // }
}
</style>