<template>
	<div class="toolbar-container">
		<el-collapse v-model="activeNames" class="tool-list">
			<el-collapse-item name="1">
				<template slot="title">
					<span class="text_oneLine">文本设置</span>
				</template>
				<ul class="tool-icons">
					<li class="disabled" v-if="DisableText"/>
					<li class="icon-item font-li">
						<el-select v-model="initConfig.text.size" @change="setGraphStyle({attr:'text/fontSize',val:initConfig.text.size})">
							<el-option
								v-for="item in sizeOptions"
								:key="item"
								:label="item"
								:value="item">
									<div style="min-width:50px;">
										<span>{{ item }}</span>
									</div>
							</el-option>
						</el-select>
					</li>
					<li :class="['icon-item',{ 'bold-act': initConfig.text.fontWeight === 'bold'}]" @click="toggleBold(initConfig.text.fontWeight)">
						<i class="iconfont icon-bold"/>
					</li>
					<li class="icon-item">
						<el-color-picker
							v-model="initConfig.text.color"
							size="mini"
							:predefine="colorsOptions"
							@change="setGraphStyle({attr:'text/fill',val:initConfig.text.color})"
						/>
					</li>
				</ul>
			</el-collapse-item>
			<el-collapse-item name="2">
				<template slot="title">
					<span class="text_oneLine">线条设置</span>
				</template>
				<ul class="tool-icons">
					<li class="disabled" v-if="DisableLine"/>
					<li class="icon-item font-li">
						<el-select v-model="initConfig.line.width" @change="setGraphStyle({attr:'line/strokeWidth',val:initConfig.line.width})">
							<el-option
								v-for="item in [1,2,3,4,5]"
								:key="item"
								:label="item"
								:value="item">
									<div style="min-width:50px;">
										<span>{{ item }}</span>
									</div>
							</el-option>
						</el-select>
					</li>
					<li class="icon-item">
						<el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: '4 4'}">
									<i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i>
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'line/strokeDasharray',val: null}">
										<i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="icon-item">
						<el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/arrow.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'',val: 'classic' , key:'end'}">
									<i class="iconfont icon-arrow-right" style="color:'#000';fontSize:24px"></i>
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'',val: 'classic' , key:'start'}">
										<i class="iconfont icon-arrow-left" style="color:'#000';fontSize:24px"></i>
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'',val: 'classic' , key:'both'}">
										<i class="iconfont icon-arrow-both" style="color:'#000';fontSize:30px"></i>
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'',val: '' , key:'none'}">
										<i class="iconfont icon--shixian" style="color:'#000';fontSize:32px"></i>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="icon-item">
						<el-color-picker
							v-model="initConfig.line.color"
							size="mini"
							:predefine="colorsOptions"
							@change="setGraphStyle({attr:'line/stroke',val:initConfig.line.color})"
						/>
					</li>	
				</ul>
			</el-collapse-item>
			<el-collapse-item name="3">
				<template slot="title">
					<span class="text_oneLine">线框设置</span>
				</template>
				<ul class="tool-icons">
					<li class="disabled" v-if="DisableBorder"/>
					<li class="icon-item font-li">
						<el-select v-model="initConfig.border.width" @change="setGraphStyle({attr:'rect/strokeWidth',val:initConfig.border.width})">
							<el-option
								v-for="item in [1,2,3,4,5]"
								:key="item"
								:label="item"
								:value="item">
									<div style="min-width:50px;">
										<span>{{ item }}</span>
									</div>
							</el-option>
						</el-select>
					</li>
					<li class="icon-item">
						<el-dropdown trigger="click" @command="setGraphStyle">
							<div class="el-dropdown-link">
								<img src="~@/assets/icons/line.svg" width="20" height="20" style="vertical-align: middle;">
								<i class="el-icon-arrow-down" style="font-size:12px;"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item :command="{attr:'rect/strokeDasharray',val: '4 4'}">
									<i class="iconfont icon--xuxian" style="color:'#000';fontSize:30px"></i>
								</el-dropdown-item>
								<el-dropdown-item :command="{attr:'rect/strokeDasharray',val: null}">
										<i class="iconfont icon--shixian" style="color:'#000';fontSize:30px"></i>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li class="icon-item">
						<el-tooltip class="item" effect="dark" content="边框颜色" placement="top">
							<el-color-picker
								v-model="initConfig.border.borderColor"
								size="mini"
								:predefine="colorsOptions"
								@change="setGraphStyle({attr: 'rect/stroke',val: initConfig.border.borderColor})"
							/>
						</el-tooltip>	
					</li>
					<li class="icon-item">
						<el-tooltip class="item" effect="dark" content="填充颜色" placement="top">
							<el-color-picker
							v-model="initConfig.border.fill"
							size="mini"
							:predefine="colorsOptions"
							@change="setGraphStyle({attr: 'rect/fill',val: initConfig.border.fill})"
						/>
						</el-tooltip>
					</li>
				</ul>
			</el-collapse-item>
			<el-collapse-item name="4">
				<template slot="title">
					<span class="text_oneLine">基础图形</span>
				</template>
				<ul class="nodes-bar">
					<li 
						v-for="shape in myNodes" 
						:key="shape.key"
					>
						<div 
							:style="shape.styles" 
							@mousedown="dragStart(shape,$event)"
						>
							{{shape.label}}
						</div>
					</li>
				</ul>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import '@/assets/icons/iconfont.css';
import { Addon } from '@antv/x6'
/* const { Addon } = X6; */
import { mapState } from 'vuex'
import { myNodes,myNodeOption } from '../common/node';
import { configOpt,colorsOptions,sizeOptions } from '../common/toolConfig';
export default {
	name:'',
	props: ['graph'],
	watch: {
		graph(newval) {
			// console.log(newval)
			this.dnd = new Addon.Dnd({
        target: this.graph,
				animation: true,
        validateNode() {
          return true;
        },
      });
		},
		// initConfig(newval) {
		// 	console.log(newval)
		// }
	},
	computed: {
		...mapState({
			initConfig: state => state.sand.initConfig,
			DisableText: state => state.sand.DisableText,
			DisableLine: state => state.sand.DisableLine,
			DisableBorder: state => state.sand.DisableBorder,
			selectCell: state => state.sand.selectCell,
		
		})
	},
	data () {
		return {
			myNodes,
			colorsOptions,
			sizeOptions,
			// initConfig: {
			// 	...configOpt
			// },
			activeNames: ['1','2','3','4'],
			dnd: null,
			select_shape: '',//选中的图形

		};
	},
	methods: {

		/* 拖拽入画布创建节点 */
		dragStart(data,e) {
			// console.log(data,e)
			const { key,shape } = data;
			
			const	node = this.graph.createNode({
				shape,
				...myNodeOption(key),
			});

			this.dnd.start(node,e);
			this.$parent.isShowTip = false;
		},

		/* 切换加粗样式 */
		toggleBold(val) {

			this.$store.commit('sand/SET_BOLD_STYLE',{ attr:'text/fontWeight',val: val === 'normal' ? 'bold' : 'normal'});

		},

		/* 设置样式  直接接收属性*/
		setGraphStyle({attr,val,key= ''}) {

			!key &&	this.selectCell.attr(`${attr}`,val);
			//设置字体时 适配行高
			if(attr === 'text/fontSize') {
				console.log(this.selectCell)
				this.selectCell.attr('text/lineHeight',val*1.3);
			}

			// key 用于特殊处理箭头样式
			switch(key) {
				case 'end': 
					this.selectCell.attr('line/targetMarker',val);
					this.selectCell.attr('line/sourceMarker',null); 
					break;
				case 'start': 
					this.selectCell.attr('line/targetMarker',null);
					this.selectCell.attr('line/sourceMarker',val); 
					break;
				case 'both': 
					this.selectCell.attr('line/targetMarker',val);
					this.selectCell.attr('line/sourceMarker',val); 
					break;
				case 'none': 
					this.selectCell.attr('line/targetMarker',null);
					this.selectCell.attr('line/sourceMarker',null); 
					break;
			}

		},
	},

	created() {},
	mounted() {
	},
}
</script>
<style lang='scss'>
.toolbar-container {
		.tool-list {
			.el-collapse-item__header {
				background-color: #fff;
				margin-bottom: 0;
				box-shadow: 0px 0px 6px rgba(145, 145, 145, 0.2);
				padding: 0 10px;
				.el-collapse-item__arrow {
					position: absolute;
					left: 70px;
				}
			}
			.el-collapse-item__wrap {
				background: #fff;
				border-bottom: none;
			}
			.el-collapse-item__content {
				padding-bottom: 0;
			}

			.tool-icons {
				padding: 25px 10px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;
				.el-color-picker {
					display: block;
					&.el-color-picker--mini {
						height: 20px;
					}
					.el-color-picker__trigger {
						width: 40px;
						height: 20px;
						padding: 0;
						border: 0;
					}
				}
				.el-color-picker__icon {
					color: #333;
					left: 115%;
					font-size: 16px;
					&:before {
						/* content: '\e790'; */
						content: '\e6df';
						font-size: 12px;
					}
				}
				.el-select {
					.el-input__inner {
						border: none;
						height: 28px;
						padding: 0;
						line-height: 28px;
						width: 30px;
						background: transparent;
					}
					.el-input__suffix {
						/* display: none; */
						top: -5px;right: -10px;

						.el-select__caret {
							transform: rotateZ(0);
						}

						.el-icon-arrow-up:before {
							/* content: "\e790"; */
							content: "\e6df";
							font-size: 12px;
							color: #333;
						}
					}
				}
				.disabled {
					color: #bbb;
					background: rgba(0, 0, 0, 0.08);
					cursor: not-allowed;
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					z-index: 1;
				}
				.icon-item {
					padding: 0 4px;
					margin-right: 15px;
					position: relative;
					&.font-li {
						border: 1px solid #DBDCDD;
						padding: 0 6px;
						border-radius: 4px;
					}
					&.bold-act {
						background: #ccc;
						font-weight: bold;
					}
					&:hover {
						background: #ccc;
						cursor: pointer;
					}
				}
			}

			.nodes-bar {
				padding: 20px;
				display: flex;
				flex-wrap: wrap;
				li {
					padding: 4px;
					&.select {
						border: 1px solid #f00;
					}
					&:hover {
						cursor: pointer;
						transform: scale(1.05);
					}

				}
			}
		}
}
</style>