import { configOpt } from './toolConfig';
import store from "@/vuex/index"

const { line,border,text } = configOpt;

const styleConfig=store.state.sand.styleConfig

//定义图形
const configStyles = {
	rect: {
		width: '30px',
		height: '18px',
		border: `2px solid #27292A`
	},
	roundRect: {
		width: '30px',
		height: '18px',
		border: `2px solid #27292A`,
		borderRadius:"8px"
	},
	ellipse:{
		width: '30px',
		height: '18px',
		border: `2px solid #27292A`,
		borderRadius:"100%"
	},
	rhomboid:{
		width: '14px',
		height: '14px',
		border: `2px solid #27292A`,
		transform: 'rotate(-45deg) skew(10deg, 10deg)',
		position:'relative',
		left:'4px',
		marginRight:'6px'
	},
	text: {
		width: '30px',
		height: '18px',
		textAlign: 'center',
		lineHeight: '18px',
		border: `2px solid #27292A`,
		color: '#333333',
		fontSize: '14px',
		fontWeight: 'bold',
	},
}

export const myNodes = [
	{
		shape: 'rect',
		key: 'rect',
		label:'',
		img:'~@/assets/img/chart_m/User_act.png',
		styles: {
			...configStyles.rect,
		}
	},
	{
		shape: 'rect',
		key: 'roundRect',
		label:'',
		styles: {
			...configStyles.roundRect,
		}
	},
	{
		shape: 'ellipse',
		key: 'ellipse',
		label:'',
		styles: {
			...configStyles.ellipse,
		}
	},
	{
		shape: 'polygon',
		key: 'rhomboid',
		label:'',
		styles: {
			...configStyles.rhomboid,
		}
	},
	{
		shape: 'rect',
		key: 'text',
		label: 'T',
		styles: {
			...configStyles.text,
		}
	},
]


/* 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: 60,
				height: 40,
				data: {
					key
				},
				attrs: {
					body: {
						stroke: styleConfig.borderColor,
						strokeWidth: border.width,
						fill:styleConfig.backgroundColor,
						strokeDasharray: null,
					},
					text: {
						fill: styleConfig.color,
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fontStyle:"normal",
						textDecoration:'none',
						relativeLineHeight:1.3,
						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 'roundRect': 
			return {
				width: 60,
				height: 40,
				data: {
					key
				},
				attrs: {
					body: {
						stroke: styleConfig.borderColor,
						strokeWidth: border.width,
						fill: styleConfig.backgroundColor,
						strokeDasharray: null,
						rx:8,
						ry:8
					},
					text: {
						fill: styleConfig.color,
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fontStyle:"normal",
						textDecoration:'none',
						relativeLineHeight:1.3,
						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 'ellipse': 
			return {
				width: 60,
				height: 40,
				data: {
					key
				},
				attrs: {
					body: {
						stroke: styleConfig.borderColor,
						strokeWidth: border.width,
						fill: styleConfig.backgroundColor,
						strokeDasharray: null,
					},
					text: {
						fill: styleConfig.color,
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fontStyle:"normal",
						textDecoration:'none',
						relativeLineHeight:1.3,
						textWrap: {
							width: -10,
						},
					}
				},
				ports: {
					items: [
							{ group: 'port-ellipse', id: 'p_top' },
							{ group: 'port-ellipse', id: 'p_bottom' },
							{ group: 'port-ellipse', id: 'p_left' },
							{ group: 'port-ellipse', id: 'p_right' },
							{ group: 'port-ellipse', id: 'p_top-1' },
							{ group: 'port-ellipse', id: 'p_bottom-1' },
							{ group: 'port-ellipse', id: 'p_left-1' },
							{ group: 'port-ellipse', id: 'p_right-1' },
					],
					groups: {
							"port-ellipse": {
									position: 'ellipseSpread',
									zIndex: 20,
									...portStyle
							},
							// "port-bottom": {
							// 		position: 'bottom',
							// 		zIndex: 20,
							// 		...portStyle
							// }
					}
				},
			}
		case 'rhomboid': 
			return {
				width: 60,
				height: 60,
				// angle:-45,
				data: {
					key
				},
				attrs: {
					body: {
						stroke: styleConfig.borderColor,
						strokeWidth: border.width,
						fill: styleConfig.backgroundColor,
						strokeDasharray: null,
						refPoints: '0,10 10,0 20,10 10,20',
					},
					text: {
						fill: styleConfig.color,
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fontStyle:"normal",
						textDecoration:'none',
						relativeLineHeight:1.3,
						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 'text': 
			return {
				width: 60,
				height: 40,
				data: {
					key,
				},
				attrs: {
					body: {
						stroke: '',
						strokeWidth: 0,
						fill: 'transparent',
					},
					text: {
						text: '文本',
						fontSize: text.size,
						lineHeight: text.lineHeight,
						fontWeight: 'normal',
						fontStyle:"normal",
						textDecoration:'none',
						relativeLineHeight:1.3,
						fill: styleConfig.textColor,
						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
							}
					}
				},
			}
	}
}

