<!-- 任务管理 -->
<template>
	<div class='taskManage'>
		<ul class="userAuthority">
			<li class="addTask" v-show="showAddTask" @click="taskClick('addTask')">
				<div class="nameManage">新建任务</div>
			</li>
			<li class="viewTask" @click="taskClick('viewTask')">
				<div class="nameManage">查看任务</div>
			</li>
			<li class="viewTask" v-show="showDepartment" @click="taskClick('departmentTask')">
				<div class="nameManage">部门任务</div>
			</li>
		</ul>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "TaskManage",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				showAddTask: false,
				showDepartment: false,
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			taskClick(val) {
				this.$router.push({name: val});
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			console.log(data)
			if (data.roles.length === 0) {
				this.showAddTask = false;
				this.showDepartment = false;
			} else {
				if (data.roles.length > 0) {
					if (data.roles[0].authorities.findIndex(item => item.name === '分解任务') > -1) {
						this.showAddTask = true;
					}
					if (data.roles[0].authorities.findIndex(item => item.name === '查看任务') > -1) {
						this.showDepartment = true;
					}
				}
			}
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.taskManage{
		width: 100%;
		height: 100%;
		background: #FFF;
	}

	.addTask{
		background: url("../assets/images/yd.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.viewTask{
		background: url("../assets/images/yd.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
