<template>
    <!-- 图纸展示 -->
    <div class="content">
        <el-image class="image-full" :src="imageData.base64" :fit="fit">
            <template #error>
                <div class="error-slot">
                    {{ imageData.errMsg }}
                </div>
            </template>
        </el-image>
    </div>
</template>
<script setup>
// 导入
import store from '@/store'
import { getImageOfWork } from '@/api/kateWork.js'
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
// 声明变量
let timer = ref()
const standId = store.getters.getStandId
const userName = store.getters.getUserName
const fit = 'contain'
let imageData = reactive({
    url: '',
    base64: '',
    name: '',
    errMsg: ''
})
// 声明系统方法
onMounted(() => {
    // findImage()
    timer.value = setInterval(() => {
        findImage()
    }, 1000)
})
onBeforeUnmount(() => {
    clearInterval(timer.value)
})
// 声明自定义方法
// 查询图纸
const findImage = () => {
    const request = {
        standId: standId,
        userName: userName
    }
    getImageOfWork(request).then(res => {
        const response = res.data
        if (response.code == 0) {
            const image = response.data
            openPreview(image)
        } else {
            closePreview(response.message)
        }
    }).catch(err => {
        console.log(err)
        closePreview("发生异常，请刷新界面并重试。")
    })
}
// 打开图纸
const openPreview = (image) => {
    imageData.url = image.imageIp + image.imagePath + image.imageName
    imageData.base64 = 'data:image/png;base64,' + image.imageDetail
    imageData.name = image.imageName
    imageData.errMsg = ''
}
// 关闭图纸
const closePreview = (errMsg) => {
    imageData.url = ''
    imageData.base64 = ''
    imageData.name = ''
    imageData.errMsg = errMsg
}
</script>
<style scoped>
.content {
    width: 100%;
    height: 100%;
}

.image-full {
    width: 100%;
    height: 100%;
}

.image-full .error-slot {
    color: red;
    font-size: 50px;
    font-weight: bold;
}
</style>