import { LogUtil, ViewTool } from 'ibiz-core';
import qs from 'qs';
import { Vue, Prop, Component, Watch } from 'vue-property-decorator';
import { ViewCacheService } from '../../../app-service';
/**
 * 导航占位
 *
 * @export
 * @class AppNavPos
 * @extends {Vue}
 */
@Component({})
export class AppNavPos extends Vue {

    /**
     * 动态导航模式(DYNAMICCOMP:动态组件 ROUTEVIEW:路由出口)
     *
     * @public
     * @type {'DYNAMICCOMP' | 'ROUTEVIEW'}
     * @memberof AppNavPos
     */
    @Prop({ default: 'ROUTEVIEW' }) public dynaNavMode?: 'DYNAMICCOMP' | 'ROUTEVIEW';

    /**
     * 是否启用动态缓存
     *
     * @type {boolean}
     * @memberof AppNavPos
     */
    @Prop({ default: false }) public enableCache?: boolean;

    /**
     * 导航数据
     *
     * @type {*}
     * @memberof AppNavPos
     */
    @Prop() public navData?: any;

    /**
     * 监听enableCache
     *
     * @memberof AppNavPos
     */
    @Watch('enableCache', { immediate: true })
    enableCacheChange() {
        ViewCacheService.enableCache = this.enableCache || false;
    }

    /**
     * 路由列表
     *
     * @memberof AppNavPos
     */
    get routerList() {
        let historyPathList: string[] = [];
        if (this.$store.state.historyPathList && this.$store.state.historyPathList.length > 0) {
            this.$store.state.historyPathList.forEach((historyPath: string) => {
                if (historyPath && historyPath.indexOf('?') > -1) {
                    const { startPath, viewParams } = ViewTool.getViewParamsByPath(historyPath);
                    delete viewParams.srfnav;
                    // 除srfnav外还有其他参数
                    if (Object.keys(viewParams).length > 0) {
                        const tempPath = `${startPath}?${encodeURIComponent(qs.stringify(viewParams, { delimiter: ';' }))}`;
                        if (!historyPathList.includes(tempPath)) {
                            historyPathList.push(tempPath);
                        }
                    } else {
                        if (!historyPathList.includes(startPath)) {
                            historyPathList.push(startPath);
                        }
                    }
                } else {
                    if(!historyPathList.includes(historyPath)){
                        historyPathList.push(historyPath);
                    }
                }
            });
        }
        return historyPathList;
    }

    /**
     * 路由键值
     *
     * @memberof AppNavPos
     */
    get routerViewKey() {
        let _this: any = this;
        let activedPath = _this.$route.fullPath;
        if (activedPath && activedPath.indexOf('?') > -1) {
            const {startPath, viewParams} = ViewTool.getViewParamsByPath(activedPath);
            if (viewParams.hasOwnProperty('srfnav')) {
                delete viewParams.srfnav;
                if (Object.keys(viewParams).length > 0) {
                    activedPath = `${startPath}?${encodeURIComponent(qs.stringify(viewParams, { delimiter: ';' }))}`;
                } else {
                    activedPath = startPath;
                }
                
            }
        }
        return activedPath;
    }

    /**
     * 执行视图事件
     *
     * @param {*} args
     * @memberof AppNavPos
     */
    public handleViewEvent(args: any) {
        LogUtil.log(args);
    }

    /**
     * 绘制内容
     *
     * @memberof AppNavPos
     */
    public render(): any {
        return (
            <div class="app-nav-pos">
                {
                    // 路由出口
                    Object.is(this.dynaNavMode, 'ROUTEVIEW') ?
                        this.enableCache ?
                            [
                                <app-keep-alive routerList={this.routerList}>
                                    <router-view key={this.routerViewKey}></router-view>
                                </app-keep-alive>,
                                <app-view-cache></app-view-cache>
                            ] :
                            <router-view key={this.routerViewKey}></router-view> :
                        // 动态组件
                        this.navData ? this.$createElement('app-view-shell', {
                            key: this.navData?.context.viewpath,
                            props: {
                                staticProps: {
                                    viewDefaultUsage: false
                                },
                                dynamicProps: {
                                    viewdata: JSON.stringify(this.navData.context),
                                    viewparam: JSON.stringify(this.navData.viewparams)
                                }
                            },
                            class: "view-container2",
                            on: {
                                viewdataschange: this.handleViewEvent.bind(this),
                                viewLoaded: this.handleViewEvent.bind(this),
                                viewstatechange: this.handleViewEvent.bind(this)
                            }
                        }) : null
                }
            </div>
        )
    }
}