<template>
    <div class="ep_view">
        <div class="ep_web_title">
            {{ title }}
        </div>
        <i :class="loading?'el-icon-loading':'el-icon-refresh-right'" class="flush" v-if="src" @click="flush"></i>
        <div class="ep_view_content">
            <div class="ep_flex_content">
                <el-carousel v-if="type==='image'"
                             class="ep_iframe"
                             width="100%"
                             height="100%"
                             :loop="false"
                >
                    <el-carousel-item v-for="item in images" :key="item">
                        <el-image :src="item">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
                <div v-if="type==='iframe'">
                    <div v-if="renderIframe" class="ep_iframe">
                        <iframe :src="src"
                                @load="iframeLoad"
                                scrolling="auto"
                                seamless
                                frameborder="no"
                                border="0"
                                width="100%"
                                height="100%"
                        ></iframe>
                    </div>
                </div>
                <div v-if="type==='slot'" class="ep_slot">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            loading: false,
            renderIframe: true,
        }
    },
    props: {
        title: {
            type: String,
            default: "预览"
        },
        type: {
            type: String,//image iframe slot
            default: "slot"
        },
        src: {
            type: String,
            default: ""
        },
        images: {
            type: Array,
            default: () => []
        },
    },
    watch: {
        src: {
            immediate: true,
            handler(newV, oldV) {
                this.renderIframe = !!newV;
                if (!newV) return;
                this.loading = true;
                this.$nextTick(() => {
                    this.iframe = this.$el.getElementsByTagName("iframe")[0];
                })
            }
        }
    },
    mounted() {
    },
    methods: {
        flush() {
            if (this.loading) return;
            this.loading = true;
            this.renderIframe = false;
            this.$nextTick(() => {
                this.renderIframe = true;
            })
        },
        iframeLoad() {
            if (this.src) this.loading = false;
        }
    }
}
</script>

<style scoped lang="less">

.ep_view {
    width: 403px;
    height: 762px;
    background: url("./ep_mobile_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .flush {
        position: absolute;
        right: 30px;
        top: 49px;
        font-size: 20px;
        cursor: pointer;
    }

    .ep_web_title {
        position: absolute;
        left: 50px;
        right: 50px;
        top: 44px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ep_view_content {
        position: absolute;
        width: 375px;
        height: 667px;
        margin: 76px auto 0 14px;
        background: #ffffff;
        border-radius: 0 0 35px 35px;
        overflow: hidden;

        .ep_flex_content {
            min-height: 667px;
            overflow-y: auto;
            display: flex;
            align-items: center;

            .ep_iframe {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                overflow: hidden;
                width: 100%;
                height: 667px
            }

            .ep_slot {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                overflow-y: auto;
                width: 100%;
                height: 667px
            }
        }

    }
}
</style>
