<template>
    <div class="preview">
        <iframe v-if="type == 'html'" ref="iframe" :src="$props.src" style="width: 100%; height: 500px;" />
        <el-image v-if="type == 'image'" ref="iframe" :src="$props.src" style="width: 100%; height: 500px;" />
    </div>
</template>
<script>
export default {
    name: "PreView",
    props: {
        src: "",
    },
    watch: {
        $props: {
            handler: function (val) {
                console.log('change', val)
            },
            deep: false,
        }
    },
    data() {
        return {
            type: ""
        }
    },
    watch: {
        '$props.src'() {
            this._isCheckType();
        }
    },
    methods: {
        _isImagePath(path) {
            return /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/i.test(path);
        },
        _isCheckType() {
            if (this._isImagePath(this.$props.src)) {
                this.type = 'image'
            } else {
                this.type = 'html'
            }
        }
    },
    created() {
        this._isCheckType();
    }
}
</script>
<style scoped lang="scss">
.preview {

    iframe,
    .el-image__inner {
        height: calc(100%-10px) !important;
        width: calc(100%-10px) !important;
        z-index: -1;
    }
}
</style>