<!-- 查看任务 -->
<template>
	<div class='viewTask'>
		<el-tabs v-model="activeName" style="" type="border-card"  @tab-click="handleClick">
			<el-tab-pane name="first">
				<span slot="label">
					<!--<i class="el-icon-date"></i>-->
					我的待办任务
					<el-badge :is-dot="meCommissionUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
					<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
						<el-badge :is-dot="item.readState === 1" class="item">
							<div class="taskContent">
								<span class="">
									<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
								</span>
								<span :title="item.title" class="taskItem">任务名称：{{item.title}}</span>
								<span :title="item.release" class="taskItem">发布者：{{item.release}}</span>
								<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间：{{$common.timeYMDHMSFilter(item.time)}}</span>
								<span :title="item.executor" class="taskItem">执行人：{{item.executor}}</span>
								<!--<span :title="item.crewList" class="taskItem">组员：{{item.crewList}}</span>-->
								<span :title="item.status" class="taskItem">状态：{{$common.statusName(item.status)}}</span>
								<span :title="item.latestNews" class="taskItem">最近一次操作：{{item.latestNews}}</span>
							</div>
						</el-badge>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane name="four">
				<span slot="label">
					<!--<i class="el-icon-date"></i>-->
					我的发布任务
					<el-badge :is-dot="meReleaseUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
					<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
						<el-badge :is-dot="item.readState === 1" class="item">
							<div class="taskContent">
								<span class="">
									<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
								</span>
								<span :title="item.title" class="taskItem">任务名称：{{item.title}}</span>
								<span :title="item.release" class="taskItem">发布者：{{item.release}}</span>
								<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间：{{$common.timeYMDHMSFilter(item.time)}}</span>
								<span :title="item.executor" class="taskItem">执行人：{{item.executor}}</span>
								<!--<span :title="item.crewList" class="taskItem">组员：{{item.crewList}}</span>-->
								<span :title="item.status" class="taskItem">状态：{{$common.statusName(item.status)}}</span>
								<span :title="item.latestNews" class="taskItem">最近一次操作：{{item.latestNews}}</span>
							</div>
						</el-badge>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane name="three">
				<span slot="label">
					<!--<i class="el-icon-date"></i>-->
					我的分解任务
					<el-badge :is-dot="meResolveUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
					<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
						<el-badge :is-dot="item.readState === 1" class="item">
							<div class="taskContent">
								<span class="">
									<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
								</span>
								<span :title="item.title" class="taskItem">任务名称：{{item.title}}</span>
								<span :title="item.release" class="taskItem">发布者：{{item.release}}</span>
								<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间：{{$common.timeYMDHMSFilter(item.time)}}</span>
								<span :title="item.executor" class="taskItem">执行人：{{item.executor}}</span>
								<!--<span :title="item.crewList" class="taskItem">组员：{{item.crewList}}</span>-->
								<span :title="item.status" class="taskItem">状态：{{$common.statusName(item.status)}}</span>
								<span :title="item.latestNews" class="taskItem">最近一次操作：{{item.latestNews}}</span>
							</div>
						</el-badge>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane name="second">
				<span slot="label">
					<!--<i class="el-icon-date"></i>-->
					我的相关任务
					<el-badge :is-dot="meRelatedUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;padding: 0px 30px;">
					<el-card @click.native="taskDetails(item)" style="margin-bottom: 10px;" class="box-card cardShadow" v-for="(item,index) in dataList" :key="index">
						<el-badge :is-dot="item.readState === 1" class="item">
							<div class="taskContent">
								<span class="">
									<img class="itemImgStatus" v-show="item.workAttribution === 1" src="../assets/images/related.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 3" src="../assets/images/released.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 2" src="../assets/images/breakdown.png"/>
									<img class="itemImgStatus" v-show="item.workAttribution === 4" src="../assets/images/receive.png"/>
								</span>
								<span :title="item.title" class="taskItem">任务名称：{{item.title}}</span>
								<span :title="item.release" class="taskItem">发布者：{{item.release}}</span>
								<span :title="$common.timeYMDHMSFilter(item.time)" class="taskItem">开始时间：{{$common.timeYMDHMSFilter(item.time)}}</span>
								<span :title="item.executor" class="taskItem">执行人：{{item.executor}}</span>
								<!--<span :title="item.crewList" class="taskItem">组员：{{item.crewList}}</span>-->
								<span :title="item.status" class="taskItem">状态：{{$common.statusName(item.status)}}</span>
								<span :title="item.latestNews" class="taskItem">最近一次操作：{{item.latestNews}}</span>
							</div>
						</el-badge>
					</el-card>
				</div>
			</el-tab-pane>
		</el-tabs>
		<div style="text-align: center;margin: 10px 0;">
			<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size="pageSize"
							layout="prev, pager, next, jumper"
							:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import wsk from '../utils/webSocket';
	import {mapGetters} from 'vuex';
	export default {
		name: "ViewTask",
//import引入的组件需要注入到对象中才能使用
		components: {
			// pagination
		},
		data () {
//这里存放数据
			return {
				activeName: 'first',
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				total: 100,
				userDetail: '',
				meCommissionUnread: 0, // 待办未读
				meRelatedUnread: 0, // 相关未读
				meResolveUnread: 0, // 分解未读
				meReleaseUnread: 0, // 发布未读
			};
		},
//监听属性 类似于data概念
		computed: {
			...mapGetters([
				'getRealData',
			])
		},
//监控data中的数据变化
		watch: {
			getRealData: {
				handler: function () {
					let that = this;
					setTimeout(function () {
						that.socketDate();
					},800)
				},
				deep: true
			},
		},
//方法集合
		methods: {
			firstSocket(val) {
				this.$axios.postFirstWebSocket(val).then(() => {
					// console.log(res)
				})
			},
			handleClick(tab, event) {
				console.log(this.activeName)
				this.currentPage = 1;
				if (tab.name === 'second') {
					this.getDataListRelated();
				} else if (tab.name === 'three') {
					this.getDataListBreakDown();
				} else if (tab.name === 'four') {
					this.getDataListRelease();
				} else {
					this.getDataListUpcoming();
				}
			},
			getDataListUpcoming() {
				let obj = {
					id: this.userDetail.id,
					page: this.currentPage,
					size: this.pageSize
				}
				this.$axios.postUpcoming(obj).then((res) => {
					console.log(res)
					this.total = res.data.count;
					this.dataList = res.data.eventTitles;
				})
			},
			getDataListRelease() {
				let obj = {
					id: this.userDetail.id,
					page: this.currentPage,
					size: this.pageSize
				}
				this.$axios.postRelease(obj).then((res) => {
					console.log(res)
					this.total = res.data.count;
					this.dataList = res.data.eventTitles;
				})
			},
			getDataListBreakDown() {
				console.log(333)
				let obj = {
					id: this.userDetail.id,
					page: this.currentPage,
					size: this.pageSize
				}
				this.$axios.postBreakDown(obj).then((res) => {
					console.log(res)
					this.total = res.data.count;
					this.dataList = res.data.eventTitles;
				})
			},
			getDataListRelated() {
				let obj = {
					id: this.userDetail.id,
					page: this.currentPage,
					size: this.pageSize
				}
				this.$axios.postRelated(obj).then((res) => {
					console.log(res)
					this.total = res.data.count;
					this.dataList = res.data.eventTitles;
				})
			},
			taskDetails(val) {
				// console.log(val)
				let obj = {
					eventId: val.workId,
					id: this.userDetail.id,
					readState: val.readState
				}
				this.$axios.postChangeReadStatus(obj).then((res) => {
					console.log(res)
				})
				if (val.status === 'unpublished') {
					// this.$store.commit('changeUnpublishedData', {
					// 	unpublishedData: val
					// });
					localStorage.setItem('unpublished', this.$Base64.encode(JSON.stringify(val)));
					this.$router.push({name: 'unpublishedTask'});
				} else {
					localStorage.setItem('taskDetail', this.$Base64.encode(JSON.stringify(val)));
					this.$router.push({name: 'taskDetails'})
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				if (this.activeName === 'first') {
					this.getDataListUpcoming();
				} else if (this.activeName === 'second') {
					this.getDataListRelated();
				} else if (this.activeName === 'three') {
					this.getDataListBreakDown();
				} else {
					this.getDataListRelease();
				}
				console.log(`当前页: ${val}`);
			},
			socketDate() {
				let real = this.$store.getters.getRealData.realData;
				console.log(real)
				if (real !== undefined) {
					this.meCommissionUnread = real.meCommissionUnread;
					this.meRelatedUnread = real.meRelatedUnread;
					this.meResolveUnread = real.meResolveUnread;
					this.meReleaseUnread = real.meReleaseUnread;
				}
			},

		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {
			let st = { // 将整个数据池传给了st
				socks: this.$store
			};
			wsk.serverZAX(st);
			let that = this;
			window.addEventListener('beforeunload', e => { // 点击刷新触发
				that.socks.commit('changeRealData', {
					realData: {}
				});
			});
		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			let data = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			this.userDetail = data;
			this.firstSocket(data.id);
			let that = this;
			// let thisStore = this.$store;
			setTimeout(function () {
				that.getDataListUpcoming();
				// wsk.serverZAX(thisStore);
			}, 200)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.viewTask{
		height: 99%;
		padding: 0 50px;
	}

	/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: 25%;
	}

	/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%;
		font-size: 26px;
		text-align: center;
		margin-left: 0px;
		/*border: 1px solid #e4e7ed;*/
	}

	/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;
	}

	.taskTitle{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.taskContent{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between ;
		align-items: left;
		height: 20px;
		line-height: 20px;
		position: relative;
	}

	.itemImgStatus{
		position: absolute;
		top: -0px;
		left: -15px;
		width: 20px;
	}

	.taskItem{
		width: 16%;
		font-size: 20px;
		/*text-align: center;*/
		white-space:nowrap;/* 规定文本是否折行 */
		overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
		text-overflow: ellipsis;
	}
	/*.taskLeftItem{*/
		/*width: 16%;*/
		/*font-size: 20px;*/
		/*text-align: left;*/
		/*white-space:nowrap;!* 规定文本是否折行 *!*/
		/*overflow: hidden;!* 规定超出内容宽度的元素隐藏 *!*/
		/*text-overflow: ellipsis;*/
	/*}*/
	/*.taskRightItem{*/
		/*width: 16%;*/
		/*font-size: 20px;*/
		/*text-align: center;*/
		/*white-space:nowrap;!* 规定文本是否折行 *!*/
		/*overflow: hidden;!* 规定超出内容宽度的元素隐藏 *!*/
		/*text-overflow: ellipsis;*/
	/*}*/

	/deep/.el-card__body {
		padding: 15px;
	}

	/deep/ .el-card.is-always-shadow {
		box-shadow: none;
	}

	/deep/ .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
		-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}

	.cardShadow:hover{
		cursor: pointer;
		box-shadow: 0 5px 15px 0 rgba(7,81,154,0.3) !important;
	}

	/deep/ .cardDiv .el-badge__content.is-fixed {
		position: absolute;
		top: -5px;
		right: 0px;
		-webkit-transform: translateY(-50%) translateX(100%);
		transform: translateY(-50%) translateX(100%);
	}

	/deep/ .cardDiv .el-badge {
		width: 100%;
		position: relative;
		vertical-align: middle;
		display: inline-block;
	}
</style>
