<template>
    <div class="xmscp-vue-wrapper" ref="xmscpref"></div>
</template>

<script>
    import loadjs from 'loadjs'

    //脚本文件地址
    let scriptUrl = null;


    /**
     * 使用之前，需要动态加载
     */
    function loadPlayer() {
        // 避免重复加载
        if (window.XMSCP) {
            return Promise.resolve()
        }

        if (!loadPlayer.promise) {
            let V = 0;
            if (typeof process !== 'undefined' && process.env) {
                V = process.env.V
            }
            const url = `${scriptUrl}?${V}`;
            // const url = `//xmcdn.oss-cn-shanghai.aliyuncs.com/xm_world/xmscp/xm-scratch-common-player.js?${V}`
            loadPlayer.promise = loadjs([url], {async: false, returnPromise: true})
        }

        return loadPlayer.promise
    }

    /**
     * 封装成Vue组件
     */
    export default {

        name: 'ScratchPlayer',

        props: {
            projectId: { // 文件地址
                type: String,
                default: ''
            },
            sbVersion: { // 作品版本，2 | 3
                type: Number,
                default: 3
            },
            keyboardType: { // 键盘类型。整数， 取值：0，1，2，3，4 。如果不需要键盘传入 -1
                type: Number,
                default: -1
            },
            stageWidth: { // 舞台宽度，m端不需要设置
                type: Number,
                default: 630
            },
            deviceType: { // 区分是否是h5，主要用于模拟键盘
                type: String,
                default: 'pc' // m|pc
            },
            fullScreenBtn: { // 是否显示全屏按钮
                type: Boolean,
                default: true
            }
        },

        mounted: function () {
            this.initPlayerProject(this.projectId)
        },

        /**
         * VUE组件销毁之前，先销毁播放器。
         */
        beforeDestroy: function () {
            const XMSCP = window.XMSCP
            XMSCP.GlobalEventBus.off("KEY_BOARD_HIDE", this._onHideKeyboard)
            XMSCP.GlobalEventBus.off("KEY_BOARD_SHOW", this._onDisplayKeyboard)
            XMSCP.GlobalEventBus.off("STAGE_DID_MOUNT", this._onStageDidMount)
            XMSCP.instanceObj.destroyPlayer()
        },

        /**
         * 组件可以被重复使用,projectId变化了播放器重新初始化
         */
        watch: {
            projectId: function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.initPlayerProject(newVal)
                }
            }
        },

        methods: {

            initPlayerProject: function (projectId) {
                if (!projectId) {
                    return
                }

                // 使用之前，先加载播放器
                loadPlayer().then(() => {
                    const XMSCP = window.XMSCP
                    const xmscpref = this.$refs.xmscpref

                    XMSCP.instanceObj.initPlayerProject({
                        el: xmscpref, // 一个DOM节点的ref
                        projectId: projectId, // 作品文件地址,形如 http://xxxx.com/aaaaaa.sb2
                        sbVersion: this.sbVersion, // 作品scratch版本, 取值： 2或3
                        keyboardType: this.keyboardType, // 键盘类型, 整数， 取值：0，1，2，3，4 。如果不需要键盘传入 -1
                        deviceType: this.deviceType, // 设置类型，播放器用于pc端还是移动端。取值： "pc" || "m"
                        stageWidth: this.stageWidth, // 如果pc模式下，请设置此值。在m端不需要设置
                        fullScreenBtn: this.fullScreenBtn // 是否显示全屏按钮.在m端设置为false
                    })

                    //避免重复监听
                    XMSCP.GlobalEventBus.off("KEY_BOARD_HIDE", this._onHideKeyboard)
                    XMSCP.GlobalEventBus.off("KEY_BOARD_SHOW", this._onDisplayKeyboard)
                    XMSCP.GlobalEventBus.off("STAGE_DID_MOUNT", this._onStageDidMount)

                    XMSCP.GlobalEventBus.on("KEY_BOARD_HIDE", this._onHideKeyboard)
                    XMSCP.GlobalEventBus.on("KEY_BOARD_SHOW", this._onDisplayKeyboard)
                    XMSCP.GlobalEventBus.on("STAGE_DID_MOUNT", this._onStageDidMount)

                }, () => {
                    this.$refs.xmscpref.innerHTML = '加载失败,请刷新页面重试'
                })
            },

            _onStageDidMount: function () {
                this.$emit('onStageDidMount');
            },

            _onHideKeyboard: function () {
                this.$emit('onHideKeyboard');
            },

            _onDisplayKeyboard: function () {
                this.$emit('onDisplayKeyboard');
            }
        },

        setScriptUrl: function (jsUrl) {
            scriptUrl = jsUrl;
        }

    }

</script>