<template>
    <div class="img_item">
        <div class="img_tip">{{imgUploadData.title}}</div>
        
            <div class="img_box">
                <img v-if="uploadStatus == eStatus.init" class="bg_img" :src="imgUploadData.bgImgUrl" alt="">
                <img v-if="uploadStatus == eStatus.success" class="bg_img" :src="uploadImgUrl" onerror="this.src='/img/attorney.png'" alt="">
                <label :for="imgUploadData.title">
                    <img v-if="uploadStatus == eStatus.init" class="action_img" src="@/assets/img/camera.png" alt="">
                </label>
                <div class="res_box" v-if="uploadStatus == eStatus.success">
                    <div class="toast"></div>
                    <div class="action_img">
                        <img src="@/assets/img/camera_success.png" alt="">
                        <div>上传成功</div>
                    </div>
                    <label :for="imgUploadData.title">
                        <div class="reup_btn">重新上传</div>
                    </label>
                </div>
                <div class="res_box" v-if="uploadStatus == eStatus.fail">
                    <div class="toast"></div>
                    <div class="action_img">
                        <img src="@/assets/img/camera_fail.png" alt="">
                        <div>上传失败</div>
                    </div>
                    <label :for="imgUploadData.title">
                        <div class="reup_btn">重新上传</div>
                    </label>
                </div>
            </div>

        <input :id="imgUploadData.title" type="file" hidden @change="onUpload">
    </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
enum eStatus {
    init,
    success,
    fail,
}
interface ImgUploadDataType {
    title: string,
    bgImgUrl: string
}
export default Vue.extend({
   name:'',
   props: {
       imgUploadData: {
           default: ()=>{return {} as ImgUploadDataType},
           required: true
       },
       xKey: {
           required: true,
           type: Number
       }
   },
   data(){
       return {
           imgData: '',
           uploadStatus: eStatus.init,
           uploadImgUrl: '',
           eStatus
       }
   },
   methods: {
       async onUpload(e: {target: {files: File[], value: any}}){
           if(e.target.files.length <= 0) return
           const fileUrl = await this.$service.nftService.fileUpload(e.target.files[0])
           if(fileUrl){
               this.uploadStatus = eStatus.success
               this.uploadImgUrl = window.URL.createObjectURL(e.target.files[0])
               console.log( this.uploadImgUrl)
               this.$emit('onUpload', {imgName: e.target.files[0].name, imgUrl: fileUrl, title: this.imgUploadData.title})
           }else {
               this.uploadStatus = eStatus.fail
           }
       }
   }
})
</script>

<style scoped lang='less'>
    .img_item {
        margin-top: 21px;
        color: #333649;
        .img_tip {}
        .img_box {
            position: relative;
            width: 258px;
            height: 156px;
            border-radius: 10px;
            margin: 10px auto 0;
            .bg_img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
            .action_img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50% );
            }
            .res_box {
                color: #fff;
                .toast {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background: #000000;
                    border-radius: 10px;
                    opacity: 0.3;
                }
                .reup_btn {
                    width: 70px;
                    height: 22px;
                    background-color: #7181EF;
                    line-height: 22px;
                    text-align: center;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    border-radius: 11px;
                    font-size: 12px;
                }
            }
        }
    }

</style>