<!-- 部门任务 -->
<template>
	<div class='departmentTask' ref="tableDiv">
		<div class="treeDiv">
			<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: $common.colorStatus(node.data.status)}">{{$common.statusName(node.data.status)}}</span>
      </span>
			</el-tree>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	export default {
		name: "DepartmentTask",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				defaultProps: { // element tree 默认参数
					children: 'workMppings',
					label: 'title'
				},
				data: [], // tree数据
				divHeight: 0, // 高度
				taskListData: [],
				currentTask: '',
				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.divHeight = this.$refs.tableDiv.clientHeight;
						this.data = res.data;
					}
				})
			},
			handleNodeClick(data) { // 点击tree跳转任务详情
				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)
			},
		},
//生命周期 - 创建完成（可以访问当前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: 99%;
		padding: 30px 20px;
	}
	#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;
	}

	/deep/ .el-tree {
		height: 750px;
		position: relative;
		cursor: default;
		background: #FFF;
		color: #606266;
	}
</style>
