<!-- 部门任务 -->
<template>
	<div class='departmentTask' ref="tableDiv">
		<!--{{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 style="padding: 0 40px;">
			<el-tree :data="data"
				@current-node-key="currentTask"
				:default-expand-all="false"
				:expand-on-click-node="false"
				:props="defaultProps"
				@node-click="handleNodeClick">
				<!-- :render-content="renderContent" -->
				<span class="custom-tree-node" slot-scope="{ node, data }">
        <span :title="node.label" class="treeTitle">任务名称：{{ node.label }}</span>
        <span class="treeStatus" :style="{color: colorSelect($common.statusName(node.data.status))}">{{$common.statusName(node.data.status)}}</span>
      </span>
			</el-tree>
		</div>
		<div>
			<!--<el-table-->
							<!--:data="taskListData"-->
							<!--style="width: 100%;"-->
							<!--row-key="wordId"-->
							<!--border-->
							<!--@row-click="openDetails"-->
							<!--:height="divHeight"-->
							<!--default-expand-all-->
							<!--:tree-props="{children: 'workMppings', hasChildren: 'hasChildren'}">-->
				<!--<el-table-column-->
								<!--prop="title"-->
								<!--label="任务名称">-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="status"-->
								<!--label="状态">-->
					<!--<template slot-scope="scope">-->
						<!--<span>{{$common.statusName(scope.row.status)}}</span>-->
					<!--</template>-->
				<!--</el-table-column>-->
				<!--<el-table-column-->
								<!--prop="wordId"-->
								<!--label="id">-->
				<!--</el-table-column>-->
			<!--</el-table>-->
		</div>
		<div>
			<!--<el-collapse v-model="activeNames" @change="handleChange">-->
				<!--<el-collapse-item title="工作簿" name="1">-->
					<!--<div>-->
						<!--<el-collapse-item title="工作簿2" name="5">-->
							<!--<div>-->
								<!--<el-collapse-item title="工作簿3" name="6">-->
									<!--<div>-->
<!--111-->
									<!--</div>-->
								<!--</el-collapse-item>-->
							<!--</div>-->
						<!--</el-collapse-item>-->
					<!--</div>-->
				<!--</el-collapse-item>-->
				<!--<el-collapse-item title="反馈 Feedback" name="2">-->
					<!--<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>-->
					<!--<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>-->
				<!--</el-collapse-item>-->
				<!--<el-collapse-item title="效率 Efficiency" name="3">-->
					<!--<div>简化流程：设计简洁直观的操作流程；</div>-->
					<!--<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>-->
					<!--<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>-->
				<!--</el-collapse-item>-->
				<!--<el-collapse-item title="可控 Controllability" name="4">-->
					<!--<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
					<!--<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
				<!--</el-collapse-item>-->
			<!--</el-collapse>-->
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import G6 from '@antv/g6';
	export default {
		name: "DepartmentTask",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				defaultProps: {
					children: 'workMppings',
					label: 'title'
				},
				data: [],
				divHeight: 0,
				taskListData: [],
				currentTask: '',
				colorList: [
					{name: '进行中', color: '#3cc65c'},
					{name: '待审核', color: '#ed0044'},
					{name: '未发布', color: '#666666'},
					{name: '待考评', color: '#e25d03'},
					{name: '已完结', color: '#075991'},
					{name: '已删除', color: '#ff0000'},
				],
				activeNames: ['1']
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			colorSelect(val) {
				let color;
				switch(val) {
					case '进行中':
						color = '#3cc65c';
						break;
					case '待审核':
						color = '#ed0044';
						break;
					case '未发布':
						color = '#666666';
						break;
					case '待考评':
						color = '#e25d03';
						break;
					case '已完结':
						color = '#075991';
						break;
					case '已删除':
						color = '#ff0000';
						break;
					default:
						break;
				}
				return color;
			},
			handleChange(val) {
				console.log(val);
			},
			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.workMppings;
						this.divHeight = this.$refs.tableDiv.clientHeight;
						let newData = JSON.parse(JSON.stringify(res.data.workMppings));
						this.exec(newData)
						this.data = res.data.workMppings;
						// newData = JSON.parse(newData);
						// console.log(newData)
						// this.taskListData = newData;
						// 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)
					}
				})
			},
			handleNodeClick(data) {
				console.log(data);
				localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(data)));
				this.$router.push({name: 'taskDetails'});
			},
			exec(array) {
				array.forEach(item => {
					if (item.workMppings.length === 0) {
						delete item.workMppings
					} else {
						this.exec(item.workMppings)
					}
				})
				console.log(array)
				this.taskListData = array;
			},
			renderContent(h, { node, data, store }) {
				// node.data.statuaName = this.$common.statusName(node.data.status);
				// console.log(node)
				// let statusName = data.status;
				// data.statuaName = this.$common.statusName(statusName);
				// console.log(data);
				return (
					<span class="custom-tree-node">
					<div>
					<span style="">任务名称：{node.label}</span>
				<span style="margin-left: 70px;">{node}</span>
				</div>
				</span>);
			},
			statusColor(val) {
				console.log(val)
			},
			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;
	}
	/deep/ .el-tree-node__content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 40px;
		font-size: 18px;
		margin: 10px 0;
		cursor: pointer;
	}

	.treeTitle{
		display: inline-block;
		width: 800px;
		height: 30px;
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.treeStatus{
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
