<template>
   <div class="file_card">
       <div class="left">
           <div class="upload_status upload_loading" v-if="uploadProgress <= 100 && uploadProgress  >= 0 && !fileUrl">正在上传... {{uploadProgress == 100? 99.99 : uploadProgress}}%</div>
           <div class="upload_status upload_fail" v-if="uploadProgress == -1">上传失败  <span class="reupload" @click="uploadFile(fileData.file)">重新上传</span></div>
           <div class="upload_status upload_success" v-if=" fileUrl">上传成功</div>
           <div class="file_name">{{fileData.fileName}}</div>
           <div class="file_hash">文件哈希: {{fileData.fileHash}}</div>
       </div>
       <div class="right" @click="deleteFile()">
           <Icon name="icon-shanchu" size="18px" color="#2B446C"></Icon>
       </div>
   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/

interface FileData {
    fileName: string;
    fileHash: string;
    file: File;
    fileUrl: string;
}
export default Vue.extend({
   name:'',
   data(){
       return {
           uploadProgress: 0,
           fileUrl: ''
       }
   },
   props: {
       fileData: {
           default: {} as FileData,
           required: true,
       },
       limit: {
           required: true,
           type: Boolean
       }
   },
   components: {
       Icon: ()=>import('@/components/common/Icon.vue')
   },
   async mounted(){
       /**挂载完, 如果没有文件地址就上传文件 */
       if(!this.fileData.fileUrl) {
           await this.uploadFile(this.fileData.file)
       }else {
           this.uploadProgress = 100
           this.fileUrl = this.fileData.fileUrl
       }
   },
   methods: {
       /**上传文件,上传了之后给文件对象添加一个文件地址 */
       async uploadFile(file: File){
           /**两个上传接口,一个是做了限制，一个没有限制 */
           if(this.limit) {
               this.fileUrl = await this.$service.copyrightService.uploadCopyrightFile(file, this.updateUploadStatus)
           }else {
               this.fileUrl = await this.$service.nftService.fileUpload(file, this.updateUploadStatus)
           }
           if(this.fileUrl) {
               this.$emit('addFileUrl', {fileHash: this.fileData.fileHash, fileUrl: this.fileUrl})
           }else {
               this.uploadProgress = -1
           }
       },
       /**删除文件 */
       deleteFile(){
           this.$emit('deleteFile', this.fileData.fileHash)
           this.$service.copyrightService.deleteFile(this.fileUrl)
       },
       /**定义修改上传进度的参数 */
       updateUploadStatus(progress: any){
           this.uploadProgress = Number((100*(progress.loaded)/(progress.total)).toFixed(2))
       }
   }
})
</script>

<style scoped lang='less'>
.file_card {
    padding: 10px;
    display: flex;
    border-radius: 10px;
    border: 1px solid #F5F5F5;
    .left {
        flex: 1;
        .upload_status {
            font-size: 12px;
            line-height: 25px;
        }
        .upload_loading {
            color: #6377FF
        }
        .upload_fail {
            color: #F68585;
            .reupload {
                color: #6377FF;
            }
        }
        .upload_success {
            color: #51AB8C
        }
        .file_name {
            font-size: 14px;
            color: #2B446C;
            line-height: 25px;
        }
        .file_hash {
            font-size: 12px;
            color: #7388AB;
            line-height: 25px;
        }

    }
    .right {

    }
}
</style>