<!-- 加班弹框 -->
<template>
	<div class='overTime'>
		<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="dialogApprovalVisible">
			<div slot="title" class="header-title">
				<span class="dialogHeader">新增加班申请</span>
				<img @click="closeDialog('overtimeForm')" class="dialogHeaderClose" src="../assets/images/dialogClose.png" />
			</div>
			<div class="">
				<div class="approvalDiv">
					<el-form :model="overtimeForm" :rules="rules" ref="overtimeForm" label-width="130px" class="demo-ruleForm">
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item label="申请人">
									<div>{{userDetail.username}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="部门" prop="department">
									<el-select style="width: 100%;" v-model="overtimeForm.department" placeholder="请选择部门">
										<el-option
														v-for="item in departData"
														:key="item.id"
														:label="item.name"
														:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="时间" prop="time">
									<el-date-picker
													v-model="overtimeForm.time"
													type="date"
													:editable="false"
													:clearable="false"
													placeholder="选择时间"
													value-format="yyyy-MM-dd"
													style="width: 100%;">
									</el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="任务" prop="task">
									<el-select style="width: 100%;" @change="taskFindUser" v-model="overtimeForm.task" placeholder="请选择任务">
										<el-option
														v-for="item in taskData"
														:key="item.id"
														:label="item.title"
														:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<div>
							<el-form-item class="groupAdd" label="组员" prop="groupList">
								<el-select style="width: 100%;"  v-model="overtimeForm.groupList" multiple placeholder="请选择组员">
									<el-option
													v-for="item in groupData"
													:key="item.id"
													:label="item.username"
													:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
						<el-form-item class="first" label="加班事由" prop="des">
							<el-input type="textarea" :rows="10" v-model="overtimeForm.des"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="dialogBtns">
					<el-button class="mrgt" type="primary" @click="overTimeSubmit('overtimeForm')">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

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

	export default {
		name: "overTimeDialog",
//import引入的组件需要注入到对象中才能使用
		components: {},
		props: ['showOvertimeDialog', 'depart', 'task'],
		data () {
//这里存放数据
			return {
				dialogApprovalVisible: false,
				departData: [],
				overtimeForm: {
					department: '',
					des: '',
					groupList: [],
					task: '',
					time: '',
				},
				taskTitle: '',
				rules: {
					department: [
						{ required: true, message: '请选择部门', trigger: 'change' }
					],
					time: [
						{ required: true, message: '请选择时间', trigger: 'change' }
					],
					task: [
						{ required: true, message: '请选择任务', trigger: 'change' }
					],
					// groupList: [
					// 	{ type: 'array', required: true, trigger: 'change', message: '请选择组员' }
					// ],
					des: [
						{ required: true, message: '请填写加班事由', trigger: 'blur' }
					]
				},
				userDetail: '',
				groupData: [],
				taskData: []
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {
			showOvertimeDialog: {
				immediate: true,
				handler(val) {
					this.dialogApprovalVisible = val;
				}
			},
			depart: {
				immediate: true,
				handler(val) {
					console.log(val)
					this.departData = val;
				}
			},
			task: {
				immediate: true,
				handler(val) {
					console.log(val)
					this.taskData = val;
				}
			}
		},
//方法集合
		methods: {
			closeDialog(formName) {
				this.$refs[formName].resetFields();
				this.$emit('close', 'add');
			},
			taskFindUser(val) {
				console.log(val)
				this.taskData.forEach((v, i) => {
					if (v.id === val) {
						this.groupData = v.users;
						this.taskTitle = v.title;
					}
				})
			},
			overTimeSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let obj = {
							"applyTime": null,
							"auditId": null,
							"departmentId": this.overtimeForm.department,
							"description": this.overtimeForm.des,
							"groupMenbers": this.overtimeForm.groupList,
							"id": null,
							"name": this.taskTitle,
							"overDate": this.overtimeForm.time,
							"status": null,
							"userId": this.userDetail.id,
							auditName: null,
							userName: null
						}
						console.log(obj)
						this.$axios.postSubmitOvertimeApproval(obj).then((res) => {
							console.log(res)
							if (res.status === 200) {
								this.$message({
									message: '新增加班申请成功！',
									type: 'success'
								});
								this.closeDialog('overtimeForm');
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.userDetail = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			console.log(this.userDetail);
			this.overtimeForm.time = this.$common.timeYMDFilter(new Date());
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.approvalDiv{
		width: 90%;
		margin: 30px auto;
		text-align: left;
	}

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

	.mrgt{
		margin-top: 20px;
	}

	/deep/ .el-textarea__inner {
		display: block;
		resize: vertical;
		padding: 5px 15px;
		line-height: 1.5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		font-size: 18px;
		color: #606266;
		background-color: #EFF2FA;
		background-image: none;
		border: 1px solid #DCDFE6; /*no*/
		border-radius: 4px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	}

	/deep/ .el-form-item__label {
		text-align: center;
		vertical-align: middle;
		float: none;
		font-size: 18px;
		color: #606266;
		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: 14px;
		margin-left: 0 !important;
	}

	.groupAdd /deep/ .el-input__inner {
		-webkit-appearance: none;
		background-color: #EFF2FA;
		background-image: none;
		border-radius: 4px;
		border: 0px solid #DCDFE6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #19152c;
		display: inline-block;
		font-size: 18px;
		height: 60px !important;
		line-height: 60px !important;
		outline: 0;
		padding: 0 15px;
		-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		width: 100%;
	}

	.groupAdd /deep/ .el-tag {
		background-color: #FFF;
		border-color: #FFF;
		display: inline-block;
		height: 35px;
		padding: 0 15px;
		line-height: 35px;
		margin-right: 10px;
		font-size: 16px;
		color: #19152c;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.groupAdd /deep/ .el-select .el-input .el-select__caret {
		color: #19152c;
	}
</style>
