<template>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
    <split id="${ctrl.getCodeName()?lower_case}" class="app-calendar-exp-bar <#if ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>" v-model="split" mode="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>" @on-move-end="onSplitChange">
        <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">left<#else>top</#if>'>
        <#if ctrl.isShowTitleBar()>
            <div class='calendar-exp-bar-header'>
                <div><icon type='ios-home-outline'/><#if ctrl.getTitle() == ''>日历导航栏<#else>${ctrl.getTitle()}</#if></div>
            </div>
        </#if>
           <div class="container-header">
                <#if ctrl.isEnableSearch()>
                <div class='search-container'>
                    <i-input :search="true"
                        @on-change="($event) => { this.searchText = $event.target.value; }"
                        @on-search="onSearch">
                    </i-input>
                </div>
                </#if>
                <#if ctrl.getPSControls()??>
                <#assign controls = ctrl.getPSControls()/>
                <#list controls as singleControl>
                <#if singleControl.getControlType() == "TOOLBAR">
                ${P.getCtrlCode(singleControl, 'CONTROL.html').code}
                </#if>
                </#list>
                </#if>
           </div>
            <div class='<#if ctrl.isShowTitleBar()>calendar-exp-bar-content<#else>calendar-exp-bar-content2</#if>'>
                <#if ctrl.getPSControls()??>
                <#assign controls = ctrl.getPSControls()/>
                <#list controls as singleControl>
                <#if singleControl.getControlType() == "CALENDAR">
                ${P.getCtrlCode(singleControl, 'CONTROL.html').code}
                </#if>
                </#list>
                </#if>
            </div>
        </div>
        <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">right<#else>bottom</#if>'>
            <component 
              v-if="selection.view && !Object.is(this.selection.view.viewname, '')" 
              :is="selection.view.viewname"
              class="viewcontainer2"
              :viewDefaultUsage="false"
              :viewdata="JSON.stringify(selection.data)">
            </component>
        </div>
    </split>
    </#if>
</template>


<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>

    /**
     * 视图唯一标识
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public viewUID!:string;

    /**
     * 是否单选
     * 
     * @public
     * @type {(boolean)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public isSingleSelect:boolean = true;

    /**
     * 呈现模式,可选值:horizontal或者vertical
     * 
     * @public
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public showMode:string ="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>";

    /**
     * 控件宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public ctrlWidth:number = <#if ctrl.getWidth()??>${ctrl.getWidth()}<#else>0</#if>;

    /**
     * 控件高度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public ctrlHeight: number = <#if ctrl.getHeight()??>${ctrl.getHeight()}<#else>0</#if>;

    /**
     * 搜素值
     * 
     * @public
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public searchText:string = "";

    /**
     * 分割宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public split: number = 0.5;

<#if ctrl.getXDataPSControl()??>
<#assign xDataControl = ctrl.getXDataPSControl() />

    /**
     * 导航视图名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public navViewName: any = {
<#if xDataControl.getPSSysCalendarItems()??>
  <#list xDataControl.getPSSysCalendarItems() as calendarItem>
        ${calendarItem.getItemType()}: "<#if calendarItem.getNavPSAppView?? && calendarItem.getNavPSAppView()??><#assign navPSAppView = calendarItem.getNavPSAppView() />${srffilepath2(navPSAppView.getCodeName())}</#if>",
  </#list>
</#if>
    };

    /**
     * 导航视图参数
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public navViewParam: any = {
<#if xDataControl.getPSSysCalendarItems()??>
  <#list xDataControl.getPSSysCalendarItems() as calendarItem>
        ${calendarItem.getItemType()}: '<#if calendarItem.getNavViewParamJO?? && calendarItem.getNavViewParamJO()??>${calendarItem.getNavViewParamJO()}</#if>',
  </#list>
</#if>
    };

    /**
     * 导航过滤项
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
</#if>
    public navFilter: any = {
<#if xDataControl.getPSSysCalendarItems()??>
  <#list xDataControl.getPSSysCalendarItems() as calendarItem>
        ${calendarItem.getItemType()}: "<#if calendarItem.getNavFilter?? && calendarItem.getNavFilter()??>${calendarItem.getNavFilter()}</#if>",
  </#list>
</#if>
    };

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop({ default: true }) public showBusyIndicator!: boolean;

    <#if ctrl.getPSControls()??>
    <#assign controls = ctrl.getPSControls()/>
    <#list controls as singleControl>
    <#if singleControl.getControlType() == "TOOLBAR">

    ${P.getCtrlCode(singleControl, 'CONTROL.vue').code}
    </#if>
    </#list>
    </#if>

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
        return [];
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getData(): any {
        return null;
    }

    /**
     * 选中数据
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public selection: any = {};

    /**
     * split值变化事件
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onSplitChange() {
        <#if ctrl.getXDataPSControl()??>
        <#assign xDataControl = ctrl.getXDataPSControl() />
        if(this.$refs.${xDataControl.getName()}){
            const calendarContainer:any = this.$refs.${xDataControl.getName()};
            if(calendarContainer.$refs.calendar){
                const appCalendar: any = calendarContainer.$refs.calendar;
                const api = appCalendar.getApi();
                api.updateSize();
            }
        }
        </#if>
        if(this.split){
          this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split});
        }
    }

    /**
    * Vue声明周期(组件初始化完毕)
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public created() {
         this.afterCreated();     
    }

    /**
    * 执行created后的逻辑
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public afterCreated(){
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                <#if ctrl.getXDataPSControl?? && ctrl.getXDataPSControl()??>
                <#assign xDataControl = ctrl.getXDataPSControl() />
                this.viewState.next({ tag: '${xDataControl.getName()}', action: action, data: data });
                </#if>
            });
        }  
    }
    
    /**
    * Vue声明周期(组件渲染完毕)
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public mounted() {
        this.afterMounted();     
    }

    /**
    * 执行mounted后的逻辑
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public afterMounted(){ 
        if(this.$store.getters.getViewSplit(this.viewUID)){
            this.split = this.$store.getters.getViewSplit(this.viewUID);
        }else{
            let containerWidth:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetWidth;
            let containerHeight:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetHeight;
            if(Object.is(this.showMode,'horizontal')){
                if(this.ctrlWidth){
                    this.split = this.ctrlWidth/containerWidth;
                }
            }else{
                if(this.ctrlHeight){
                    this.split = this.ctrlHeight/containerHeight;
                }
            }
            this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split}); 
        }  
    }
 
    /**
     * vue 生命周期
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public destroyed() {
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public afterDestroy() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }
    
    /**
     * ${ctrl.name}的选中数据事件
     * 
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public ${ctrl.name}_selectionchange(args: any [], tag?: string, $event2?: any): void {
        let data:any = {};
        if (args.length === 0) {
            return ;
        }
        const arg:any = args[0];
        switch(arg.itemType) {
<#if xDataControl?? && xDataControl.getPSSysCalendarItems()??>
  <#list xDataControl.getPSSysCalendarItems() as calendarItem>
    <#if calendarItem.getPSAppDataEntity()??>
      <#assign _appde = calendarItem.getPSAppDataEntity() />
            case "${calendarItem.getItemType()}":
                Object.assign(data,{ ${_appde.getCodeName()?lower_case} : arg.${_appde.getCodeName()?lower_case}});
                Object.assign(data,{srfparentdename:'${_appde.getCodeName()}',srfparentkey:arg['${_appde.getCodeName()?lower_case}']});
                break;
    </#if>
  </#list>
</#if>
        }
        if(this.context){
            Object.assign(data,JSON.parse(JSON.stringify(this.context)));
        }
        this.selection = {};
        Object.assign(this.selection, { view: { viewname: this.navViewName[arg.itemType] }, data:data });
        this.$emit('selectionchange',args);
        this.$forceUpdate();
    }

    /**
     * ${ctrl.name}的load完成事件
     * 
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public ${ctrl.name}_load(args:any, tag?: string, $event2?: any){
        this.$emit('load',args);
    }

    /**
    * 执行搜索
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public onSearch($event:any) {
        <#if ctrl.getXDataPSControl()??>
        <#assign xDataControl = ctrl.getXDataPSControl()/>
        let calendar:any = this.$refs.${xDataControl.getName()};
        calendar.searchEvents({ query: this.searchText });
        </#if>
    }

<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>