<!-- 审批管理 -->
<template>
	<div class='approvalManage'>
		<div class="addApproval">
			<el-button slot="reference" @click="showApproval" 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="leave" 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="userDetail" @trData="showDetailDialogClick" @delete="deleteApprovalItem"></approval-table>
				</div>
			</el-tab-pane>
			<el-tab-pane name="approval" v-if="showApprovalManage">
				<span slot="label" class="tabMargin">
					我的审批
				</span>
				<div class="cardDiv" style="height: 100%;overflow-y: auto;">
					<approval-table :tableList="tableData" :user="userDetail" @trData="showDetailDialogClick" @delete="deleteApprovalItem"></approval-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<add-approval :showApprovalDialog="showApprovalDialog" :depart="treeData" @close="closeDialog"></add-approval>
		<approval-detail :showApprovalDetailDialog="showApprovalDetailDialog" :depart="treeData" :approvalDetail="approvalDetail" @close="closeDialog"></approval-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 addApproval from '../../components/approvalDialog';
	import approvalDetail from '../../components/approvalDetailDialog';
	export default {
		name: "approvalManage",
//import引入的组件需要注入到对象中才能使用
		components: {approvalTable, addApproval, approvalDetail},
		data () {
//这里存放数据
			return {
				activeName: 'leave',
				tableData: [],
				userDetail: '',
				showApprovalDialog: false,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				showApprovalManage: false,
				showApprovalDetailDialog: false,
				approvalDetail: '',
				activeIndex: 1,
				treeData: [],
				propUser: '',
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			showApproval() {
				this.showApprovalDialog = true;
			},
			showDetailDialogClick(val) {
				console.log(val)
				this.approvalDetail = val;
				this.showApprovalDetailDialog = true;
			},
			closeDialog(val) {
				if (val === 'add') {
					this.showApprovalDialog = false;
					this.getDataListApplication();
				} else if (val === 'closeDialog') {
					this.showApprovalDetailDialog = false;
				} else if (val === 'refresh') {
					this.showApprovalDetailDialog = false;
					this.getDataListApproval();
				}
			},
			handleClick(tab, event) {
				// console.log(tab, event);
				this.currentPage = 1;
				if (tab.name === 'leave') {
					this.getDataListApplication();
				} else {
					this.getDataListApproval();
				}
			},
			getDataListApplication() {
				let obj = {
					"currentPage": this.currentPage,
					"id": this.userDetail.id,
					"pageSize": 10,
					"totalCount": 0,
					"totalPage": 0
				}
				this.$axios.postApprovalSubmit(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.propUser = JSON.parse(JSON.stringify(this.userDetail));
						this.tableData = res.data.rows;
						this.total = res.data.totalCount;
					}
				})
			},
			getDataListApproval() {
				let obj = {
					"currentPage": this.currentPage,
					"id": this.userDetail.id,
					"pageSize": 10,
					"totalCount": 0,
					"totalPage": 0
				}
				this.$axios.getApprovalAudit(obj).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.propUser = JSON.parse(JSON.stringify(this.userDetail));
						this.tableData = res.data.rows;
						this.total = res.data.totalCount;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				if (this.activeName === 'leave') {
					this.getDataListApplication();
				} else {
					this.getDataListApproval();
				}
				console.log(`当前页: ${val}`);
			},
			getDepart() {
				this.$axios.getApprovalDepartment().then((res) => {
					console.log(res)
					if(res.status === 200) {
						this.treeData = res.data;
					}
				})
			},
			deleteApprovalItem(val) {
				console.log(val)
				console.log(this.activeName)
				this.$axios.deleteApproval(val.id).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.$message({
							message: '删除成功！',
							type: 'success'
						});
						if (this.activeName === 'leave') {
							this.getDataListApplication();
						} else {
							this.getDataListApproval();
						}
					}
				})
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			if (this.userDetail !== undefined && this.userDetail.roles !== undefined && this.userDetail.roles.length > 0) {
				if (this.userDetail.roles[0].authorities.findIndex(item => item.name === '审批管理') > -1) {
					this.showApprovalManage = true;
				}
			}
			this.getDataListApplication();
			this.getDepart();
			// let that = this;
			// setTimeout(function () {
			//
			// }, 100)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.approvalManage{
		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-leave {
		border-top-left-radius: 40px;
	}
	/deep/ #tab-approval {
		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>
