<!-- 加班审批 -->
<template>
	<div class='overtimeApproval'>
		<div class="addApproval">
			<el-button slot="reference" @click="showOvertime" type="primary" ><i class="el-icon-plus"></i>新增</el-button>
		</div>
		<el-tabs v-model="activeName" style="margin-top: 20px;" type="card"  @tab-click="handleClick">
			<el-tab-pane name="overtime" style="border-top-left-radius: 40px;">
				<span slot="label" class="tabMargin">
					我的申请
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<approval-table :tableList="tableData" :user="propUser" @delete="deleteApprovalItem" @trData="showDetailDialogClick"></approval-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="overtimeApproval" v-if="showApprovalManage">
				<span slot="label" class="tabMargin">
					我的审批
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<approval-table :tableList="tableData" :user="propUser" @delete="deleteApprovalItem" @trData="showDetailDialogClick"></approval-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<overtime-approval :showOvertimeDialog="showOvertimeDialog" :task="taskData" :depart="departData" @close="closeDialog"></overtime-approval>
		<overtime-detail :showOvertimeDetailDialog="showOvertimeDetailDialog" :depart="departData" :overtimeDetail="overtimeDetail" @close="closeDialog"></overtime-detail>
		<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 approvalTable from '../../components/approvalTable';
	import overtimeApproval from '../../components/overtimeDialog';
	import overtimeDetail from '../../components/overtimeDetail';
	export default {
		name: "overTimeApproval",
//import引入的组件需要注入到对象中才能使用
		components: {approvalTable, overtimeApproval, overtimeDetail},
		data () {
//这里存放数据
			return {
				activeName: 'overtime',
				tableData: [],
				userDetail: '',
				showOvertimeDialog: false,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				showApprovalManage: false,
				showOvertimeDetailDialog: false,
				overtimeDetail: '',
				departData: [],
				taskData: [],
				propUser: ''
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			showOvertime() {
				this.showOvertimeDialog = true;
			},
			showDetailDialogClick(val) {
				console.log(val)
				this.overtimeDetail = val;
				this.showOvertimeDetailDialog = true;
			},
			closeDialog(val) {
				if (val === 'add') {
					this.showOvertimeDialog = false;
					this.getDataListOvertime();
				} else if (val === 'closeDialog') {
					this.showOvertimeDetailDialog = false;
					// this.userDetail.roles !== undefined && this.userDetail.roles.length > 0 && this.userDetail.roles[0].authorities.findIndex(item => item.name === '审批管理') > -1
				} else if (val === 'refresh') {
					this.showOvertimeDetailDialog = false;
					this.getDataListOvertimeApproval();
				}
			},
			handleClick(tab, event) {
				// console.log(tab, event);
				this.currentPage = 1;
				if (tab.name === 'overtime') {
					this.getDataListOvertime();
				} else {
					this.getDataListOvertimeApproval();
				}
			},
			getDepart() {
				this.$axios.getApprovalDepartment().then((res) => {
					console.log(res)
					if(res.status === 200) {
						this.departData = res.data;
					}
				})
			},
			getTaskOvertime() {
				this.$axios.getTaskOvertime(this.userDetail.id).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.taskData = res.data;
					}
				})
			},
			getDataListOvertime() {
				let obj = {
					"currentPage": this.currentPage,
					"id": this.userDetail.id,
					"pageSize": 10,
					"totalCount": 0,
					"totalPage": 0
				}
				this.$axios.postApprovalOvertimeSubmit(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						let data = JSON.parse(JSON.stringify(res.data.rows));
						data.forEach((v, i) => {
							v.approvalType = '加班';
						})
						this.propUser = JSON.parse(JSON.stringify(this.userDetail));
						this.tableData = data;
						this.total = res.data.totalCount;
					}
				})
			},
			getDataListOvertimeApproval() {
				let obj = {
					"currentPage": this.currentPage,
					"id": this.userDetail.id,
					"pageSize": 10,
					"totalCount": 0,
					"totalPage": 0
				}
				this.$axios.postApprovalOvertimeAudit(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						let data = JSON.parse(JSON.stringify(res.data.rows));
						data.forEach((v, i) => {
							v.approvalType = '加班';
						})
						this.propUser = JSON.parse(JSON.stringify(this.userDetail));
						this.tableData = data;
						this.total = res.data.totalCount;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				if (this.activeName === 'overtime') {
					this.getDataListOvertime();
				} else {
					this.getDataListOvertimeApproval();
				}
				console.log(`当前页: ${val}`);
			},
			deleteApprovalItem(val) {
				console.log(val)
				console.log(this.activeName)
				this.$axios.deleteOvertime(val.id).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.$message({
							message: '删除成功！',
							type: 'success'
						});
						if (this.activeName === 'overtime') {
							this.getDataListOvertime();
						} else {
							this.getDataListOvertimeApproval();
						}
					}
				})
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {
			this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			if (this.userDetail.roles !== undefined && this.userDetail.roles.length > 0 && this.userDetail.roles[0].authorities.findIndex(item => item.name === '审批管理') > -1) {
				this.showApprovalManage = true;
			}
			this.getDataListOvertime();
			this.getDepart();
			this.getTaskOvertime();
		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {

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

	.addApproval{
		position: absolute;
		right: 0;
		top: -10px;
		z-index: 1000;
	}

	.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-overtime {
		border-top-left-radius: 40px;
	}
	/deep/ #tab-overtimeApproval {
		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);
	}

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

</style>
