<template>
	<div class="tree">
		<div class="content">
			<el-tree
				:data="treeData"
				node-key="id"
				default-expand-all
				:expand-on-click-node="expandOnClickNode"
				highlight-current
				:props="defaultProps"
				ref="tree"
				@node-click="treeClick"
				:filter-node-method="filterNode"
				style="margin-bottom: 25px;"
			>
				<span class="span-ellipsis" slot-scope="{ node, data }">
					<span
						><el-tag type="success">{{ data.count }}</el-tag></span
					>
					<span :title="node.label">{{ node.label }}</span>
				</span>
			</el-tree>
		</div>
		<div class="tree-bottom__wrap">
			<el-switch
				v-model="isExpand"
				active-text="默认展开"
				inactive-text="默认收起"
				@change="handleValChange"
			></el-switch>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import process from '@/api/process';

export default {
	name: 'flowTree',
	props: {
		loadCount: Function,
		isAsideShow: {
			type: Boolean,
			default: false,
		},
	},
	components: {},
	data() {
		return {
			isExpand: false,
			filterText: '',
			expandOnClickNode: false,
			defaultProps: {
				children: 'children',
				label: 'name',
			},
			treeData: [],
		};
	},
	computed: {
		...mapState('storeProcess', ['pagination']),
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		},
	},
	methods: {
		//流程分类默认展开收起事件
		handleValChange(val) {
			this.$emit('switch-change', val);
		},
		treeClick(n, i, e) {
			this.$emit('currentTree', n);
		},
		//过滤函数
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		cancelCheck() {
			this.$refs.tree.setCurrentKey(null);
		},
		getCountMap(array) {
			let map = {};
			array.forEach(item => {
				if (item.typeId === null) {
					map[''] = item.count;
				} else {
					map[item.typeId] = item.count;
				}
			});
			return map;
		},
		fillCountIntoTree(tree, map) {
			tree.count = map[tree.id] ? map[tree.id] : 0;
			tree.name += ' ';
			if (tree.children == null) {
				return tree.count;
			}
			for (let i = 0; i < tree.children.length; i++) {
				let child = tree.children[i];
				let count = this.fillCountIntoTree(child, map);
				tree.count += count;
				if (count === 0) {
					tree.children.remove(child);
					i--;
				}
			}
			return tree.count;
		},
		getTotal(data) {
			let total = 0;
			data.forEach(item => {
				total += item.count;
			});
			return total;
		},
	},
	created() {
		this.isExpand = this.isAsideShow;
		process.getFlowTree(response => {
			this.treeData = response.data;
			this.loadCount(this.pagination).then(data => {
				let map = this.getCountMap(data);
				this.fillCountIntoTree(this.treeData[0], map);
				this.treeData[0].count = this.getTotal(data);
			});
			/*process.getCountByUserId(this.pagination).then(data=>{
          let map = this.getCountMap(data);
          this.fillCountIntoTree(this.treeData[0],map);
          this.treeData[0].count += map[""];
        });*/
		});
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.tree {
	margin-left: 13px;
	.tree-bottom__wrap {
		height: 30px;
		line-height: 30px;
		position: fixed;
		bottom: 30px;
		background: #fff;
	}
}
.common {
	width: 100%;
	margin-top: 6px;
}
.flows {
	display: block;
	font-size: 14px;
	color: $--color-primary;
	text-decoration: none;
	margin-left: 24px;
}
/deep/.el-input__inner {
	height: 36px;
}
.span-ellipsis {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
</style>
