import { configOpt } from './toolConfig';

const { line,border,text } = configOpt;

//定义图形
const configStyles = {
	rect: {
		width: '120px',
		height: '50px',
		textAlign: 'center',
		lineHeight: '50px',
		border: '1px solid #5b8ffa',
		backgroundColor: border.fill,
		borderColor: border.borderColor,
		borderRadius: '4px',
		color: '#7D7671',
		margin: '0 10px 20px 0',
	},
	text: {
		width: '110px',
		height: '50px',
		textAlign: 'center',
		lineHeight: '50px',
		background: '#fff',
		color: text.color,
		fontSize: '14px',
		fontWeight: 'normal',
		
	},
	date: {
		width: '120px',
		height: '50px',
		textAlign: 'center',
		lineHeight: '50px',
		backgroundColor: '#5B9BD5',
		borderRadius: '4px',
		color: '#fff',
		fontSize: '14px',
		fontWeight: 'bold'
	}

}

/* 图形种类 */
export const myNodes = [
	{
		shape: 'rect',
		key: 'rect',
		label: '双击输入文本',
		styles: {
			...configStyles.rect,
		}
	},
	{
		shape: 'rect',
		key: 'text',
		label: '双击替换文本',
		styles: {
			...configStyles.text,
		}
	},
	{
		shape: 'rect',
		key: 'date',
		label:'Date:',
		styles: {
			...configStyles.date,
		}
	},

]


/* ports 样式 */
export const portStyle = {
	attrs: {
		circle: {
				// dataClass: 'choice-point',
				r: 5,
				magnet: true,
				stroke: border.borderColor,
				strokeWidth: 1,
				fill: '#fff'
		}
	}
}
// 创建的节点配置 框 文本 日期
export const myNodeOption = (key) => {
	switch (key) {
		case 'rect': 
			return {
				width: 120,
				height: 50,
				data: {
					key
				},
				attrs: {
					rect: {
						stroke: border.borderColor,
						strokeWidth: border.width,
						fill: border.fill,
						strokeDasharray: null,
					},
					text: {
						fill: text.color,
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						textWrap: {
							width: -10,
						},
					}
				},
				ports: {
					items: [
							{ group: 'port-top', id: 'p_top' },
							{ group: 'port-bottom', id: 'p_bottom' },
							{ group: 'port-left', id: 'p_left' },
							{ group: 'port-right', id: 'p_right' },
					],
					groups: {
							"port-top": {
									position: 'top',
									zIndex: 20,
									...portStyle
							},
							"port-bottom": {
									position: 'bottom',
									zIndex: 20,
									...portStyle
							},
							"port-left": {
									position: 'left',
									zIndex: 20,
									...portStyle
							},
							"port-right": {
									position: 'right',
									zIndex: 20,
									...portStyle
							},
					}
				},
			}
		case 'date': 
			return {
				width: 120,
				height: 50,
				data: {
					key,
				},
				attrs: {
					rect: {
						stroke: '#5B9BD5',
						strokeWidth: 1,
						fill: '#5B9BD5'
					},
					text: {
						text: 'Date:',
						fill: '#fff',
						fontSize: 18,
						fontWeight: 'normal',
						lineHeight: text.lineHeight,
						textWrap: {
							width: -10,
						},
					}
				},
				ports: false
			}
		case 'text': 
			return {
				width: 120,
				height: 50,
				data: {
					key,
				},
				attrs: {
					rect: {
						stroke: '',
						strokeWidth: 0,
						fill: 'transparent',
					},
					text: {
						text: '双击替换文本',
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fill: text.color,
						textWrap: {
							width: -10,
						},
					}
				},
			}
	}
	
}