<template>
    <div class="app-data-view-group">
        <#if ctrl.render??>
        ${ctrl.render.code}
        <#else>
        <template v-for="(group, index) of groups">
            <#if ctrl.groupRender??>
            ${ctrl.groupRender.code}
            <#else>
            <div :key="group + index" class="dataview-group-content" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#else>flex-grow: 1;</#if>">
                <div class="dataview-group-header<#if ctrl.getGroupPSSysCss()??> ${ctrl.getGroupPSSysCss().getCssName()}</#if>">
                    {{ getGroupText(group.name) }}
                    <#if ctrl.getGroupPSUIActionGroup()??>
                    <Poptip trigger="hover" content="content" placement="bottom-end" style="float: right;">
                        <Icon type="md-more" />
                        <div slot="content" class="group-action">
                            <#if ctrl.getGroupPSUIActionGroup().getPSUIActions()??>
                            <#list ctrl.getGroupPSUIActionGroup().getPSUIActions() as action>
                            <div class="group-action-item">
                                <i-button long @click="uiAction('${action.getCodeName()}', $event)">
                                <#if action.getPSSysImage()??>
                                <#if action.getPSSysImage().getImagePath()?length gt 0>
                                <img src="${action.getPSSysImage().getImagePath()}"/>
                                <#else>
                                <i class="${action.getPSSysImage().getCssClass()}"></i>
                                </#if>
                                </#if>
                                ${action.getCaption()}
                                </i-button>
                            </div>
                            </#list>
                            </#if>
                        </div>
                    </Poptip>
                    </#if>
                </div>
                <draggable :list="group.items" group="${ctrl.name}" class="dataview-group-items" @change="onDragChange($event, group.name)">
                    <div v-for="(item, i) in group.items" :key="i" :class="{'dataview-group-item': true, 'is-select': item.isselected}" @click="handleClick(item)" @dblclick="handleDblClick(item)">
                        <#if ctrl.getItemPSLayoutPanel()??>
                        <#assign panel = ctrl.getItemPSLayoutPanel()>
                        <layout_${panel.getName()} name='${panel.name}' :inputData="item"></layout_${panel.getName()}>
                        <#elseif ctrl.itemRender??>
                        ${ctrl.itemRender.code}
                        <#else>
                        {{ item.srfmajortext }}
                        </#if>
                    </div>
                </draggable>
            </div>
            </#if>
        </template>
        <#if ctrl.getGroupQuickPSDEToolbar()??>
        <div class="quick-action">
            <#if ctrl.getGroupQuickPSDEToolbar().getPSDEToolbarItems()??>
            <#list ctrl.getGroupQuickPSDEToolbar().getPSDEToolbarItems() as toolbarItem>
            <div class="quick-action-item" title="${toolbarItem.getCaption()}" @click="${ctrl.getGroupQuickPSDEToolbar().getName()}_click({tag: '${toolbarItem.getName()}'}, $event)">
                <#if toolbarItem.getPSSysImage()??>
                <#if toolbarItem.getPSSysImage().getImagePath()?length gt 0>
                <img src="${toolbarItem.getPSSysImage().getImagePath()}"/>
                <#else>
                <i class="${toolbarItem.getPSSysImage().getCssClass()}"></i>
                </#if>
                <#else>
                <i class="el-icon-menu"></i>
                </#if>
            </div>
            </#list>
            </#if>
        </div>
        </#if>
        </#if>
  </div>
</template>
<#assign import_block>
import draggable from "vuedraggable";
</#assign>
<#assign component_block>
draggable,
</#assign>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>
    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
        return this.selections;
    }

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

    /**
     * 是否默认选中第一条数据
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop({ default: false }) public isSelectFirstDefault!: boolean;

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

    /**
     * 部件行为--create
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public createAction!: string;

    /**
     * 部件行为--remove
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public removeAction!: string;

    /**
     * 部件行为--update
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public updateAction!: string;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public fetchAction!: string;

    /**
     * 部件行为--updateGroup
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public updateGroupAction!: string;

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

    /**
     * 数据
     *
     * @type {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public items: any[] = [];

    /**
     * 是否支持分页
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public isEnablePagingBar: boolean = ${ctrl.isEnablePagingBar()?c};;

    /**
     * 总条数
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public totalRecord: number = 0;

    /**
     * 加载的数据是否附加在items之后
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public isAddBehind:boolean = false;

    /**
     * 选中数组
     * @type {Array<any>}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public selections: Array<any> = [];

    /**
     * 当前页
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public curPage: number = 1;

    /**
     * 分页条数
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public limit: number = ${ctrl.getPagingSize()?c};

    /**
     * 排序方向
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */    
    public sortDir:string = '<#if ctrl.getMinorSortDir()??>${ctrl.getMinorSortDir()?lower_case}</#if>';

    /**
     * 排序字段
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */    
    public sortField: string = '<#if ctrl.getMinorSortPSDEF()??>${ctrl.getMinorSortPSDEF().getCodeName()?lower_case}</#if>';

    /**
     * 是否分组
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */   
    public isGroup: boolean = true;
    /**
     * 分组集合
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */ 
    public groups: any[] = [];
    /**
     * 分组属性名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */ 
    public groupField: string = '<#if ctrl.getGroupPSDEField()??>${ctrl.getGroupPSDEField().getCodeName()?lower_case}</#if>';
    /**
     * 分组模式
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */ 
    public groupMode: string = '${ctrl.getGroupMode()}'
    /**
     * 分组模式
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */ 
    public groupCodelist: string = '<#if ctrl.getGroupPSCodeList()??>${ctrl.getGroupPSCodeList().getCodeName()}</#if>'

    /**
     * Vue声明周期,组件挂载完毕
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public mounted () {
        this.afterMounted();
    }

    /**
     * 执行mounted后的逻辑
     *
     *  @memberof ${srfclassname('${ctrl.codeName}')}Base
     */    
    public afterMounted(){
        <#if !ctrl.isEnablePagingBar()>
        this.$el.addEventListener('scroll', ()=> {
            if( this.$el.scrollTop +  this.$el.clientHeight  >=  this.$el.scrollHeight) {
                this.loadMore();
            }
        })
        </#if>
    }

    /**
     * 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(this.name, tag)) {
                    return;
                }
                if (Object.is(action,'load')) {
                    this.refresh(data)
                }
                if (Object.is(action,'filter')) {
                    this.refresh(data)
                }
            });
        }
    }

    /**
	 * 加载更多
	 *
	 * @memberof ${srfclassname('${ctrl.codeName}')}Base
	 */
    public loadMore(){
        if(this.totalRecord>this.items.length)
        {
            this.curPage = ++this.curPage;
            this.isAddBehind = true;
            this.load({});
        }
    }

    /**
     * 刷新
     *
     * @param {*} [opt={}]
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public refresh(opt: any = {}) {
        this.curPage = 1;
        this.load(opt, true);
    }

    /**
     * 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>
    }

    /**
     * 表格数据加载
     *
     * @public
     * @param {*} [arg={}]
     * @param {boolean} [isReset=false] 是否重置items
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public load(opt: any = {}, isReset: boolean = false): void {
        if(!this.fetchAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: '${view.getName()}' + (this.$t('app.kanban.notConfig.fetchAction') as string) });
            return;
        }      
        const arg: any = {...opt};
        const page: any = {};
        if (this.isEnablePagingBar) {
            Object.assign(page, { page: this.curPage-1, size: this.limit });
        }
        // 设置排序
        if (!Object.is(this.sortDir, '') && !Object.is(this.sortField, '')) {
          const sort: string = this.sortField+","+this.sortDir;
            Object.assign(page, { sort: sort });
        }
        Object.assign(arg, page);
        const parentdata: any = {};
        this.$emit('beforeload', parentdata);
        Object.assign(arg, parentdata);
        let tempViewParams:any = parentdata.viewparams?parentdata.viewparams:{};
        Object.assign(tempViewParams,JSON.parse(JSON.stringify(this.viewparams)));
        Object.assign(arg,{viewparams:tempViewParams});
        const post: Promise<any> = this.service.search(this.fetchAction,JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (!response || response.status !== 200) {
                if (response.errorMessage) {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
                }
                return;
            }
            const data: any = response.data;
            if(!this.isAddBehind){
                this.items = [];
            }
            if (Object.keys(data).length > 0) {
                let datas = JSON.parse(JSON.stringify(data));
                datas.map((item: any) => {
                    Object.assign(item, { isselected: false });
                });
                this.totalRecord = response.total;
                if(isReset){
                    this.items = datas;
                }else{
                    this.items.push(...datas);
                }
            }
            this.isAddBehind = false;
            this.setGroups();
            this.$emit('load', this.items);
            if(this.isSelectFirstDefault){
                this.handleClick(this.items[0]);
            }
        }, (response: any) => {
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
        });
    }

    /**
     * 删除
     *
     * @param {any[]} datas
     * @returns {Promise<any>}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public async remove(datas: any[]): Promise<any> {
        if(!this.removeAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: '${view.getName()}' + (this.$t('app.kanban.notConfig.removeAction') as string) });
            return;
        }
        let _datas:any[] = [];
        datas.forEach((record: any, index: number) => {
            if (Object.is(record.srfuf, '0')) {
                this.items.some((val: any, num: number) =>{
                    if(JSON.stringify(val) == JSON.stringify(record)){
                        this.items.splice(num,1);
                        return true;
                    }
                }); 
            }else{
               _datas.push(datas[index]);
            }
        });
        if (_datas.length === 0) {
            return;
        }
        let dataInfo = '';
        _datas.forEach((record: any, index: number) => {
            let srfmajortext = record.srfmajortext;
            if (index < 5) {
                if (!Object.is(dataInfo, '')) {
                    dataInfo += '、';
                }
                dataInfo += srfmajortext;
            } else {
                return false;
            }
        });

        if (_datas.length < 5) {
            dataInfo = dataInfo + ' 共' + _datas.length + '条数据';
        } else {
            dataInfo = dataInfo + '...' + ' 共' + _datas.length + '条数据';
        }

        const removeData = () => {
            let keys: any[] = [];
            _datas.forEach((data: any) => {
                keys.push(data.srfkey);
            });
            let _removeAction = keys.length > 1 ? 'removeBatch' : this.removeAction ;
            const context:any = JSON.parse(JSON.stringify(this.context));
            const post: Promise<any> = this.service.delete(_removeAction,Object.assign(context,{ ${ctrl.getPSAppDataEntity().codeName?lower_case}: keys.join(';') }),Object.assign({ ${ctrl.getPSAppDataEntity().codeName?lower_case}: keys.join(';') },{viewparams:this.viewparams}), this.showBusyIndicator);
            return new Promise((resolve: any, reject: any) => {
                post.then((response: any) => {
                    if (!response || response.status !== 200) {
                        this.$Notice.error({ title: '', desc: (this.$t('app.commonWords.delDataFail') as string) + ',' + response.info });
                        return;
                    } else {
                        this.$Notice.success({ title: '', desc: (this.$t('app.commonWords.deleteSuccess') as string) });
                    }
                    //删除items中已删除的项
                    _datas.forEach((data: any) => {
                      this.items.some((item:any,index:number)=>{
                        if(Object.is(item.srfkey,data.srfkey)){
                          this.items.splice(index,1);
                                return true;
                            }
                        });
                    });
                    this.$emit('remove', null);
                    this.selections = [];
                    resolve(response);
                }).catch((response: any) => {
                    if (response && response.status === 401) {
                        return;
                    }
                    if (!response || !response.status || !response.data) {
                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.sysException') as string) });
                        reject(response);
                        return;
                    }
                    reject(response);
                });
            });
        }

        dataInfo = dataInfo.replace(/[null]/g, '').replace(/[undefined]/g, '').replace(/[ ]/g, '');
        this.$Modal.confirm({
            title: (this.$t('app.commonWords.warning') as string),
            content: (this.$t('app.kanban.delete1') as string) + dataInfo + ',' + (this.$t('app.kanban.delete2') as string),
            onOk: () => {
                removeData();
            },
            onCancel: () => { }
        });
        return removeData;
    }

    /**
     * 设置分组集合
     *
     * @param {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public updateData(opt: any) {
        const arg: any = { ...opt };
        Object.assign(arg, { viewparams: this.viewparams });
        let _context = JSON.parse(JSON.stringify(this.context));
        <#if ctrl.getPSAppDataEntity()??>
        Object.assign(_context, { ${ctrl.getPSAppDataEntity().getCodeName()?lower_case}: opt.task });
        </#if>
        const post: Promise<any> = this.service.update(this.updateGroupAction, _context, arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (!response.status || response.status !== 200) {
                if (response.data) {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                }
                this.setGroups();
                return;
            }
            let item = this.items.find((item: any) => Object.is(item.srfkey, response.data.srfkey));
            Object.assign(item, response.data);
            this.setGroups();
            this.$emit('update', this.items);
        }).catch((response: any) => {
            if (response && response.status  && response.data) {
                this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.data.message });
                return;
            }
            if (!response || !response.status || !response.data) {
                this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.sysException') as string) });
                return;
            }
        });
    }

    /**
     * 设置分组集合
     *
     * @param {}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public setGroups() {
        if(!this.isGroup || !this.groupField || Object.is(this.groupMode, 'NONE')) {
            return;
        }
        if(Object.is(this.groupMode, 'AUTO')) {
            this.groups = [];
            this.items.forEach(item => {
                let group: any = this.groups.find((group: any) => Object.is(group.name, item[this.groupField]));
                if(!group) {
                    this.groups.push({
                        name: item[this.groupField],
                        items: this.getGroupItems(item[this.groupField])
                    })
                }
            });
        }
        if(Object.is(this.groupMode, 'CODELIST') && this.groupCodelist) {
            this.groups = [];
            let codelist: any = this.$store.getters.getCodeList(this.groupCodelist);
            if(codelist) {
                codelist.items.forEach((item: any) => {
                    this.groups.push({
                        name: item.value,
                        items: this.getGroupItems(item.value)
                    })
                })
            }
        }
    }

    /**
     * 设置分组集合
     *
     * @param {string} name
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getGroupItems(name: string) {
        let datas: any = [];
        this.items.forEach(item => {
            if(Object.is(item[this.groupField], name)) {
                datas.push(item);
            }
        })
        return datas;
    }

    /**
     * 设置分组集合
     *
     * @param {string} name
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getGroupText(name: string) {
        if(Object.is(this.groupMode, 'CODELIST') && this.groupCodelist) {
            let codelist: any = this.$store.getters.getCodeList(this.groupCodelist);
            if(codelist) {
                if(!name) {
                    return codelist.emptytext;
                }
                let item = codelist.items.find((item: any) => Object.is(item.value, name));
                if(item) {
                    return item.text;
                }
            }
        }
        return name;
    }

    /**
     * 选择数据
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     *
     */
    public handleClick(args: any) {
        args.isselected = !args.isselected;
        this.items.forEach((item:any) =>{
            if(item.srfkey !== args.srfkey){
                item.isselected =false;
            }
        })
        this.selectchange();
    }

    /**
     * 双击数据
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     *
     */
    public handleDblClick(args: any) {
        args.isselected = true;
        this.items.forEach((item:any) =>{
            if(item.srfkey !== args.srfkey){
                item.isselected =false;
            }
        })
        this.$emit('rowdblclick', args);
    }

    /**
     * 触发事件
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     *
     */
    public selectchange() {
        this.selections = [];
        this.items.map((item: any) => {
            if (item.isselected) {
                this.selections.push(item);
            }
        });
        this.$emit('selectionchange', this.selections);
    }

    /**
     * 界面行为
     *
     * @param {*} tag
     * @param {*} $event
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
	public uiAction(tag: any, $event: any) {
        let row = this.selections.length > 0 ? this.selections[0] : {};
        <#if ctrl.getPSAppViewLogics()??>
        <#list ctrl.getPSAppViewLogics() as logic>
        <#if logic.getPSAppViewUIAction().getPSUIAction()??>
        <#assign action = logic.getPSAppViewUIAction().getPSUIAction()>
        if(Object.is('${action.getUIActionTag()}', tag)) {
            this.${logic.getName()}(row, tag, $event);
        }
        </#if>
        </#list>
        </#if>
    }

    /**
     * 拖拽变化
     *
     * @param {*} evt
     * @param {*} name
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onDragChange(evt: any, name: string) {
        if(evt && evt.added && evt.added.element) {
            let item: any = JSON.parse(JSON.stringify(evt.added.element))
            item[this.groupField] = name;
            this.updateData(item)
        }
    }

<#if ctrl.groupRender??>
${ctrl.groupRender.code2}
</#if>

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

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