<template>
    <div class="app-data-view-group-row">
            <template v-for="(group, index) of groups">
                <draggable :key="index" :list="group.items" class="dragbar" ghostClass="dragitems" handle=".dataview-group-item" :group="{name: 'bar', put: group.folding ? false:true}" @change="onDragChange($event,group.value)">
                    <div v-show="!group.folding" :key="index" class="dataview-group-folading-kanban" @click="onClick(group,index)">
                        <div class="unfold-icon">
                            <i class="el-icon-s-unfold" :title="$t('app.kanban.unfold')"></i>
                        </div>
                        <div class="dataview-group-folding">
                            <span>{{getGroupText(group.value)}}({{group.items.length}})</span>
                        </div>
                    </div>
                </draggable>
                <div v-show="group.folding" :key="group + index" class="dataview-group-content" style="flex-grow: 1;">
                    <div class="dataview-group-header">
                        <div class="fold-icon" @click="onClick(group,index)">
                            <i class="el-icon-s-fold" :title="$t('app.kanban.fold')"></i>
                        </div>
                        <span class="fold-text">
                            {{ getGroupText(group.value) }}
                        </span>
                    </div>
                    <draggable v-if="group.items.length > 0" :list="group.items" group="kanban" class="dataview-group-items" @change="onDragChange($event, group.value)">
                        <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)">
                            <layout_itemlayoutpanel name='itemlayoutpanel' :inputData="item" @panelDataChange="($event)=>{onPanelDataChange(item,$event)}"></layout_itemlayoutpanel>
                        </div>
                    </draggable>
                    <div v-else class="app-data-empty">
                        <span>{{ $t('entities.ibizbook.haspanelkanban_kanban.nodata') }}</span>
                    </div>
                </div>
            </template>
  </div>
</template>

<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 HasPanelKanBanService from './has-panel-kan-ban-kanban-service';
import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';
import draggable from "vuedraggable";
import CodeListService from '@codelist/codelist-service';


@Component({
    components: {
      draggable,

    }
})
export default class HasPanelKanBanBase extends Vue implements ControlInterface {

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

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

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

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

    /**
     * 视图操作参数
     *
     * @type {*}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public viewCtx!: any;

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

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



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

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

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


    /**
     * 转化数据
     *
     * @param {any} args
     * @memberof  HasPanelKanBanBase
     */
    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 HasPanelKanBanBase
     */
    public closeView(args: any): void {
        let _this: any = this;
        _this.$emit('closeview', [args]);
    }

    /**
     *  计数器刷新
     *
     * @memberof HasPanelKanBanBase
     */
    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 HasPanelKanBanBase
     */
    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;
        if (!result) {
            return false;
        }
        this.$emit(eventName, actionData);
        return true;
    }



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

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

    /**
     * 是否默认选中第一条数据
     *
     * @type {boolean}
     * @memberof HasPanelKanBanBase
     */
    @Prop({ default: false }) public isSelectFirstDefault!: boolean;

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

    /**
     * 部件行为--create
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public createAction!: string;

    /**
     * 部件行为--remove
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public removeAction!: string;

    /**
     * 部件行为--update
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public updateAction!: string;

    /**
     * 部件行为--fetch
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public fetchAction!: string;

    /**
     * 部件行为--updateGroup
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public updateGroupAction!: string;

    /**
     * 是否单选
     *
     * @type {boolean}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public isSingleSelect?: boolean;

    /**
     * 打开新建数据视图
     *
     * @type {any}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public newdata: any;
    /**
     * 打开编辑数据视图
     *
     * @type {any}
     * @memberof HasPanelKanBanBase
     */
    @Prop() public opendata: any;

    /**
     * 数据
     *
     * @type {any[]}
     * @memberof HasPanelKanBanBase
     */
    public items: any[] = [];

    /**
     * 是否支持分页
     *
     * @type {boolean}
     * @memberof HasPanelKanBanBase
     */
    public isEnablePagingBar: boolean = true;;

    /**
     * 总条数
     *
     * @type {number}
     * @memberof HasPanelKanBanBase
     */
    public totalRecord: number = 0;

    /**
     * 加载的数据是否附加在items之后
     *
     * @type {boolean}
     * @memberof HasPanelKanBanBase
     */
    public isAddBehind:boolean = false;

    /**
     * 选中数组
     * @type {Array<any>}
     * @memberof HasPanelKanBanBase
     */
    public selections: Array<any> = [];

    /**
     * 代码表服务
     *
     * @type {CodeListService}
     * @memberof HasPanelKanBanBase
     */  
    public codeListService:CodeListService = new CodeListService();

    /**
     * 代码表数据
     *
     * @type {Array<any>}
     * @memberof HasPanelKanBanBase
     */   
    public allCodeList:Array<any> = [];

    /**
     * 当前页
     *
     * @type {number}
     * @memberof HasPanelKanBanBase
     */
    public curPage: number = 1;

    /**
     * 分页条数
     *
     * @type {number}
     * @memberof HasPanelKanBanBase
     */
    public limit: number = 20;

    /**
     * 排序方向
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */    
    public sortDir:string = '';

    /**
     * 排序字段
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */    
    public sortField: string = '';

    /**
     * 是否分组
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */   
    public isGroup: boolean = true;
    /**
     * 分组集合
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */ 
    public groups: any[] = [];
    /**
     * 分组属性名称
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */ 
    public groupField: string = 'author';
    /**
     * 分组模式
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */ 
    public groupMode: string = 'AUTO'
    /**
     * 分组代码表
     *
     * @type {string}
     * @memberof HasPanelKanBanBase
     */ 
    public groupCodelist: any = {};
    /**
     * Vue声明周期，组件挂载完毕
     *
     * @memberof HasPanelKanBanBase
     */
    public mounted () {
        this.afterMounted();
    }

    /**
     * 执行mounted后的逻辑
     *
     *  @memberof HasPanelKanBanBase
     */    
    public afterMounted(){
    }

    /**
     * Vue声明周期，组件创建完毕
     *
     * @memberof HasPanelKanBanBase
     */
    public created() {
        this.afterCreated();
    }

    /**
     * 执行created后的逻辑
     *
     *  @memberof HasPanelKanBanBase
     */    
    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 HasPanelKanBanBase
	 */
    public loadMore(){
        if(this.totalRecord>this.items.length)
        {
            this.curPage = ++this.curPage;
            this.isAddBehind = true;
            this.load({});
        }
    }

    /**
     * 刷新
     *
     * @param {*} [opt={}]
     * @memberof HasPanelKanBanBase
     */
    public refresh(args?: any) {
        this.curPage = 1;
        this.load(args, true);
    }

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

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

    /**
     * 表格数据加载
     *
     * @public
     * @param {*} [arg={}]
     * @param {boolean} [isReset=false] 是否重置items
     * @memberof HasPanelKanBanBase
     */
    public async load(opt: any = {}, isReset: boolean = false) {
        if(!this.fetchAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKHasPanelKanBanView' + (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.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;
            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.data && response.data.message ? response.data.message : "" });
        });
    }

    /**
     * 删除
     *
     * @param {any[]} datas
     * @returns {Promise<any>}
     * @memberof HasPanelKanBanBase
     */
    public async remove(datas: any[]): Promise<any> {
        if(!this.removeAction){
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKHasPanelKanBanView' + (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,{ ibizbook: keys.join(';') }),Object.assign({ ibizbook: 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 HasPanelKanBanBase
     */
    public updateData(opt: any) {
        const arg: any = { ...opt };
        Object.assign(arg, { viewparams: this.viewparams });
        let _context = JSON.parse(JSON.stringify(this.context));
        Object.assign(_context, { ibizbook: opt.srfkey });
        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 });
                this.refresh();
                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) });
                this.refresh();
                return;
            }
        });
    }

    /**
     * 设置分组集合
     *
     * @param {}
     * @memberof HasPanelKanBanBase
     */
    public async setGroups() {
        let tempGroups: Array<any> = this.groups;
        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]));
                let state: any = tempGroups.filter((temp: any) => Object.is(item[this.groupField], temp.value))[0];
                if(!group) {
                    this.groups.push({
                        name: item[this.groupField],
                        value: item[this.groupField],
                        folding: (state && !state.folding) ? state.folding : true,
                        items: this.getGroupItems(item[this.groupField])
                    })
                }
            });
        }
        if(Object.is(this.groupMode, 'CODELIST') && this.groupCodelist) {
            this.groups = [];
            let codelistItems: any = await this.codeListService.getDataItems(this.groupCodelist);
            this.allCodeList = Util.deepCopy(codelistItems);
            if(codelistItems && codelistItems.length >0) {
                codelistItems.forEach((item: any) => {
                    let state: any = tempGroups.filter((temp: any) => Object.is(item.value, temp.value))[0];
                    this.groups.push({
                        name: item.value,
                        value: item.value,
                        folding: (state && !state.folding) ? state.folding : true,
                        items: this.getGroupItems(item.value)
                    })
                })
            }
        }
    }

    /**
     * 设置分组集合
     *
     * @param {string} name
     * @memberof HasPanelKanBanBase
     */
    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 HasPanelKanBanBase
     */
    public getGroupText(name: string) {
        if(Object.is(this.groupMode, 'CODELIST') && this.groupCodelist) {
             if(this.allCodeList && this.allCodeList.length >0) {
                if(!name) {
                    return '未定义';
                }
                let item = this.allCodeList.find((item: any) => Object.is(item.value, name));
                if(item) {
                    return item.text;
                }
            }
        }else{
            return name;
        }
    }

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

    /**
     * 双击数据
     * @memberof HasPanelKanBanBase
     *
     */
    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 HasPanelKanBanBase
     *
     */
    public selectchange() {
        this.selections = [];
        this.items.map((item: any) => {
            if (item.isselected) {
                this.selections.push(item);
            }
        });
        this.$emit('selectionchange', this.selections);
    }

    /**
     * 点击时触发看板的展开和收起
     * 
     * @param group 分组看板
     * @param index 分组看板编号
     * @memberof HasPanelKanBanBase
     */
    public onClick(group: any,index: number){
        group.folding = !group.folding;
        this.$forceUpdate();
    }
    
    /**
     * 界面行为
     *
     * @param {*} tag 界面行为标识
     * @param {*} $event   
     * @param {*} group 看板分组
     * @memberof HasPanelKanBanBase
     */
	public uiAction(tag: any, $event: any, group: any) {
        let row = this.selections.length > 0 && group && group.items.includes(this.selections[0])? this.selections[0] : {};
        if(!row.hasOwnProperty('srfgroup')){
            Object.assign(row,{srfgroup: group? group.value:null});
        }
    }

    /**
     * 面板数据变化处理事件
     * @param {any} item 当前列数据
     * @param {any} $event 面板事件数据
     *
     * @memberof HasPanelKanBanBase
     */
    public onPanelDataChange(item:any,$event:any) {
        Object.assign(item, $event, {rowDataState:'update'});
    }

    /**
     * 拖拽变化
     *
     * @param {*} evt
     * @param {*} name
     * @memberof HasPanelKanBanBase
     */
    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)
        }
    }


}
</script>

<style lang='less'>
@import './has-panel-kan-ban-kanban.less';
</style>