<!-- 部门任务 -->
<template>
	<div class='departmentTask'>
		<!--{{taskListData}}-->
		<div>
			<ul>
				<li class="colorLi" v-for="(item, index) in colorList" :key="index">
					<span :style="{color: item.color}">{{item.name}}</span>
					<span :style="{background: item.color}" class="colorSpan"></span>
				</li>
			</ul>
		</div>
		<div id="containerTree">
			<!--<el-table-->
							<!--:data="taskListData"-->
							<!--@row-click="openDetails"-->
							<!--style="width: 100%">-->
				<!--<el-table-column-->
								<!--prop="title"-->
								<!--label="任务名称"-->
								<!--align="center">-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="publisher"-->
								<!--label="发布者"-->
								<!--align="center">-->
					<!--<template slot-scope="scope">-->
						<!--<span>{{scope.row.publisher.username}}</span>-->
					<!--</template>-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="executor"-->
								<!--align="center"-->
								<!--label="执行者">-->
					<!--<template slot-scope="scope">-->
						<!--<span>{{scope.row.executor.username}}</span>-->
					<!--</template>-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="stateTime"-->
								<!--label="任务开始时间"-->
								<!--align="center">-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="status"-->
								<!--align="center"-->
								<!--label="任务状态">-->
					<!--<template slot-scope="scope">-->
						<!--<span>{{$common.statusName(scope.row.status)}}</span>-->
					<!--</template>-->
				<!--</el-table-column>-->
			<!--</el-table>-->
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import G6 from '@antv/g6';
	export default {
		name: "DepartmentTask",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				taskListData: [],
				colorList: [
					{name: '进行中', color: '#3cc65c'},
					{name: '待审核', color: '#ed0044'},
					{name: '未发布', color: '#666666'},
					{name: '待考评', color: '#e25d03'},
					{name: '已完结', color: '#075991'},
					{name: '已删除', color: '#ff0000'},
				]
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			openDetails(val) {
				console.log(val)
				localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(val)));
				this.$router.push({name: 'taskDetails'});
			},
			getDeaprtmentTask(val) {
				this.$axios.getTaskFindById(val).then((res) => {
					console.log(res)
					if (res.status === 200) {
						// this.taskListData = res.data;
						let dataObj = {
							wordId: '123',
							title: '部门任务',
							status: 'none',
							children: []
						}
						let replaceData = JSON.parse(JSON.stringify(res.data.workMppings).replace(/workMppings/g, 'children'));
						dataObj.children = replaceData;
						console.log(dataObj)
						// this.drawTree(dataObj);
						// this.drawNew();
						this.drawNewTree(dataObj)
					}
				})
			},
			drawNewTree(val) {
				G6.Util.traverseTree(val, function(item) {
					item.id = item.wordId;
				});
				const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
					return [[ 'M', x, y ], [ 'a', r, r, 0, 1, 0, r * 2, 0 ], [ 'a', r, r, 0, 1, 0, -r * 2, 0 ], [ 'M', x + 2, y ], [ 'L', x + 2 * r - 2, y ]];
				};
				const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
					return [[ 'M', x, y ], [ 'a', r, r, 0, 1, 0, r * 2, 0 ], [ 'a', r, r, 0, 1, 0, -r * 2, 0 ], [ 'M', x + 2, y ], [ 'L', x + 2 * r - 2, y ], [ 'M', x + r, y - r + 2 ], [ 'L', x + r, y + r - 2 ]];
				};
				G6.registerNode('tree-node', {
					drawShape: function drawShape(cfg, group) {
						let attrs = {}
						if (cfg.status === 'unpublished') {
							attrs= {
								fill: '#666666',
								stroke: '#666666',
								cursor: 'pointer'
							}
						} else if (cfg.status === 'ongoing') {
							attrs= {
								fill: '#3cc65c',
								stroke: '#3cc65c',
								cursor: 'pointer'
							}
						} else if (cfg.status === 'audit') {
							attrs= {
								fill: '#ed0044',
								stroke: '#ed0044',
								cursor: 'pointer'
							}
						} else if (cfg.status === 'review') {
							attrs= {
								fill: '#e25d03',
								stroke: '#e25d03',
								cursor: 'pointer'
							}
						} else if (cfg.status === 'finished') {
							attrs= {
								fill: '#075991',
								stroke: '#075991',
								cursor: 'pointer'
							}
						} else if (cfg.status === 'delete') {
							attrs= {
								fill: '#ff0000',
								stroke: '#ff0000',
								cursor: 'pointer'
							}
						} else {
							attrs= {
								fill: '#999',
								stroke: '#ececec'
							}
						}
						const rect = group.addShape('rect', {
							// attrs: {
							// 	fill: '#fff',
							// 	stroke: 'red'
							// }
							attrs: attrs
						});
						const content = cfg.title; // .replace(/(.{19})/g, '$1\n')
						const text = group.addShape('text', {
							attrs: {
								text: content,
								x: 0,
								y: 0,
								textAlign: 'left',
								textBaseline: 'middle',
								fill: '#FFF',
								cursor: 'pointer'
							}
						});
						const bbox = text.getBBox();
						const hasChildren = cfg.children && cfg.children.length > 0;
						if (hasChildren) {
							group.addShape('marker', {
								attrs: {
									x: bbox.maxX + 24,
									y: bbox.minX + bbox.height / 2 - 6,
									r: 6,
									symbol: COLLAPSE_ICON,
									stroke: attrs.stroke,
									lineWidth: 2
								},
								className: 'collapse-icon'
							});
						}
						rect.attr({
							x: bbox.minX - 4,
							y: bbox.minY - 6,
							width: bbox.width + (hasChildren ? 26 : 8),
							height: bbox.height + 12
						});
						return rect;
					}
				}, 'single-shape');


				const width = document.getElementById('containerTree').scrollWidth;
				const height = document.getElementById('containerTree').scrollHeight;
				const graph = new G6.TreeGraph({
					container: 'containerTree',
					width,
					height,
					modes: {
						default: [{
							type: 'collapse-expand',
							onChange: function onChange(item, collapsed) {
								console.log(item)
								const data = item.get('model');
								const icon = item.get('group').findByClassName('collapse-icon');
								if (collapsed) {
									icon.attr('symbol', EXPAND_ICON);
								} else {
									icon.attr('symbol', COLLAPSE_ICON);
								}
								data.collapsed = collapsed;
								return true;
							}
						}, 'drag-canvas', 'zoom-canvas' ]
					},
					defaultNode: {
						type: 'tree-node',
						anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]]
					},
					defaultEdge: {
						type: 'cubic-horizontal',
						style: {
							stroke: '#A3B1BF'
						}
					},
					layout: {
						type: 'compactBox',
						direction: 'LR',
						getId: function getId(d) {
							return d.wordId;
						},
						getHeight: function getHeight() {
							return 16;
						},
						getWidth: function getWidth() {
							return 16;
						},
						getVGap: function getVGap() {
							return 20;
						},
						getHGap: function getHGap() {
							return 300;
						}
					}
				});

				graph.data(val);
				graph.render();
				graph.fitView();
				let that = this;
				graph.on('click', function(event) {
					console.log(event)
					if (event.item !== null) {
						const item = event.item.defaultCfg.model;
						console.log(item)
						if (item.wordId !== '123') {
							localStorage.setItem('taskDetail', that.$Base64.encode(JSON.stringify(item)));
							that.$router.push({name: 'taskDetails'})
						}
					}
				});
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			console.log(data)
			let that = this;
			setTimeout(function () {
				that.getDeaprtmentTask(data.id);
			}, 200)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.departmentTask{
		height: 100%;
	}
	#containerTree{
		width: 100%;
		height: 92%;
	}

	.colorLi{
		float: left;
		margin-right: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
	}

	.colorSpan{
		display: inline-block;
		margin-left: 10px;
		width: 30px;
		height: 10px;
		border-radius: 4px;
	}
</style>
