<template>
    <div class="app-multieditviewpanel">
        <card v-for="(item, index) in items" :key="item.id" :dis-hover="true" :class="{ 'app-multieditviewpanel-item': true, 'app-multieditviewpanel-item--collapse': item.collapseContent }">
            <span class='multieditviewpanel-item__caption' slot='title'>
                <icon :type="item.collapseContent ? 'md-add' : 'md-remove'" class="collapse-icon" @click="clickCollapse(item)"/>
                <span>{{ $t('entities.ibizbook.views.usr5editview.caption') }}</span>
            </span>
            <template slot="extra">
                <div class="multieditviewpanel-action">
                    <i-button v-if="index == 0" type="primary" @click="handleAdd">
                        {{ $t('app.local.add') + $t('entities.ibizbook.views.usr5editview.caption') }}
                    </i-button>
                    <icon v-if="!(index == 0 && item.srfuf == 0)" class="remove-icon" type="md-remove-circle" @click="handleRemove(item)" />
                </div>
            </template>
            <ibizbookusr5-edit-view      
                class="viewcontainer2" 
                :viewdata="JSON.stringify(item.viewdata)"
                :viewparam="JSON.stringify(item.viewparam)"
                :viewDefaultUsage="false" 
                :panelState="panelState"  
                @viewdataschange="viewDataChange"
                @viewload="viewload"
                @viewdirty="viewdirty(item,$event)">
            </ibizbookusr5-edit-view>
        </card>
    </div>
</template>
// 基于 @CONTROL/多编辑视图面板/CONTROL-BASE.vue.ftl 生成
<script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ControlInterface } from '@/interface/control';
import { UIActionTool,Util,ViewTool } from '@/utils';
import NavDataService from '@/service/app/navdata-service';
import AppCenterService from "@service/app/app-center-service";
import IBIZBOOKEntityService from '@/service/ibizbook/ibizbook-service';
import MainService from './main-multieditviewpanel-service';
import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';


@Component({
    components: {
      
    }
})
export default class MainBase extends Vue implements ControlInterface {

    /**
     * 名称
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public name?: string;

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof MainBase
     */
    @Prop() public viewState!: Subject<ViewState>;

    /**
     * 应用上下文
     *
     * @type {*}
     * @memberof MainBase
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof MainBase
     */
    @Prop() public viewparams!: any;

    /**
     * 视图操作参数(父级)
     *
     * @type {*}
     * @memberof MainBase
     */
    @Prop() public pViewCtx!: any;

    /**
     * 视图操作参数
     *
     * @type {*}
     * @memberof MainBase
     */
    public viewCtx: any = {};

    /**
     * 监听视图操作参数变化
     *
     * @type {*}
     * @memberof MainBase
     */
    @Watch('pViewCtx', { immediate: true })
    public onViewCtxChange(newVal: any, oldVal: any) {
        Object.assign(this.viewCtx, newVal, { xData: this, ctrl: this });
    }

    /**
     * 视图状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     * @memberof MainBase
     */
    public viewStateEvent: Subscription | undefined;

    /**
     * 获取部件类型
     *
     * @returns {string}
     * @memberof MainBase
     */
    public getControlType(): string {
        return 'MULTIEDITVIEWPANEL'
    }



    /**
     * 计数器服务对象集合
     *
     * @type {Array<*>}
     * @memberof MainBase
     */    
    public counterServiceArray:Array<any> = [];

    /**
     * 建构部件服务对象
     *
     * @type {MainService}
     * @memberof MainBase
     */
    public service: MainService = new MainService({ $store: this.$store });

    /**
     * 实体服务对象
     *
     * @type {IBIZBOOKService}
     * @memberof MainBase
     */
    public appEntityService: IBIZBOOKEntityService = new IBIZBOOKEntityService({ $store: this.$store });
    


    /**
     * 转化数据
     *
     * @param {any} args
     * @memberof  MainBase
     */
    public transformData(args: any) {
        let _this: any = this;
        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
            return _this.service.handleRequestData('transform',_this.context,args)['data'];
        }
    }

    /**
     * 关闭视图
     *
     * @param {any} args
     * @memberof MainBase
     */
    public closeView(args: any): void {
        let _this: any = this;
        _this.$emit('closeview', [args]);
    }

    /**
     *  计数器刷新
     *
     * @memberof MainBase
     */
    public counterRefresh(){
        const _this:any =this;
        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
            _this.counterServiceArray.forEach((item:any) =>{
                if(item.refreshData && item.refreshData instanceof Function){
                    item.refreshData();
                }
            })
        }
    }
    /**
     *  处理部件事件
     *
     * @memberof MainBase
     */
    public async handleCtrlEvents(eventName: string, args: any = {}): Promise<boolean> {
        const actionData = {
            data: this.getData() || {},
            context: Util.deepCopy(this.context),
            viewparams: Util.deepCopy(this.viewparams),
            xData: this
        }
        let result: boolean = true;
        Object.assign(actionData, args);
        if ('onselectionchange'.indexOf(eventName) !== -1) {
            result = await this.execute_printSelection_ctrl_logic(actionData) && result;
        }
        if ('onselectionchange'.indexOf(eventName) !== -1) {
            result = await this.execute_cancelSelect_ctrl_logic(actionData) && result;
        }
        if (!result) {
            return false;
        }
        this.$emit(eventName, actionData);
        return true;
    }

    /**
     * 部件逻辑 -- printSelection
     *
     * @param {string} eventName 部件事件名称
     * @param {any[]} data 数据
     * @param {*} event 源事件对象
     * @memberof MainBase
     */
    public async execute_printSelection_ctrl_logic(actionData: any): Promise<boolean> {
        console.log('暂未支持 SCRIPT 类型');
        return true;
    }
    /**
     * 部件逻辑 -- cancelSelect
     *
     * @param {string} eventName 部件事件名称
     * @param {any[]} data 数据
     * @param {*} event 源事件对象
     * @memberof MainBase
     */
    public async execute_cancelSelect_ctrl_logic(actionData: any): Promise<boolean> {
        try {
            const uiService = await window.uiServiceRegister.getService('ibizbook');
            if (uiService) {
                const { data, context, viewparams } = actionData;
                const result = await uiService.executeUILogic(
                    'cancelSelect',
                    data,
                    context,
                    viewparams,
                    actionData.event ? actionData.event : {},
                    this,
                    this,
                    context.srfparentdename ? context.srfparentdename : ''
                );
                if (result && result.hasOwnProperty('srfret') && (result.srfret === 'false' || result.srfret === false)) {
                    return false;
                }
            }
        } catch (error: any) {

        }
        return true;
    }


    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof MainBase
     */
    public getDatas(): any[] {
        return [];
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof MainBase
     */
    public getData(): any {
        return null;
    }

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof MainBase
     */
    @Prop({ default: true }) public showBusyIndicator?: boolean;

    /**
     * 部件行为--update
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public updateAction!: string;
    
    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public fetchAction!: string;
    
    /**
     * 部件行为--remove
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public removeAction!: string;
    
    /**
     * 部件行为--load
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public loadAction!: string;
    
    /**
     * 部件行为--loaddraft
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public loaddraftAction!: string;
    
    /**
     * 部件行为--create
     *
     * @type {string}
     * @memberof MainBase
     */
    @Prop() public createAction!: string;

    /**
     * 刷新数据
     *
     * @type {number}
     * @memberof MainBase
     */
    @Prop() public saveRefView?: number;

    /**
     * 刷新数据
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof MainBase
     */
    @Watch('saveRefView')
    onSaveRefView(newVal: any, oldVal: any) {
        console.log('保存多项数据!');
        if (newVal > 0) {
            this.$emit('drdatasaved', false);
        }

    }

     /**
     * 面板状态订阅对象
     *
     * @public
     * @type {Subject<{action: string, data: any}>}
     * @memberof Meditviewpanel
     */
    public panelState: Subject<ViewState> = new Subject();

    /**
     * 视图名称
     *
     * @type {string}
     * @memberof MainBase
     */
    public viewname: string = 'ibizbookusr5-edit-view';

    /**
     * 获取数据对象
     *
     * @type {any[]}
     * @memberof MainBase
     */
    public items: any[] = [];

    /**
     * 计数器
     *
     * @type number
     * @memberof MainBase
     */
    public count: number = 0;


    /**
     * 关系实体参数对象
     *
     * @public
     * @type {any[]}
     * @memberof MainBase
     */
    public deResParameters: any[] = [
    ];

    /**
     * 当前应用视图参数对象
     *
     * @public
     * @type {any[]}
     * @memberof MainBase
     */
    public parameters: any[] = [
        { pathName: 'ibizbooks', parameterName: 'ibizbook' },
    ];

    /**
     * vue 声明周期
     *
     * @memberof MainBase
     */
    public created() {
        this.afterCreated();
    }

    /**
     * 执行created后的逻辑
     *
     *  @memberof MainBase
     */    
    public afterCreated(){
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                if (Object.is(action, 'load')) {
                    this.load(data);
                }
                if (Object.is(action, 'save')) {
                    this.saveData(data);
                }
            });
        }
    }   

    /**
     * vue 生命周期
     *
     * @memberof MainBase
     */
    public destroyed() {
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof MainBase
     */
    public afterDestroy() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
    }

    /**
     * 点击折叠
     *
     * @memberof MainBase
     */
    public clickCollapse(item: any): void {
        item.collapseContent = !item.collapseContent;
        this.$forceUpdate();
    }

     /**
      * 保存数据
      *
      * @memberof Meditviewpanel
      */
    public saveData(data?: any) {
        this.count = 0;
        if(this.items.length >0){
            Object.assign(data,{showResultInfo:false});
            this.panelState.next({ tag: 'meditviewpanel', action: 'save', data: data });
        }else{
            this.$emit("drdatasaved",{action:'drdatasaved'});
        }
    }

    /**
     * 处理数据
     *
     * @public
     * @param {any[]} datas
     * @memberof MainBase
     */
    public doItems(datas: any[]): void {
        const [{ pathName, parameterName }] = this.parameters;
        datas.forEach((arg: any) => {
            let id: string = arg[parameterName] ? arg[parameterName] : this.$util.createUUID();
            let item: any = { id: id, viewdata: {}, viewparam: {}, data: {}, collapseContent: false, srfuf: arg.srfuf };
            Object.assign(item.viewdata, this.$viewTool.getIndexViewParam());
            Object.assign(item.viewdata, this.context);
            Object.assign(item.data, arg);
            // 关系应用实体参数
            this.deResParameters.forEach(({ pathName, parameterName }: { pathName: string, parameterName: string }) => {
                if (this.context[parameterName] && !Object.is(this.context[parameterName], '')) {
                    Object.assign(item.viewdata, { [parameterName]: this.context[parameterName] });
                } else if (arg[parameterName] && !Object.is(arg[parameterName], '')) {
                    Object.assign(item.viewdata, { [parameterName]: arg[parameterName] });
                }
            });

            // 当前视图参数（应用实体视图）
            this.parameters.forEach(({ pathName, parameterName }: { pathName: string, parameterName: string }) => {
                if (arg[parameterName] && !Object.is(arg[parameterName], '')) {
                    Object.assign(item.viewdata, { [parameterName]: arg[parameterName] });
                }
            });

            //合并视图参数
            Object.assign(item.viewparam, this.viewparams);
            this.items.push(item);
        });
    }

    /**
     * 数据加载
     *
     * @public
     * @param {*} data
     * @memberof MainBase
     */
    public async load(data: any) {
        if(!this.fetchAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKMEditView9' + (this.$t('app.multiEditView.notConfig.fetchAction') as string) });
            return;
        }
        let arg: any = {};
        Object.assign(arg, data,{viewparams:this.viewparams});
        this.items = [];
        let viewparamResult:any = Object.assign(arg, this.viewparams);
        const tempContext = Util.deepCopy(this.context);
        if (!(await this.handleCtrlEvents('onbeforeload', { context: tempContext, viewparams: viewparamResult, data: arg }))) {
            return;
        }
        const response: any = await this.service.get(this.fetchAction,JSON.parse(JSON.stringify(this.context)),arg, this.showBusyIndicator);
        try {
            if (response.status && response.status == 200) {
                if (!(await this.handleCtrlEvents('onloadsuccess', { data: response.data }))) {
                    return;
                }
                const data: any = response.data;
                if (data.length > 0) {
                    const items = JSON.parse(JSON.stringify(data));
                    this.doItems(items);
                } else {
                    this.handleAdd();
                }
                this.$emit('load', this.items);
            } else {
                if (!(await this.handleCtrlEvents('onloaderror', { data: response.data }))) {
                    return;
                }
                if (response.data && response.data.message) {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                }
            }
        } catch (error) {
             if (!(await this.handleCtrlEvents('onloaderror', { context: tempContext, viewparams: viewparamResult, data: response && response.data ? response.data : arg }))) {
                return;
            }
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data && response.data.message ? response.data.message : "" });
        }
    }

    /**
     * 增加数据
     * 
     * @memberof MainBase
     */
    public handleAdd(){
        if(!this.loaddraftAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKMEditView9' + (this.$t('app.multiEditView.notConfig.loaddraftAction') as string) });
            return;
        }
        const promice: Promise<any> = this.service.loadDraft(this.loaddraftAction,JSON.parse(JSON.stringify(this.context)),{viewparams:this.viewparams}, this.showBusyIndicator);
        promice.then((response: any) => {
            if (!response.status || response.status !== 200) {
                if (response.data && response.data.message) {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                }
                return;
            }
            const data: any = response.data;
            this.doItems([data]);
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data && response.data.message ? response.data.message : "" });
        });
    }

    /**
     * 删除数据
     *
     * @param {*} item
     * @memberof MainBase
     */
    public handleRemove(item:any){
        if (item.data.srfuf == "0") {
            //删除items中已删除的项
            let index = this.items.findIndex((value: any, index: any, arr: any) => {
                return value === item;
            });
            this.items.splice(index, 1);
        } else {
            // 原有的走接口删除
            let tempContext: any = JSON.parse(JSON.stringify(this.context));
            Object.assign(tempContext, { 'ibizbook': item.data.ibizbook });
            let arg: any = JSON.parse(JSON.stringify(this.viewparams));
            Object.assign(arg, { 'ibizbookid': item.data.ibizbook });
            const promice: Promise<any> = this.service.delete(this.removeAction, tempContext, arg, this.showBusyIndicator);
            promice.then((response: any) => {
                if (!response.status || response.status !== 200) {
                    if (response.data && response.data.message) {
                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                    }
                    return;
                }
                //删除items中已删除的项
                let index = this.items.findIndex((value: any, index: any, arr: any) => {
                    return value.data.ibizbook === item.data.ibizbook;
                });
                this.items.splice(index, 1);
            }).catch((response: any) => {
                if (response.data && response.data.message) {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                }
            });
        }
        if (this.items.length == 0) {
            this.handleAdd();
        }
    }

    /**
     * 设置视图脏值变化
     *
     * @param {*} item
     * @param {boolean} $event
     * @memberof MainBase
     */
    public setViewDirty(item: any, $event: boolean) {
        let index: number = this.items.findIndex((_item: any) => Object.is(_item.id, item.id));
        if (index === -1) {
            return;
        }
        Object.assign(this.items[index], { viewdirty: $event });
        let state: boolean = this.items.some((item: any) => {
            if (item.viewdirty) {
                return true;
            }
            return false;
        });
        this.$emit('viewdatadirty', state);
    }

     /**
     * 部件抛出事件
     * @memberof MainBase
     */
    public viewDataChange($event:any){
        if($event){
            try{
                $event = JSON.parse($event);
            }catch(error){
                return;
            }
            if(Object.is($event.action,'load')){
                console.log('加载----');
            }
            if(Object.is($event.action,'save')){
                this.count++;
                if (this.items.length === this.count) {
                    this.$emit('drdatasaved',{action:'save'});
                }
            }
            if(Object.is($event.action,'remove')){
                if ($event.data) {
                    let resultIndex = this.items.findIndex((value:any, index:any, arr:any) => {
                        return value['viewdata']['ibizbookid'] === $event.data['ibizbookid'];
                    });
                    if (resultIndex !== -1) {
                        this.items.splice(resultIndex, 1);
                    }
                }
            }            
        }
    }

    /**
     * 视图加载完成
     *
     * @returns
     * @memberof MainBase
     */
    public viewload($event:any){
        console.log('视图加载完成');
    }

    /**
     * editview9 视图数据变化
     *
     * @returns
     * @memberof MainBase
     */
    public viewdirty(item:any,$event:any){
        // editview9 视图数据变化;
        this.setViewDirty(item, $event);
    }

}
</script>

<style lang='scss'>
@import './main-multieditviewpanel.scss';
</style>
