<template>
    <div v-if="false"></div>
</template>

<script>
export default {
    name: 'PageTitle',
    props: {
        title: {
            type: [String, Number],
            default: ''
        },
    },

    data() {
        return {
            pagePath: ''
        }
    },

    activated() {
        this.updateTitle()
    },

    watch: {
        title: {
            handler() {
                this.initTitle()
            },
            immediate: true
        }
    },

    methods: {
        initTitle() {
            this.pagePath = this.$route.path;
            this.updateTitle()
        },

        updateTitle() {
            if (this.pagePath == '') {
                return;
            }
            let pageTitle = this.title;
            let {title} = document;
            if (pageTitle !== title && this.pagePath === this.$route.path) {
                this.setPageTile(pageTitle);
            }
        },

        setPageTile(title) {
            document.title = title;
            let mobile = navigator.userAgent.toLowerCase();
            if (/iphone|ipad|ipod/.test(mobile)) {
                let iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                let iframeCallback = function () {
                    setTimeout(function () {
                        iframe.removeEventListener('load', iframeCallback);
                        document.body.removeChild(iframe)
                    }, 0)
                };
                iframe.addEventListener('load', iframeCallback);
                document.body.appendChild(iframe)
            }
        }
    }
}
</script>
