import {
	IAbility,
	IContext,
	IPanelDetailAbility,
	IPanelDetailController,
	IPanelDetailControllerParams,
	IParam,
} from '@/core/interface';
import { LayoutUtil } from '@/core/utils';

/**
 * 面板成员控制器基类
 *
 * @export
 * @class PanelDetailController
 * @implements {IPanelDetailController}
 */
export class PanelDetailController implements IPanelDetailController {
	/**
	 * 类型 视图布局/项布局
	 *
	 * @type {('VIEWLAYOUT' | 'ITEMLAYOUT')}
	 * @memberof PanelDetailController
	 */
	public type: 'VIEWLAYOUT' | 'ITEMLAYOUT' = 'VIEWLAYOUT';

	/**
	 * 成员标题
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public caption = '';

	/**
	 * 视图类型
	 *
	 * @protected
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	protected readonly viewType: string;

	/**
	 * 成员类型
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public itemType = '';

	/**
	 * 内置样式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public itemStyle = '';

    /**
     * @description 内容样式
     * @memberof PanelDetailController
     */
    public contentStyle = '';

	/**
	 * 面板对象
	 *
	 * @type {*}
	 * @memberof PanelDetailController
	 */
	protected panel: any = null;

	/**
	 * 成员名称
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public name = '';

	/**
	 * 成员是否显示
	 *
	 * @type {boolean}
	 * @memberof PanelDetailController
	 */
	public visible = true;

	/**
	 * 当前数据
	 *
	 * @type {*}
	 * @memberof PanelDetailController
	 */
	protected data: any;

	/**
	 * 布局模式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public layout = '';

	/**
	 *  布局占位（边缘布局使用）
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public layoutPos = '';

	/**
	 * 布局高度
	 *
	 * @type {number}
	 * @memberof PanelDetailController
	 */
	public layoutHeight = 0;

	/**
	 * 高度模式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public heightMode = '';

	/**
	 * 布局宽度
	 *
	 * @type {number}
	 * @memberof PanelDetailController
	 */
	public layoutWidth = 0;

	/**
	 * 宽度模式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public widthMode = '';

	/**
	 * 下档间隔
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public spacingBottom = '';

	/**
	 * 左侧间隔
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public spacingLeft = '';

	/**
	 * 右侧间隔
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public spacingRight = '';

	/**
	 * 顶部间隔
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public spacingTop = '';

	/**
	 * 自身水平对齐模式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public hAlignSelf = '';

	/**
	 * 自身垂直对齐模式
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public vAlignSelf = '';

	/**
	 * Flex延伸
	 *
	 * @type {number}
	 * @memberof PanelDetailController
	 */
	public flexGrow = 0;

	/**
	 * flex布局参数
	 *
	 * @type {*}
	 * @memberof PanelDetailController
	 */
	public flexParams: any = {};

	/**
	 * 是否显示标题
	 *
	 * @type {boolean}
	 * @memberof PanelDetailController
	 */
	public isShowCaption = false;

	/**
	 * 界面样式表
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	public sysCss = '';

    /**
     * 动态样式表
     *
     * @memberof PanelDetailController
     */
    public dynaClass = '';

    /**
     * 标签动态样式表
     *
     * @memberof PanelDetailController
     */
    public labelDynaClass = '';

    /**
     * 标签直接样式
     *
     * @memberof PanelDetailController
     */
    public labelCssStyle = '';

    /**
	 * 边框样式
	 *
	 * @type {('NONE' | 'SOLID' | 'DOTTED' | 'DASHED' | 'DOUBLE')}
	 * @memberof PanelDetailController
	 */
	public borderStyle: 'NONE' | 'SOLID' | 'DOTTED' | 'DASHED' | 'DOUBLE' = 'NONE';

	/**
	 * @description 图标
	 * @type {*}
	 * @memberof PanelDetailController
	 */
	public sysImage: any = {};

	/**
	 * 预置类型
	 *
	 * @type {string}
	 * @memberof PanelDetailController
	 */
	protected predefinedType = '';

	/**
	 * 下标
	 *
	 * @type {number}
	 * @memberof PanelDetailController
	 */
	protected index = 0;

	/**
	 * 父项名称
	 *
	 * @type {string | undefined}
	 * @memberof PanelDetailController
	 */
	public parentName: string | undefined = undefined;

	/**
	 * 成员模型数据
	 *
	 * @protected
	 * @type {IParam}
	 * @memberof PanelDetailController
	 */
	protected readonly model: IParam = {};

    /**
	 * 用户标识
	 *
	 * @type {string | undefined}
	 * @memberof PanelDetailController
	 */
    public userTag: string | undefined = undefined;

    /**
	 * 用户标识2
	 *
	 * @type {string | undefined}
	 * @memberof PanelDetailController
	 */
    public userTag2: string | undefined = undefined;

    /**
     * @description 值格式化
     * @type {string}
     * @memberof PanelDetailController
     */
    public valueFormat: string = '';

	/**
	 * 成员能力
	 *
	 * @protected
	 * @type {IPanelDetailAbility}
	 * @memberof PanelDetailController
	 */
	protected ability!: IPanelDetailAbility;

    /**
     * 上下文
     *
     * @type {IContext}
     * @memberof PanelDetailController
     */
    public context: IContext;

    /**
     * 视图参数
     *
     * @type {IParam}
     * @memberof PanelDetailController
     */
    public viewParams: IParam;

	/**
	 * Creates an instance of PanelDetailController.
	 * @param {IPanelDetailControllerParams} params
	 * @memberof PanelDetailController
	 */
	constructor(params: IPanelDetailControllerParams, context: IContext, viewParams: IParam) {
		this.model = params;
		this.type = params.type;
		this.caption = params.caption;
		this.itemType = params.itemType;
		this.panel = params.panel;
		this.name = params.name;
		this.visible = params.visible;
		this.layout = params.layout;
		this.layoutPos = params.layoutPos;
		this.layoutHeight = params.layoutHeight;
		this.heightMode = params.heightMode;
		this.layoutWidth = params.layoutWidth;
		this.widthMode = params.widthMode;
		this.spacingBottom = params.spacingBottom;
		this.spacingLeft = params.spacingLeft;
		this.spacingRight = params.spacingRight;
		this.spacingTop = params.spacingTop;
		this.hAlignSelf = params.hAlignSelf;
		this.vAlignSelf = params.vAlignSelf;
		this.flexGrow = params.flexGrow;
		this.flexParams = params.flexParams;
		this.isShowCaption = params.isShowCaption;
		this.sysCss = params.sysCss;
		this.predefinedType = params.predefinedType;
		this.itemStyle = params.itemStyle;
        this.contentStyle = params.contentStyle;
		this.sysImage = params.sysImage;
		this.parentName = params.parentName;
		this.viewType = params.viewType;
        this.userTag = params.userTag;
        this.userTag2 = params.userTag2;
        this.valueFormat = params.valueFormat;
        this.dynaClass = params.dynaClass;
        this.labelDynaClass = params.labelDynaClass;
        this.labelCssStyle = params.labelCssStyle;
        this.context = context;
        this.viewParams = viewParams;
        this.borderStyle = params.borderStyle ? params.borderStyle : 'NONE';
		this.detailInit();
	}

	/**
	 * 成员初始化
	 *
	 * @protected
	 * @memberof PanelDetailController
	 */
	protected detailInit() {
		this.visible = this.model.visible || true;
		if (this.model.groupLogics) {
			const panelVisible = this.model.groupLogics.find(
				(logic: IParam) => logic.logicCat === 'PANELVISIBLE'
			);
			if (panelVisible) {
				this.visible = false;
			}
		}
	}

	/**
	 * 获取能力
	 *
	 * @return {*}  {IAbility}
	 * @memberof PanelDetailController
	 */
	getAbility(): IAbility {
		return {
			name: this.name,
			getModel: this.getModel.bind(this),
			controller: this as any,
			viewCtx: this.panel.store.viewCtx,
		};
	}

	/**
	 * 获取模型
	 *
	 * @template T
	 * @return {*}  {T}
	 * @memberof PanelDetailController
	 */
	public getModel<T>(): T {
		return this.model as T;
	}

	/**
	 * 设置数据
	 *
	 * @param {*} value
	 * @memberof PanelDetailController
	 */
	public setData(value: any) {
		this.data = value;
	}

	/**
	 * 获取数据
	 *
	 * @return {*}
	 * @memberof PanelDetailController
	 */
	public getData() {
		return this.data;
	}

	/**
	 * 设置当前下标
	 *
	 * @param {number} index
	 * @memberof PanelDetailController
	 */
	public setIndex(index: number) {
		this.index = index;
	}

	/**
	 * 获取当前下标
	 *
	 * @return {*}
	 * @memberof PanelDetailController
	 */
	public getIndex() {
		return this.index;
	}

	/**
	 * 获取元素行内样式
	 *
	 * @memberof PanelDetailController
	 */
	public getElementStyle() {
		const elementStyle = {};
		Object.assign(elementStyle, this.getBoxSizeStyle());
		Object.assign(elementStyle, this.getStyleCode());
		return elementStyle;
	}

	/**
	 * 获取盒子大小样式（元素）
	 *
	 * @memberof PanelDetailController
	 */
	protected getBoxSizeStyle() {
		const boxStyle = {};
		if (this.widthMode || this.layoutWidth) {
			Object.assign(
				boxStyle,
				LayoutUtil.getBoxSize('WIDTH', this.widthMode, this.layoutWidth)
			);
		}
		if (this.heightMode || this.layoutHeight) {
			Object.assign(
				boxStyle,
				LayoutUtil.getBoxSize('HEIGHT', this.heightMode, this.layoutHeight)
			);
		}
		return boxStyle;
	}

    /**
     * 获取样式代码
     * @protected
     * @memberof PanelDetailController
     */
    protected getStyleCode() {
		const contentStyle = {};
        if (this.contentStyle) {
            try {
                const contentStyles = this.contentStyle.split(';');
                if (contentStyles && contentStyles.length > 0) {
                    contentStyles.forEach((style: string) => {
                        if (style) {
                            const _style = style.split(':');
                            if (_style.length == 2) {
                                Object.assign(contentStyle, {
                                    [_style[0]]: _style[1].trim().substring(1, _style[1].length - 2)
                                })
                            }
                        }
                    })
                }
            } catch (error) {
                
            }
        }
        return contentStyle;
	}

	/**
	 * 获取盒子布局样式(布局,包含约束内容区布局的样式)
	 *
	 * @memberof PanelDetailController
	 */
	protected getBoxLayOutStyle() {
        const boxStyle = {};
		if (this.parentName && this.panel) {
            const parentItem = this.panel.store.layoutModelDetails[this.parentName];
			// 识别父FLEX
			if (parentItem) {
				if (parentItem.layout == 'FLEX') {
                    if (this.flexGrow !== -1) {
                        Object.assign(boxStyle, {
                            'flex-grow': this.flexGrow ? this.flexGrow : 0,
                        });
                    }
				}
				// 识别SIMPLEFLEX
				else if (parentItem.layout == 'SIMPLEFLEX') {
					// SIMPLEFLEX 按照内容撑大小
					Object.assign(boxStyle, { 'flex-grow': 0 });
					if (this.flexGrow !== -1) {
						Object.assign(boxStyle, {
							width: `${(100 / 12) * this.flexGrow}%`,
							height: '100%',
						});
					} else {
						// 简单FLEX布局自适应
						Object.assign(boxStyle, {
							'flex-grow': 1,
							'min-width': `${100 / 12}%`,
							height: '100%',
						});
					}
				} else {
					// 当前项兄弟项个数大于1且本身设置宽或者高默认不占满
					if (
						parentItem &&
						parentItem.details &&
						parentItem.details.length > 1
					) {
						const boxSizeStyle: any = this.getBoxSizeStyle();
						if (boxSizeStyle && Object.keys(boxSizeStyle).length > 0) {
							Object.assign(boxStyle, { 'flex-grow': 0 });
						}
					}
				}
			}
		}
        if (!this.visible) {
            Object.assign(boxStyle, { display: 'none' });
        }
		return boxStyle;
	}

	/**
	 * 加载
	 * @param context
	 * @param viewParams
	 */
	public async load(context: IContext, viewParams: IParam) {}

	/**
	 * 获取样式类名
	 *
	 * @return {*}  {IParam}
	 * @memberof PanelDetailController
	 */
	public getClassNames(): IParam {
		const classNames: IParam = {};
		Object.assign(classNames, {[this.name]: true});
		Object.assign(classNames, this.getBoxSpacingClassNames());
        Object.assign(classNames, this.getContainerClassName());
        Object.assign(classNames, this.getBoxBorderClassNames());
        Object.assign(classNames, this.getBoxSelfAlignClassNames());
        Object.assign(classNames, this.getDynaClassNames());
		return classNames;
	}

	/**
	 * 获取盒子间隔类名（元素）
	 *
	 * @protected
	 * @return {*}  {IParam}
	 * @memberof PanelDetailController
	 */
	protected getBoxSpacingClassNames(): IParam {
		const boxClassNames = {};
		// 上方间隔模式
		if (this.spacingTop) {
			Object.assign(boxClassNames, {
				[`spacing-top--${this.spacingTop.toLowerCase()}`]: true,
			});
		}
		// 下方间隔模式
		if (this.spacingBottom) {
			Object.assign(boxClassNames, {
				[`spacing-bottom--${this.spacingBottom.toLowerCase()}`]: true,
			});
		}
		// 左侧间隔模式
		if (this.spacingLeft) {
			Object.assign(boxClassNames, {
				[`spacing-left--${this.spacingLeft.toLowerCase()}`]: true,
			});
		}
		// 右侧间隔模式
		if (this.spacingRight) {
			Object.assign(boxClassNames, {
				[`spacing-right--${this.spacingRight.toLowerCase()}`]: true,
			});
		}
		return boxClassNames;
	}

	/**
	 * 获取自身对齐模式（元素布局，不应该绑定到元素本身上，仅布局元素才存在）
	 *
	 * @protected
	 * @return {*}
	 * @memberof PanelDetailController
	 */
	protected getBoxSelfAlignClassNames() {
		const boxClassNames = {};
		// 自身对齐方式
		if (this.vAlignSelf || this.hAlignSelf) {
			// 自身垂直对齐模式
			Object.assign(boxClassNames, {
				[`self-valign--${this.vAlignSelf.toLowerCase()}`]: true,
			});
			// 自身水平对齐模式
			Object.assign(boxClassNames, {
				[`self-halign--${this.hAlignSelf.toLowerCase()}`]: true,
			});
		}
		return boxClassNames;
	}

    /**
     * 获取容器样式表
     * @protected
     * @return {*} 
     * @memberof PanelDetailController
     */
    protected getContainerClassName() {
        const containerClassName = {};
        if (this.sysCss) {
			Object.assign(containerClassName, {
				[this.sysCss]: true,
			});
		}
        return containerClassName;
    }

    /**
     * 获取动态样式表
     *
     * @protected
     * @memberof PanelDetailController
     */
    protected getDynaClassNames() {
        const dynaClass = {};
        try {
            const data = this.data;
            const content = this.context;
            const viewParams = this.viewParams;
            if (this.dynaClass) {
                Object.assign(dynaClass,...eval(this.dynaClass))
            }
        } catch (error) {
            
        }
        return dynaClass;
    }

    /**
	 * 获取盒子边框类名（元素）
	 *
	 * @protected
	 * @return {*} 
	 * @memberof PanelDetailController
	 */
	protected getBoxBorderClassNames() {
		const classNames = {};
		if (this.borderStyle !== 'NONE') {
			Object.assign(classNames, { [`border--${this.borderStyle.toLowerCase()}`]: true });
		}
		return classNames;
	}
}