<template>
    <div class="img-edit-wrap" @paste="handleListenPaste">
        <div style="font-size:16px;margin-bottom:20px">图片上传</div>
        <div class="main-box">
            <input type="file" size="small" name="file" @change="fileSelected" id="file" class="true-file" style="display:none;">
            <div class="upload-box" @click="clickinput">
                <img class="bg" :src="content" alt="" v-if="content">
                <img src="~@/assets/img/smartReport/icon15.png" alt="">
                <div>点击上传图片</div>
            </div>
        </div>
    </div>
</template>

<script>
import { bannerupload } from 'api/api.js';
export default {
    name:'ImgEdit',
    props:{
        content:''
    },
    created() {
        window.addEventListener('paste',this.handleListenPaste)
    },
     
    destroyed(){
        window.removeEventListener('paste',this.handleListenPaste)
    },
    methods: {
        clickinput(){  //上传模拟点击
			$(`#file`).click();
		},
        fileSelected(file){  //选择文件上传
            let hostfile=document.getElementById('file').files[0]||file
			const that = this;
		    if( hostfile ){
		        let size = Math.floor(hostfile.size / 1024 / 1024);
		        if( size>200 ){
		            that.$message.warning('上传文件大小不能大于200M！');
		            hostfile = {};
		            return false
		        }
		        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
		        	let form = new FormData();
		        	form.append('file',hostfile);  //hostfile.name
					bannerupload(form).then((res) => {
						if( res.Ret === 200 ){
							that.$emit('imgChange', res.Data.ResourceUrl)
                            that.content=res.Data.ResourceUrl
						}
						$("#file").val('');
						hostfile = {};
					});
				}else{
					that.$message.warning('上传文件格式不正确！');
		        }
		    } 
		},

        handleListenPaste:_.throttle(async function(e){
            if(!e.clipboardData) return
            const clipboardDataItems = e.clipboardData.items
            const clipboardDataFirstItem = clipboardDataItems[0]
            if(clipboardDataFirstItem){
                for (const item of clipboardDataItems) {
                    if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
                        const imageFile = item.getAsFile()
                        console.log('读取成功1',imageFile);
                        if (imageFile) this.fileSelected(imageFile)
                        return
                    }
                }
                return
            }
            //clipboardData中没有图片，从navigator.clipboard.read里获取图片
            let clipboardItems = null
            try{
                clipboardItems = await navigator.clipboard.read()
            }catch(error){
                this.$message.warning("剪贴板读取不到文件!")
                return
            }
            const blob = await this.checkClipboardItems(clipboardItems)
            console.log('读取成功2',blob);
            if(blob) this.fileSelected(blob)

        },1000),

        checkClipboardItems(clipboard){
            for(const Item of clipboard){
                for(const type of Item.types){
                    if(type.includes('image')){
                        return Item.getType(type)
                    }
                }
            }
            return null
        }
    },



}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}

.main-box{
    width: 100%;
    height: calc(100vh - 150px);
    border-radius: 4px;
    border: 1px solid var(--gary-gy-5-line, #C8CDD9);
    background: #FFF;
    padding: 30px;
    .upload-box{
        cursor: pointer;
        width: 120px;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed var(--gary-gy-5-line, #C8CDD9);
        background: var(--gary-gy-1-bottom-bk, #F8F8F8);
        color: #999;
        position: relative;
        .bg{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            background: #FFF;
        }
    }
}
</style>