<!-- 加班申请详情 -->
<template>
	<div class='overtimeDetail'>
		<el-dialog title="" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogOvertimeDetailVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">加班申请详情</span>
				<img @click="closeDialog('closeDialog')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="">
				<div class="approvalDiv">
					<el-form label-width="130px" class="demo-ruleForm">
						<el-row :gutter="20">
							<el-col :span="8">
								<el-form-item label="申请人">
									<div>{{overtimeDetail.userName}}</div>
								</el-form-item>
								<el-form-item label="任务名">
									<div>{{overtimeDetail.name}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="部门" >
									<span>{{departNameFind(overtimeDetail.departmentId, depart)}}</span>
								</el-form-item>
								<el-form-item label="组员" >
									<span v-show="overtimeDetail.groupMenberName !== undefined && overtimeDetail.groupMenberName.length === 0">无</span>
									<span v-show="overtimeDetail.groupMenberName !== undefined && overtimeDetail.groupMenberName.length > 0" v-for="(item, index) in overtimeDetail.groupMenberName" :key="index">{{item}}<span v-show="(index + 1) !== overtimeDetail.groupMenberName.length">、</span></span>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="时间">
									<div>{{overtimeDetail.overDate}}</div>
								</el-form-item>
								<el-form-item label="审核人">
									<span>{{overtimeDetail.auditName}}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="状态">
							<span :style="{color: $common.colorNum(overtimeDetail.status)}">{{$common.approvalStatusName(overtimeDetail.status)}}</span>
						</el-form-item>
						<el-form-item class="first" label="加班事由" prop="des">
							<div class="approvalDes">{{overtimeDetail.description}}</div>
						</el-form-item>
					</el-form>
				</div>
				<div class="dialogBtns" v-show="userDetail.roles !== undefined && userDetail.roles.length > 0 && userDetail.roles[0].authorities.findIndex(item => item.name === '审批管理') > -1 && overtimeDetail.status === '0'">
					<el-button class="mrgt" type="primary" @click="overtimeDetailSubmit('1')">审批通过</el-button>
					<el-button class="mrgt" type="primary" @click="overtimeDetailSubmit('2')">审批不通过</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

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

	export default {
		name: "overtineDetail",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props: ['showOvertimeDetailDialog', 'overtimeDetail', 'depart'],
		data () {
//这里存放数据
			return {
				dialogOvertimeDetailVisible: false,
				userDetail: '',
				departmentName: ''
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showOvertimeDetailDialog: {
				immediate: true,
				handler(val) {
					this.dialogOvertimeDetailVisible = val;
					console.log(this.overtimeDetail)
				}
			},
		},
//方法集合
		methods: {
			departNameFind(id, depart) {
				console.log(id, depart)
				let name = '';
				if (depart !== undefined && depart.length > 0 && id !== undefined) {
					depart.forEach((v, i) => {
						if (v.id === id) {
							name = v.name;
						}
					})
				}
				return name
			},
			closeDialog(val) {
				this.$emit('close', val);
			},
			overtimeDetailSubmit(val) {
				console.log(val);
				console.log(this.overtimeDetail)
				this.$axios.postAuditOvertimeApproval(this.userDetail.id, val, this.overtimeDetail).then((res) => {
					console.log(res)
					if (res.status === 200) {
						this.$message({
							message: '审批申请成功！',
							type: 'success'
						});
						this.closeDialog('refresh');
					}
				})
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.approvalDiv{
		margin: 20px 70px;
	}
	.approvalDes{
		width: 100%;
		height: 200px;
		background-color: #EFF2FA;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		text-indent: 10px;
	}

	/deep/ .el-form-item__label {
		text-align: center;
		vertical-align: middle;
		float: none;
		font-size: 18px;
		color: #787682;
		line-height: 40px;
		padding: 0 12px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/deep/ .el-form-item__content {
		line-height: 40px;
		position: relative;
		font-size: 18px;
		font-weight: bold;
		margin-left: 0 !important;
		color: #19152c;
	}

	.dialogBtns{
		position: fixed;
		bottom: 0;
		left: 10%;
		width: 80%;
		margin: 80px auto;
		text-align: center;
		border-top: 2px solid #5059D5;
	}

	.mrgt{
		margin-top: 20px;
		margin-right: 20px;
	}
</style>
