export class ResponseToolbarBasic {
    id?: string; // 标记
    class?: string; // class
    icon?: string; // 图标名
    groupId?: string; // 所属的组,只有一层収折
    order?: number; // 收藏顺序
    asDropDownTop?: boolean; // 是否作为下拉菜单的顶层按钮
    text: string; // 文本
    isDP: boolean;
    disabled: boolean;//是否禁用
    visible: boolean;//是否可见
    responsed: boolean;    
    tipsEnable?:boolean;//是否启用提示消息
    tipsText?:string;//提示消息内容
    width: Number; // 记录宽度
    constructor(item: any) {
        const defaultData = {
            id: '',
            class: 'btn-secondary',
            icon: '',
            groupId: '',
            order: -1,
            asDropDownTop: false,
            text: '',
            isDP: false,
            disabled: false,
            visible: true,
            responsed: false,
            width: 0,
            tipsEnable:false,
            tipsText:''
        };
        Object.keys(defaultData).forEach(propName => {
            this[propName] = item.hasOwnProperty(propName)
                ? item[propName]
                : defaultData[propName];
        });
    }
    // 设置宽度
    setWidth(value: string) {
        this.width = parseInt(value, 10);
    }
    // 获取宽度
    getWidth(): any {
        if(this.visible){
            return this.width;
        }
        return false;
    }
}

export class ResponseToolbarItem extends ResponseToolbarBasic {
    event: Function | null; // 点击事件
    constructor(item: any) {
        super(item);
        const defaultData = {
            text: '',
            event: null,
            isDP: false
        };
        Object.keys(defaultData).forEach(propName => {
            this[propName] = item.hasOwnProperty(propName)
                ? item[propName]
                : defaultData[propName];
        });
    }
    // // 设置宽度
    // setWidth(value: string) {
    //   this.width = parseInt(value, 10);
    // }
    // // 获取宽度
    // getWidth() {
    //   return this.width;
    // }
}

export class ResponseToolbarDropDown extends ResponseToolbarBasic {
    placement?: string; // 下拉位置
    topItem?: ResponseToolbarItem | null;
    dropdownCls: string; // 下拉class
    menuCls: string; // 下拉菜单class
    split: boolean; // 是否用分开的下拉按钮
    children: Array<ResponseToolbarItem | ResponseToolbarDropDown>;
    constructor(item) {
        super(item);
        const defaultData = {
            topItem: null,
            isDP: true,
            children: [],
            class: 'btn-secondary',
            dropdownCls: '',
            menuCls: '',
            placement: '',
            split: false
        };

        Object.keys(defaultData).forEach(propName => {
            this[propName] = item.hasOwnProperty(propName)
                ? item[propName]
                : defaultData[propName];
        });
    }
    /**
     * 是否有子项
     */
    hasChild(): boolean {
        return this.children.length > 0 ? true : false;
    }
    /**
     * 追加子项,默认从开头插入
     * @param item
     */
    addChild(item) {
        this.children.unshift(item);
    }
    // 从头部开始删除子元素
    removeChild(){
        this.children.shift();
    }
    // // 设置宽度
    // setWidth(value: string) {
    //   this.width = parseInt(value, 10);
    // }
    // // 获取宽度
    // getWidth(): any {
    //   return this.width;
    // }
}

export class ResponseToolbarGroup {
    id: string;
    name: string;
    presetId: Array<string> = []; // 记录元素的Id
    responsedIndex: Array<Number> = []; // 记录转变为下拉时元素的位置
    width: number; // 记录宽度
    constructor(_id: string, _groupName: string) {
        this.id = _id;
        this.name = _groupName;
        this.width = 0;
    }
    // 设置宽度
    setWidth(value: any) {
        this.width = parseInt(value + '', 10);
    }
    // 获取宽度
    getWidth(): any {
        return this.width;
    }
    // 更新presetIndex
    setPreset(value: Array<string> | string) {
        if (Array.isArray(value)) {
            this.presetId = this.presetId.concat(value);
        } else {
            this.presetId.push(value);
        }
    }
    // 清除preset
    delPreset(){
        this.presetId=[];
    }
    // 删除
    removeResponsed(index) {
        this.responsedIndex.splice(index, 1);
    }
    // 更新responsedIndex
    setResponsed(value: Array<Number> | Number) {
        if (Array.isArray(value)) {
            this.responsedIndex = this.responsedIndex.concat(value);
        } else {
            this.responsedIndex.push(value);
        }
    }
    // 是否已经开始处理响应式
    isResponsing() {
        return this.responsedIndex.length > 0;
    }
    // 是否已经处理完响应式
    isResponsed() {
        return this.presetId.length === this.responsedIndex.length;
    }
}

export interface ResponseToolbarClickEvent {
    id: string; // 元素id
    text: string;
    hidden: boolean;
}