import { Component, Emit, Prop, Inject } from 'vue-property-decorator';
import { ViewContainerBase } from './view-container-base';
import { addGlobalHeader } from '@ibizstudio/api';

/**
 * 视图壳插件工具专用
 *
 * @export
 * @class AppIndexViewShell2
 * @extends {ViewContainerBase}
 */
@Component({})
export class AppIndexViewShell2 extends ViewContainerBase {
    /**
     * 数据变化
     *
     * @param {*} val
     * @returns {*}
     * @memberof AppIndexViewShell
     */
    @Emit()
    viewDatasChange(val: any): any {
        return val;
    }

    /**
     * 视图静态参数
     *
     * @type {string}
     * @memberof AppIndexViewShell
     */
    @Prop() declare staticProps: any;

    /**
     * 视图动态参数
     *
     * @type {string}
     * @memberof AppIndexViewShell
     */
    @Prop() declare dynamicProps: any;

    /**
     * 视图默认使用
     *
     * @type {string}
     * @memberof AppIndexViewShell
     */
    @Inject({ from: 'navModel', default: 'tab' })
    navModel!: string;

    /**
     * Vue声明周期
     *
     * @memberof AppIndexViewShell
     */
    created() {
        if (this.$route && this.$route.matched && this.$route.matched.length > 0) {
            let indexRoute: any = this.$route.matched.find((item: any) => {
                return item?.meta?.dynaModelFilePath;
            });
            if (indexRoute) {
                this.dynaModelFilePath = indexRoute.meta.dynaModelFilePath;
            }
        }
        if (this.$route.params) {
            const keys = Object.keys(this.$route.params);
            addGlobalHeader('srfcontainer', this.$route.params[keys[0]]);
            const appData = this.$store.getters.getAppData();
            Object.assign(appData.context, { srfcontainer: this.$route.params[keys[0]] });
            this.$store.commit('addAppData', appData);
        }
        this.loadDynamicModelData();
    }
    
    /**
     * 组件加载完成
     *
     * @memberof AppIndexViewShell
     */
    mounted() {
        this.appLoadingDestroyed();
    }

    /**
     *  应用loading销毁
     *
     * @memberof AppIndexViewShell
     */
    appLoadingDestroyed() {
        setTimeout(() => {
            const el = document.getElementById('app-loading-x');
            if (el) {
                el.style.display = 'none';
            }
        }, 300);
    }

    /**
     * 视图绘制
     *
     * @memberof AppIndexViewShell
     */
    render() {
        return <router-view></router-view>;
    }
}