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

/**
 * 应用首页视图基类
 *
 * @export
 * @class AppIndexViewBase
 * @extends {IndexViewBase}
 */
export default class AppIndexViewBase extends IndexViewBase {

	/**
	 * 视图标识
	 *
	 * @type {string}
     * @protected
	 * @memberof AppIndexViewBase
	 */
	protected viewtag: string = '937C421C-8112-42D4-97A6-2AA5FE56EEDD';

    /**
     * 视图模型数据
     *
     * @type {*}
     * @memberof AppIndexViewBase
     */
    public model: any = {
        srfTitle: '应用首页视图',
        srfCaption: 'app.views.appindexview.caption',
        srfSubCaption: '',
        dataInfo: ''
    }

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


    public render(): any {
        return (<div class="app-container">
            <app-layout viewName="appindexview" viewTitle="应用首页视图" className={{ index_view: true }}>
        <template slot="headerLeft">
          <div class="app-header-left">
            <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"
          />

            </div>
            <div class="content" style="width: calc(100% - 240px)">
              <router-view></router-view>
            </div>
          </div>
        </template>
      </app-layout>

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

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