<!--
 * @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\upLoad.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-29 08:42:02
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<el-dialog :title="config.title" v-model="config.openDialog" :width="config.width" append-to-body>
         <el-upload
            ref="uploadRef"
            :limit="config.limit"
            :accept="config.accept.join(',')"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-error="handleUploadError"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
         >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>,文件大小不得超过5MB</div>
         </el-upload>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFileForm">确 定</el-button>
               <el-button @click="config.openDialog = false">取 消</el-button>
            </div>
         </template>
      </el-dialog>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref} from "vue"
import type { UploadInstance } from 'element-plus'
import { getToken } from "@/utils/auth";
const {  proxy } = getCurrentInstance() as any;
const prop = defineProps({
uploadConfig:{
    type:Object,
    default:{
        //上传文件的类型限制
        accept:[''],
         // 弹出层标题
        title:"",
        //弹出层宽度
        width:'400px',
         // 是否显示弹出层
        openDialog:false,
        //上传文件的数量限制
        limit:1,
        multiple:false
    }
}
});
//实现父子组件数据双向绑定
const config = computed({
  get: () => prop.uploadConfig,
  set: val => {
    emit('update:uploadConfig', val)
  },
})
const emit = defineEmits(['update:uploadConfig','uploadFileFun'])
let uploadRef = ref<UploadInstance | null>(null)
const upload = reactive({
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers:{ Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
});
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
const handleUploadError=()=>{
  proxy.$modal.msgError("上传文件失败");
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  console.log("我成功了");
  
  config.value.openDialog = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$modal.msgSuccess("上传文件成功");
};

// //处理超出文件个数操作
// const handleExceed=(files, fileList)=>{
        
//       }
// //处理文件上传操作
// const handleFileUpload=(file)=>{
//     emit("uploadFileFun",file);
// }
//点击确认上传
const submitFileForm=()=>{
    uploadRef.value?uploadRef.value.submit():''
}
</script>

<style lang="scss" scoped>

</style>
