<!-- 查看任务 -->
<template>
	<div class='viewTask'>
		<el-tabs v-model="activeName" style="margin-top: 20px;" type="card"  @tab-click="handleClick">
			<el-tab-pane name="first" style="border-top-left-radius: 40px;">
				<span slot="label" class="tabMargin">
					<!--<i class="el-icon-date"></i>-->
					待办任务
					<el-badge style="margin-left: 10px;" :is-dot="meCommissionUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<view-task-table :tableList="dataList" @trData="taskDetails"></view-task-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="four">
				<span slot="label" class="tabMargin">
					<!--<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;">
					<view-task-table :tableList="dataList" @trData="taskDetails"></view-task-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="three">
				<span slot="label" class="tabMargin">
					<!--<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;">
					<view-task-table :tableList="dataList" @trData="taskDetails"></view-task-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="second">
				<span slot="label" class="tabMargin">
					<!--<i class="el-icon-date"></i>-->
					相关任务
					<el-badge style="margin-left: 10px;" :is-dot="meRelatedUnread === 1" class="item"></el-badge>
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<view-task-table :tableList="dataList" @trData="taskDetails"></view-task-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<div class="pageClass">
			<el-pagination
							background
							hide-on-single-page
							@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';
	import viewTaskTable from '../../components/viewTaskTable';
	export default {
		name: "ViewTask",
//import引入的组件需要注入到对象中才能使用
		components: {
			viewTaskTable
		},
		data () {
//这里存放数据
			return {
				activeName: 'first',
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				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() {
				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)));
					let obj = {
						active: this.activeName,
						page: this.currentPage
					}
					this.$store.commit('changeSaveView', {
						saveView: obj
					})
					// localStorage.setItem('taskIndex', this.$Base64.encode(JSON.stringify(obj)));
					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}`);
			},
			saveViewClick(val) {
				this.activeName = val.active;
				this.currentPage = val.page;
				if (val.active === 'first') {
					this.getDataListUpcoming();
				} else if (val.active === 'second') {
					this.getDataListRelated();
				} else if (val.active === 'three') {
					this.getDataListBreakDown();
				} else {
					this.getDataListRelease();
				}
				let obj = {};
				this.$store.commit('changeSaveView', {
					saveView: obj
				})
			},
			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;
			let that = this;
			let storeValue = this.$store.getters.getSaveView.saveView;
			console.log(storeValue)
			// let thisStore = this.$store;
			setTimeout(function () {
				if (storeValue !== undefined && storeValue.url !== undefined && storeValue.url === 'taskDetails') {
					that.saveViewClick(storeValue);
				} else {
					that.getDataListUpcoming();
				}
			}, 200)
			setTimeout(function () {
				that.firstSocket(data.id);
			}, 500)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.viewTask{
		height: 100%;
		position: relative;
	}

	.pageClass {
		/*text-align: center;*/
		/*position: absolute;*/
		/*bottom: 0px;*/
		/*left: 50%;*/
		/*width: 500px;*/
		/*margin-left: -250px;*/
		text-align: center;
		position: fixed;
		bottom:30px;
		left:0;
		right:0;
		width: 500px;
		margin-left: 44%;
	}

	.tabMargin{
		margin: 0 30px;
		font-size: 18px;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
		border: 0px solid #E4E7ED;
		border-bottom: none;
		border-radius: 40px 40px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ #tab-first {
		border-top-left-radius: 40px;
	}
	/deep/ #tab-second {
		border-top-right-radius: 40px;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
		border-bottom-color: #FFF;
		background: linear-gradient(to right, #50A4D5 , #5054D5);
		color: #FFF;
	}

	/deep/ .el-tabs__item:hover {
		border-bottom-color: #FFF;
		color: #FFF;
		background: linear-gradient(to right, #50A4D5 , #5054D5);
		cursor: pointer;
	}

	/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
		border-bottom: 1px solid transparent;
		border-left: 1px solid #FFF;
		-webkit-transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
		transition: color .3s cubic-bezier(.645,.045,.355,1),padding .3s cubic-bezier(.645,.045,.355,1);
	}

	/deep/ .el-tabs__item {
		padding: 0 20px;
		height: 40px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		line-height: 40px;
		display: inline-block;
		list-style: none;
		font-size: 14px;
		font-weight: 500;
		color: #464358;
		background: #dcdcf7;
		position: relative;
	}

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

	/deep/ .el-tabs--card>.el-tabs__header {
		border-bottom: 2px solid rgb(167, 172, 234);
	}
</style>
