<template>
    <div class="hc-pdf-box" :class="ui">
        <div class="pdf-embed" v-if="url">
            <embed :src="url" width='100%' height='100%' type="application/pdf"/>
        </div>
        <div class="pdf-embed hc-no-table-form" v-else>
            <div class="table-form-no">
                <img :src="notableform" alt=""/>
                <div class="desc">暂无 PDF 数据</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";
import notableform from '~src/assets/view/notableform.svg';
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    src: {
        type: String,
        default: ''
    },
})

const url = ref(props.src ?? '');

//监听
watch(() => [
    props.src
], ([src]) => {
    url.value = src ?? '';
})

</script>

<style lang="scss" scoped>
.hc-pdf-box, .pdf-embed {
    position: relative;
    height: 100%;
    width: 100%;
}

.hc-no-table-form {
    display: flex;
    justify-content: center;
    align-items: center;
    .table-form-no {
        position: relative;
        img {
            width: 350px;
        }
        .desc {
            text-align: center;
            font-size: 20px;
            color: #aaa;
        }
    }
}
</style>
