<!-- webview only -->
<template>
    <section class="bl___webview-container"></section>
</template>

<script>
const parseDataset = function (dataset) {
    let result = {};
    for (let key in dataset) {
        try {
            result[key] = JSON.parse(dataset[key]);
        } catch (e) {
            result[key] = dataset[key];
        }
    }
    return result;
};

export default {
    name: 'Bili_WebView',
    props: {
        src: {
            type: String,
            default: ''
        }
    },
    watch: {
        src(value) {
            this.postMessage();
        },
    },
    mounted() {
        this.postMessage();
    },
    methods: {
        postMessage() {
            const options = {
                name: 'webview',
                id: this._uid,
                destroy: false,
                src: this.src
            };

            if (!window.webviewComponent) {
                window.webviewComponent = this;
            }

            SmallApp.nativeComponent(options);
        },
        handleMessage(message) {
            if (message.type === 'native-component') {
                const elementInfo = { id: this.$el.id, dataset: parseDataset(this.$el.dataset) };
                this.$emit(message.event.type, Object.assign({ target: elementInfo, currentTarget: elementInfo }, message.event));
            }
        }
    },
    destroyed() {
        const options = {
            name: 'webview',
            id: this._uid,
            destroy: true
        };

        delete window.webviewComponent;

        SmallApp.nativeComponent(options);
    }
}
</script>

<style>
</style>
