<template>
    <div class="authImage-container" :style="props.style">
        <!-- native UI -->
        <div class="image-container" :style="props.style" v-if="props.type == 'native'">
            <div class="image-operate"  @click="handlerPreviewImage" v-if="props.preview" >
                <div class="icon-box">
                    <EyeOutlined />
                    预览
                </div>
            </div>
            <img :id="id" src="" alt="">
        </div>
        <!-- ant design UI -->
        <div class="ant-image-container" :style="props.style" v-if="props.type == 'ant'">
            <a-image
                @click="handlerPreviewImage"
                :style="props.style"
                :src="blobUrl"
                :preview="props.preview"
            />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { generateUUID } from '@/components/MapboxMaps/src/tool';
import {ref,defineProps,defineEmits} from 'vue';
import {EyeOutlined} from "@ant-design/icons-vue"
const id = ref(generateUUID());

const blobUrl = ref("");

const emits = defineEmits(["perviewImage"]);

const props = defineProps({
    type:{
        type:String,
        default:"native"
    },
    src:{
        type:String,
        default:"/default.png",
    },
    style:{
        type:Object,
    },
    preview:{
        type:Boolean,
        default:true
    }
})

// 请求获取图片
let token =  localStorage.getItem("X-Token");
let authSrc = props.src
try{
    let request = new XMLHttpRequest();
    request.responseType = "blob";
    request.open("get",authSrc, true);
    request.setRequestHeader("X-Token",token);
    request.setRequestHeader("Access-Control-Allow-Origin","*");
    request.onreadystatechange = (e) => {
        if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
            blobUrl.value =  URL.createObjectURL(request.response);
            document.getElementById(id.value).src =blobUrl.value;
            document.getElementById(id.value).onload = () => {
                URL.revokeObjectURL(document.getElementById(id.value));
            };
        }else{
            // 如果请求图片失败
            document.getElementById(id.value).src = "/default.png"
        }
    };
    request.send(null);
}catch(e){

}

// 点击图片，返回图片src地址
function handlerPreviewImage():void{
    emits("perviewImage",blobUrl.value);
}

</script>

<style scoped>
.authImage-container{
    width:100%;
    height:100%;
    display:inline-block;
}
.image-container{
    width:100%;
    height:100%;
    position:relative;
    cursor:pointer;
    transition: all 0.3s;
    background:#fff;
    display:inline-block;
}

.ant-image-container{
    width:100%;
    height:100%;
    position:relative;
    cursor:pointer;
    display:inline-block;
}

.image-operate{
    display: none;
    width:100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.4);
    line-height:100%;
    color:#fff;
    text-align: center;
    transition: all 0.3s;
}
.icon-box{
    min-width:50px;
    height:40px;
    line-height:40px;
    text-align: center;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    transition: all 0.3s;
}
.image-container:hover .image-operate{
    display: block;
    transition: all 0.3s;
}
img{
    width:100%;
    height:100%;
}
::v-deep .ant-image-img{
    width:100%;
    height:100%;
}
</style>