import { Component, Vue, Prop } from 'vue-property-decorator';
import { IDesignDefaultContext } from '../../interface';
import './design-preview-content.less';

@Component
export class DesignPreviewContent extends Vue {
    /**
     * 上下文
     *
     * @type {IDesignDefaultContext}
     * @memberof DesignPreviewContent
     */
    @Prop()
    ctx!: IDesignDefaultContext;

    /**
     * 记录开始时间   单位：毫秒
     *
     * @type {number}
     * @memberof DesignPreviewContent
     */
    startTime: number = 0;

    /**
     * 距离开始任务时间  单位：毫秒
     *
     * @type {number}
     * @memberof DesignPreviewContent
     */
    consumeTime: number = 0;

    /**
     * 计数定时器id，用于销毁定时器
     *
     * @type {number}
     * @memberof DesignPreviewContent
     */
    timerId: any;

    /**
     * 嵌入iframe地址
     *
     * @type {string}
     * @memberof DesignPreviewContent
     */
    url: string = '';

    /**
     * 加载状态
     *
     * @type {boolean}
     * @memberof DesignPreviewContent
     */
    isLoading: boolean = false;

    /**
     * 错误信息
     *
     * @type {string}
     * @memberof DesignPreviewContent
     */
    errorMessage: string = '';

    /**
     * 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: any) {
        this.errorMessage = event.message;
        this.$throw(event.message);
    }

    /**
     * 警告
     *
     * @memberof PreviewContent
     */
    previewWarn(event: any) {
        this.$throw(event.message);
    }

    /**
     * 预览任务成功
     *
     * @param {string} path
     * @memberof PreviewContent
     */
    previewSuccess(path: string | undefined) {
        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>
        );
    }
}