<!-- 查看个人任务状态 -->
<template>
	<div class='personTask'>
		<div style="height: 99%;">
			<el-tabs type="border-card">
				<el-tab-pane label="接受的任务">
					<div>
						<ul class="statisticsUl">
							<li>总任务数： 20</li>
							<li>执行中的任务： 20</li>
							<li>已完成的任务： 20</li>
							<li>工作状态： 忙碌</li>
						</ul>
						<div>
							<ul>
								<li class="taskLi" v-for="(item, index) in reviceData" :key="index">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span style="float: left;">任务名称：{{item.taskName}}</span>
											<span>发布者：{{item.announcer}}</span>
											<span style="float: right;">状态：{{item.status}}</span>
										</div>
										<div style="padding: 15px 20px;text-align: left;">
											<span>{{item.des}}</span>
										</div>
									</el-card>
								</li>
							</ul>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="分解的任务">
					<div>
						<ul class="statisticsUl">
							<li>总任务数： 20</li>
							<li>执行中的任务： 20</li>
							<li>已完成的任务： 20</li>
							<li>工作状态： 忙碌</li>
						</ul>
						<div>
							<ul>
								<li class="taskLi" v-for="(item, index) in breakDownData" :key="index">
									<el-card class="box-card">
										<div slot="header" class="clearfix">
											<span style="float: left;">任务名称：{{item.taskName}}</span>
											<span>发布者：{{item.announcer}}</span>
											<span style="float: right;">状态：{{item.status}}</span>
										</div>
										<div class="taskDes">
											<span>{{item.des}}</span>
										</div>
									</el-card>
								</li>
							</ul>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

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

	export default {
		name: "PersonTask",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				reviceData: [
					{taskName: '工作簿代码编写', announcer: '李四', status: '进行中', des: '后端代码编写，前端代码编写'}
				],
				breakDownData: [
					{taskName: '工作簿后端代码编写', announcer: '王五', status: '待审批', des: '后端代码编写'}
				]
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.personTask{
		height: 100%;
	}
	.statisticsUl li{
		float: left;
		margin-right: 30px;
		font-size: 20px;
	}

	.taskLi{
		clear: both;
		padding-top: 20px;
		font-size: 20px;
		text-align: center;
	}

	.taskDes{
		clear: both;
		padding: 15px 20px;
		text-align: left;
	}

	/deep/ .el-tabs__nav {
		white-space: nowrap;
		position: relative;
		transition: -webkit-transform .3s;
		-webkit-transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
		transition: transform .3s,-webkit-transform .3s;
		float: left;
		z-index: 2;
		width: 51%;
	}

	/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
		-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
		transition: all .3s cubic-bezier(.645,.045,.355,1);
		border: 1px solid transparent;
		margin-top: -1px;
		color: #909399;
		width: 100%;
	}

	/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
		color: #409EFF;
		background-color: #FFF;
		border-right-color: #DCDFE6;
		border-left-color: #DCDFE6;
	}
</style>
