<script lang='tsx'>
import { Prop, Provide, Emit, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { IndexViewBase } from '@/crm-core';

/**
 * iBizEAM基类
 *
 * @export
 * @class AppIndexBase
 * @extends {IndexViewBase}
 */
export default class AppIndexBase extends IndexViewBase {

	/**
	 * 视图标识
	 *
	 * @type {string}
     * @protected
	 * @memberof AppIndexBase
	 */
	protected viewtag: string = 'b9b3c2b39c97ba3485d12d9c376d7d33';

    /**
     * 视图模型数据
     *
     * @type {*}
     * @memberof AppIndexBase
     */
    public model: any = {
        srfTitle: 'iBizEAM',
        srfCaption: 'app.views.appindex.caption',
        srfSubCaption: '',
        dataInfo: ''
    }

    /**
     * 抽屉状态
     *
     * @type {boolean}
     * @memberof AppIndexBase
     */
    public contextMenuDragVisiable: boolean = false;

    /**
     * 是否支持应用切换
     *
     * @type {boolean}  false
     * @memberof AppIndexBase
     */
    public isEnableAppSwitch: boolean = true;

    /**
     * 容器模型
     *
     * @type {*}
     * @memberof AppIndexBase
     */
    public containerModel: any = {
        view_appmenu: { name: 'appmenu', type: 'APPMENU' },
    };


    public render(): any {
        return (<div class="app-container">
            <app-layout viewName="appindex" viewTitle="iBizEAM" className={{ index_view: true }}>
        <template slot="headerLeft">
          <div class="app-header-left">
            {this.isEnableAppSwitch?<span class="ibiz-menu-icon" onClick={()=>{this.contextMenuDragVisiable=!this.contextMenuDragVisiable}}><i class="ivu-icon ivu-icon-md-menu"></i></span>:<span></span>} 
            <img class="logo" src="./assets/img/logo.png" />
            <div class="app-name">{this.$t(this.model.srfCaption)}</div>
          </div>
        </template>
        <template slot="headerRight">
          <div class="app-header-right">
            <app-top-menus />
          </div>
        </template>
        <template slot="content">
          <div class="crm-app-content">
            <div class="inedx-app-menus">
          <view_appmenu
            viewState={this.viewState}
            viewparams={this.viewparams}
            context={this.context}
            showBusyIndicator={true}
            on-menus-change={(menus: any[]) => this.appMenusChange(menus)}
            name="appmenu"
            ref="appmenu"
          />

              {this.isEnableAppSwitch?<context-menu-drag contextMenuDragVisiable={this.contextMenuDragVisiable}></context-menu-drag>:<div></div>}
            </div>
            <div class="content" style="width: calc(100% - 240px)"  on-click={() =>{this.contextMenuDragVisiable=false}}>
              <router-view></router-view>
            </div>
          </div>
        </template>
      </app-layout>

        </div>);
    }
}
</script>

<style lang='less'>
@import './app-index.less';
</style>