import { __decorate } from "tslib";
import { Component, Vue, Prop } from 'vue-property-decorator';
import './design-preview-content.less';
let DesignPreviewContent = class DesignPreviewContent extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 记录开始时间   单位：毫秒
         *
         * @type {number}
         * @memberof DesignPreviewContent
         */
        this.startTime = 0;
        /**
         * 距离开始任务时间  单位：毫秒
         *
         * @type {number}
         * @memberof DesignPreviewContent
         */
        this.consumeTime = 0;
        /**
         * 嵌入iframe地址
         *
         * @type {string}
         * @memberof DesignPreviewContent
         */
        this.url = '';
        /**
         * 加载状态
         *
         * @type {boolean}
         * @memberof DesignPreviewContent
         */
        this.isLoading = false;
        /**
         * 错误信息
         *
         * @type {string}
         * @memberof DesignPreviewContent
         */
        this.errorMessage = '';
    }
    /**
     * Vue 生命周期，实例创建完成
     *
     * @memberof DesignPreviewContent
     */
    created() {
        const { evt } = this.ctx.previewPSpfService;
        evt.on('start', this.startPreview);
        evt.on('change', this.changePreview);
        evt.on('end', this.endPreview);
        evt.on('error', this.previewError);
        evt.on('warn', this.previewWarn);
        evt.on('success', this.previewSuccess);
    }
    /**
     * 开始预览
     *
     * @memberof PreviewContent
     */
    startPreview() {
        this.isLoading = true;
        this.errorMessage = '';
        const startTime = Date.now();
        this.startTime = startTime;
        this.timerId = setInterval(() => {
            this.consumeTime = Date.now() - this.startTime;
        });
    }
    /**
     * 预览状态发生改变
     *
     * @memberof PreviewContent
     */
    changePreview() {
        //console.log('change');
    }
    /**
     * 结束预览
     *
     * @memberof PreviewContent
     */
    endPreview() {
        clearInterval(this.timerId);
    }
    /**
     * 预览出错
     *
     * @memberof PreviewContent
     */
    previewError(event) {
        this.errorMessage = event.message;
        this.$throw(event.message);
    }
    /**
     * 警告
     *
     * @memberof PreviewContent
     */
    previewWarn(event) {
        this.$throw(event.message);
    }
    /**
     * 预览任务成功
     *
     * @param {string} path
     * @memberof PreviewContent
     */
    previewSuccess(path) {
        this.isLoading = false;
        this.url = encodeURIComponent(path);
        this.$forceUpdate();
    }
    beforeDestroy() {
        const { evt } = this.ctx.previewPSpfService;
        evt.off('start', this.startPreview);
        evt.off('change', this.changePreview);
        evt.off('end', this.endPreview);
        evt.off('error', this.previewError);
        evt.off('warn', this.previewWarn);
        evt.off('success', this.previewSuccess);
    }
    render() {
        const consumeTime = this.consumeTime.toString();
        return (<div class={{ 'design-preview-content': true, mask: this.isLoading }}>
                {this.isLoading ? (this.errorMessage === '' ? (<div>
                            <span>正在加载，当前用时</span>
                            <span class='second'>
                                {(this.consumeTime && consumeTime.length >= 3) > 0
                    ? `${consumeTime.substr(0, consumeTime.length - 3)
                        ? `${consumeTime.substr(0, consumeTime.length - 3)}.`
                        : 0 + '.'}${consumeTime.substr(-3, 3)}`
                    : null}
                            </span>
                            <span>秒</span>
                        </div>) : (<div>{this.errorMessage}</div>)) : this.url !== '' ? (<iframe src={'http://172.16.170.145/dynamictool/mospreview/#/preview/' + this.url}></iframe>) : (<div>暂未预览</div>)}
            </div>);
    }
};
__decorate([
    Prop()
], DesignPreviewContent.prototype, "ctx", void 0);
DesignPreviewContent = __decorate([
    Component
], DesignPreviewContent);
export { DesignPreviewContent };