<!-- 参数配置 -->
<template>
	<div class='paramsSetting'>
		<div style="height: 100%;">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane  name="base">
					<span slot="label" class="tabMargin">
					基础配置
				</span>
					<div style="margin: 0 30px;">
						<el-form :model="baseForm" :rules="rules" ref="baseForm" label-width="120px" class="demo-ruleForm">
							<el-row :gutter="100">
								<el-col :span="8">
									<el-form-item label="上班时间" prop="workTime">
										<el-time-picker :clearable="false" value-format="HH:mm:ss" placeholder="选择上班时间" v-model="baseForm.workTime" style="width: 90%;"></el-time-picker>
									</el-form-item>
									<el-form-item label="下班时间" prop="afterWorkTime">
										<el-time-picker :clearable="false" value-format="HH:mm:ss" placeholder="选择下班时间" v-model="baseForm.afterWorkTime" style="width: 90%;"></el-time-picker>
									</el-form-item>

									<el-form-item label="弹性迟到扣分1" prop="latePointsFifteen">
										<el-input v-model="baseForm.latePointsFifteen" placeholder="迟到15分钟以上，1小时以内扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="弹性迟到扣分2" prop="latePointsHalfOfDay">
										<el-input v-model="baseForm.latePointsHalfOfDay" placeholder="迟到1小时以上到半天内扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>

									<el-form-item label="弹性迟到时间1" prop="lateNumOfFixedTime">
										<el-input v-model="baseForm.lateNumOfFixedTime" placeholder="迟到15分钟以上，1小时以内扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="弹性迟到时间2" prop="lateWorkTimeOne">
										<el-input v-model="baseForm.lateWorkTimeOne" placeholder="迟到1小时以上到半天内扣分"></el-input>
										<span style="margin-left: 10px;">时</span>
									</el-form-item>
									<el-form-item label="弹性迟到时间3" prop="lateWorkTimeTwo">
										<el-input v-model="baseForm.lateWorkTimeTwo" placeholder="迟到1小时以上到半天内扣分"></el-input>
										<span style="margin-left: 10px;">时</span>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="日基础分" prop="score">
										<el-input v-model="baseForm.score" @change="baseScore" placeholder="请输入每日考勤基础分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="迟到次数" prop="lateNum">
										<el-input v-model="baseForm.lateNum" placeholder="请输入迟次到数"></el-input>
										<span style="margin-left: 10px;">次</span>
									</el-form-item>

									<el-form-item label="事假半天扣分" prop="thingHalfOfDay">
										<el-input v-model="baseForm.thingHalfOfDay" placeholder="事假半天扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="事假一天扣分" prop="thingDay">
										<el-input v-model="baseForm.thingDay" placeholder="事假一天扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>

									<el-form-item label="加班一小时" prop="workOverScore">
										<el-input v-model="baseForm.workOverScore" placeholder="加班一小时加分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="全天旷工扣分" prop="absenteeism">
										<el-input v-model="baseForm.absenteeism" placeholder="全天旷工扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="全年病假次数" prop="sickNum">
										<el-input v-model="baseForm.sickNum" placeholder="全年可请病假次数"></el-input>
										<span style="margin-left: 10px;">次</span>
									</el-form-item>
									<el-form-item label="月补卡数" prop="addCardNum">
										<el-input v-model="baseForm.addCardNum" placeholder="月补卡次数"></el-input>
										<span style="margin-left: 10px;">次</span>
									</el-form-item>

									<el-form-item label="调休半天扣分" prop="paidHalfOfDayLeave">
										<el-input v-model="baseForm.paidHalfOfDayLeave" placeholder="调休半天扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
									<el-form-item label="调休一天" prop="paidDayLeave">
										<el-input v-model="baseForm.paidDayLeave" placeholder="调休一天扣分"></el-input>
										<span style="margin-left: 10px;">分</span>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div style="text-align: center;height: 40px;margin-top: 30px;">
							<el-button type="primary" @click="submitForm('baseForm')">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="holiday">
					<span slot="label" class="tabMargin">
					节假日配置
				</span>
					<div class="calendarDiv">
						<el-calendar v-model="value" id="calendar">
							<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
							<template
											slot="dateCell"
											slot-scope="{date, data}"
											>
								<!--自定义内容-->
								<div style="height: 75px;" @click="clickCurrentDay(date, data)">
									<!--<div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>-->
									<div style="font-size: 20px;" class="calendar-day">
										{{ data.day.split('-').slice(1).join('-') }}
									</div>
									<div style="position: relative;" v-for="(item,index) in calendarData" :key="index">
										<div class="selectDays" v-if="data.day === item.date">{{ item.select === true ? '✔️' : ''}}</div>
										<div class="workHoliday" v-if="data.day === item.date">{{item.status === '1' ? '休' : item.status === '2' ? '团' : '班'}}</div>
									</div>
								</div>
							</template>
						</el-calendar>
					</div>
					<div class="btnCalendar" style="text-align: center;height: 40px;">
						<el-button type="primary" @click="settingWork()">设为工作日</el-button>
						<el-button type="primary" @click="settingHoliday()">设为休息日</el-button>
						<el-button type="primary" @click="settingGroup()">设为团建日</el-button>
						<el-button type="primary" @click="saveWorkHoliday()">保存</el-button>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	export default {
		name: "paramsSetting",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				activeName: 'base',
				baseForm:{
					workTime:'09:00:00', // 上班时间
					afterWorkTime: '17:00:00', // 下班时间
					score: '', // 每日考勤基础分
					lateNum:'', // 迟到次数
					latePointsFifteen: '', // 迟到15分钟以上，1小时以内
					latePointsHalfOfDay: '', // 迟到半天
					thingHalfOfDay: '', // 事假半天扣分
					sickNum:'', // 病假次数
					paidHalfOfDayLeave: '', // 调休半天
					paidDayLeave: '', // 调休一天
					addCardNum: '', // 月补卡次数
					workOverScore: '', // 加班一小时加分
					absenteeism: '', // 全天旷工扣分
					thingDay: '', // 事假一天扣分，
					lateNumOfFixedTime: '', // 弹性扣分时间1 迟到时间
					lateWorkTimeOne: '', // 弹性扣分时间2 迟到15-1小时
					lateWorkTimeTwo: '' // 弹性扣分时间3 迟到1小时-半天
				},
				rules: {
					workTime: [
						{type: 'string', required: true, message: '请选择上班时间', trigger: 'change' }
					],
					afterWorkTime: [
						{type: 'string', required: true, message: '请选择下班时间', trigger: 'change' }
					],
					score: [
						{ required: true, message: '请输入日基础分', trigger: 'blur' }
					],
					lateNum: [
						{ required: true, message: '请输入迟到次数', trigger: 'blur' }
					],
					latePointsFifteen: [
						{ required: true, message: '请输入迟到15分钟以上，一小时以内扣分', trigger: 'blur' }
					],
					latePointsHalfOfDay: [
						{ required: true, message: '请输入迟到一小时以上，半天内扣分', trigger: 'blur' }
					],
					thingHalfOfDay: [
						{ required: true, message: '请输入事假半天扣分', trigger: 'blur' }
					],
					sickNum: [
						{ required: true, message: '请输入全年病假次数', trigger: 'blur' }
					],
					paidHalfOfDayLeave: [
						{ required: true, message: '请输入调休半天扣分', trigger: 'blur' }
					],
					paidDayLeave: [
						{ required: true, message: '请输入调休一天扣分', trigger: 'blur' }
					],
					addCardNum: [
						{ required: true, message: '请输入月补卡数', trigger: 'blur' }
					],
					workOverScore: [
						{ required: true, message: '请输入加班一小时分数', trigger: 'blur' }
					],
					absenteeism: [
						{ required: true, message: '请输入全天旷工扣分', trigger: 'blur' }
					],
					thingDay: [
						{ required: true, message: '请输入事假一天扣分', trigger: 'blur' }
					],
					lateNumOfFixedTime: [
						{ required: true, message: '请输入弹性扣分时间1', trigger: 'blur' }
					],
					lateWorkTimeOne: [
						{ required: true, message: '请输入弹性扣分时间2', trigger: 'blur' }
					],
					lateWorkTimeTwo: [
						{ required: true, message: '请输入弹性扣分时间3', trigger: 'blur' }
					]
				},
				calendarData: [],
				value: new Date(),
				currentSelectDay: {},
				nowDay: '',
				saveGetCalendar: [],
				saveHolidayCurrent: [],
			};
		},
//监听属性 类似于data概念
		computed: {
		},
//监控data中的数据变化
		watch: {
			// calendarData:{//深度监听，可监听到对象、数组的变化
			// 	handler(val, oldVal){
			// 		console.log(val, oldVal);//但是这两个值打印出来却都是一样的
			// 		if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
			// 			console.log(2222)
			// 			let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
			// 			let current = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
			// 			let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
			// 			prevBtn.setAttribute("disabled",true);
			// 			current.setAttribute("disabled",true);
			// 			nextBtn.setAttribute("disabled",true);
			// 			this.$message({
			// 				message: '请先保存后在切换月份！',
			// 				type: 'warning'
			// 			});
			// 		}
			// 	},
			// 	deep:true
			// }
		},
//方法集合
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			getListData(value) {
				let listData;
				switch (value.date()) {
					case 8:
						listData = [
							{ type: 'warning', content: 'This is warning event.' },
							{ type: 'success', content: 'This is usual event.' },
						];
						break;
					case 10:
						listData = [
							{ type: 'warning', content: 'This is warning event.' },
							{ type: 'success', content: 'This is usual event.' },
							{ type: 'error', content: 'This is error event.' },
						];
						break;
					case 15:
						listData = [
							{ type: 'warning', content: 'This is warning event' },
							{ type: 'success', content: 'This is very long usual event。。....' },
							{ type: 'error', content: 'This is error event 1.' },
							{ type: 'error', content: 'This is error event 2.' },
							{ type: 'error', content: 'This is error event 3.' },
							{ type: 'error', content: 'This is error event 4.' },
						];
						break;
					default:
				}
				return listData || [];
			},
			getMonthData(value) {
				if (value.month() === 8) {
					return 1394;
				}
			},
			getParams() {
				this.$axios.getAddConfig().then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						if (res.data !== null) {
							this.baseForm = res.data;
						}
					}
				})
			},
			getHoliday(val) {
				this.$axios.getHoliday(val).then((res) => {
					console.log(res)
					if (res.data.length !== 0) {
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].date = res.data[i].date.substring(0,10);
							res.data[i].select = false;
						}
						console.log(res.data);
						this.calendarData = res.data;
						this.saveHolidayCurrent = res.data;
					}
				})
			},
			submitForm(formName) {
				console.log(this.baseForm)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.postAddConfig(this.baseForm).then((res) => {
							console.log(res)
							if (res.request.status === 200) {
								this.$message({
									message: '保存配置成功!',
									type: 'success'
								});
								this.baseForm = res.data;
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			clickCurrentDay(val, val2) {
				console.log(val2)
				let index = val2.day.substring(val2.day.length - 2, val2.day.length);
				console.log(index)
				let saveData = JSON.parse(JSON.stringify(this.calendarData));
				saveData[parseInt(index) - 1].select = !saveData[parseInt(index) - 1].select;
				console.log(saveData);
				// val2.select = true;
				this.calendarData = saveData;
				// this.saveHolidayCurrent = res.data;
				val2.select = true;
				console.log(val2)
				this.currentSelectDay = JSON.parse(JSON.stringify(val2));
			},
			settingWork() {
				let jsonData = JSON.parse(JSON.stringify(this.calendarData));
				jsonData.forEach((i,v) => {
					if (i.select === true) {
						i.status = '0';
						i.select = false;
					}
				})
				let changeSelect = [...jsonData];
				this.calendarData = changeSelect;
				// if (JSON.stringify(selectData) !== '{}') {
				// 	let obj = data.day;
				// 	let month = JSON.parse(JSON.stringify(this.calendarData));
				// 	console.log(month)
				// 	let currentIdIndex = month.findIndex(item => item.date === obj);
				// 	console.log(currentIdIndex)
				// 	month[currentIdIndex].status = '0';
				// 	this.calendarData = month;
				// 	console.log(this.calendarData)
				// }
			},
			settingHoliday() {
				let jsonData = JSON.parse(JSON.stringify(this.calendarData));
				jsonData.forEach((i,v) => {
					if (i.select === true) {
						i.status = '1';
						i.select = false;
					}
				});
				let changeSelect = [...jsonData];
				this.calendarData = changeSelect;
				// let data = JSON.parse(JSON.stringify(this.currentSelectDay));
				// console.log(data)
				// if (JSON.stringify(data) !== '{}') {
				// 	let obj = data.day;
				// 	let month = JSON.parse(JSON.stringify(this.calendarData));
				// 	console.log(month)
				// 	let currentIdIndex = month.findIndex(item => item.date === obj);
				// 	console.log(currentIdIndex)
				// 	month[currentIdIndex].status = '1';
				// 	this.calendarData = month;
				// 	console.log(this.calendarData)
				// }
			},
			settingGroup() {
				let jsonData = JSON.parse(JSON.stringify(this.calendarData));
				jsonData.forEach((i,v) => {
					if (i.select === true) {
						i.status = '2';
						i.select = false;
					}
				})
				let changeSelect = [...jsonData];
				this.calendarData = changeSelect;
				// let data = JSON.parse(JSON.stringify(this.currentSelectDay));
				// console.log(data)
				// if (JSON.stringify(data) !== '{}') {
				// 	let obj = data.day;
				// 	let month = JSON.parse(JSON.stringify(this.calendarData));
				// 	console.log(month)
				// 	let currentIdIndex = month.findIndex(item => item.date === obj);
				// 	console.log(currentIdIndex)
				// 	month[currentIdIndex].status = '2';
				// 	this.calendarData = month;
				// 	console.log(this.calendarData)
				// }
			},
			saveWorkHoliday() {
				let data = JSON.parse(JSON.stringify(this.calendarData));
				data.forEach((v, i) => {
					v.date = v.date + ' ' + '00:00:00'
				})
				console.log(data)
				this.$axios.putHoliday(data).then((res) => {
					console.log(res)
					if (res.data.length > 0) {
						this.$message({
							message: '保存节假日设置成功!',
							type: 'success'
						});
						for (let i = 0; i < res.data.length; i++) {
							res.data[i].date = res.data[i].date.substring(0,10)
						}
						console.log(res.data)
						this.calendarData = res.data;
					}
				})
			},
			baseScore(val) {
				console.log(val)
				this.baseForm.thingHalfOfDay = (0.5 * parseInt(val)) + '';
				this.baseForm.paidHalfOfDayLeave = (0.5 * parseInt(val)) + ''
				this.baseForm.paidDayLeave = val + '';
				this.baseForm.latePointsFifteen = (parseInt(val) / 8) + '';
				this.baseForm.latePointsHalfOfDay = (parseInt(val) * 1) + '';
				this.baseForm. workOverScore = (parseInt(val) / 8) + '';
				this.baseForm.absenteeism = (3 * parseInt(val)) + '';
				this.baseForm.thingDay = val + '';
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.getParams();
			this.getHoliday(this.$common.timeYMDFilter(new Date()));
			this.$nextTick(() => {

				// 点击前一个月
				let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
				let current = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
				let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');

				prevBtn.addEventListener('click',() => {
					const demo = document.getElementsByClassName("el-calendar__title")[0].innerText;
					const demo1 = demo.replace(/\s+/g,"");
					const demo2 = demo1.replace('年', '-');
					const demo3 = demo2.replace('月', '-') + '01';
					const demo4 = this.$common.timeYMDFilter(new Date(demo3))
					console.log(demo4);
					this.getHoliday(demo4);
				})

				current.addEventListener('click',() => {
					const demo4 = this.$common.timeYMDFilter(new Date())
					console.log(demo4);
					this.getHoliday(demo4);
				})

				nextBtn.addEventListener('click',() => {
					const demo = document.getElementsByClassName("el-calendar__title")[0].innerText;
					const demo1 = demo.replace(/\s+/g,"");
					const demo2 = demo1.replace('年', '-');
					const demo3 = demo2.replace('月', '-') + '01';
					const demo4 = this.$common.timeYMDFilter(new Date(demo3))
					console.log(demo4)
					this.getHoliday(demo4);
				})
			})
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.paramsSetting{
		height: 96%;
		margin: 30px 0;
	}

	/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;
		color: #5059D5;
	}

	.workHoliday{
		/*margin-top: 30px;*/
		font-size: 30px;
		text-align: center;
	}

	.tabMargin{
		margin: 0 30px;
	}

	/deep/ .el-input {
		position: relative;
		font-size: 14px;
		display: inline-block;
		width: 90%;
	}

	/deep/ .el-calendar__header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 12px 20px;
		border-bottom: 1px solid #EBEEF5;
	}

	/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-base {
		border-top-left-radius: 40px;
	}
	/deep/ #tab-holiday {
		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-tabs--card>.el-tabs__header {
		border-bottom: 2px solid rgb(167, 172, 234);
	}

	.calendarDiv /deep/ .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #dcdfe6; /*no*/
		color: #5059d5;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 8px 24px;
		font-size: 18px;
		border-radius: 4px;
		box-shadow: none;
	}

	.calendarDiv /deep/ .el-button:hover {
		background: #5059d5;
		border-color: #5059d5;
		color: #FFF;
	}

	.calendarDiv /deep/ .el-calendar__title {
		color: #000;
		-ms-flex-item-align: center;
		align-self: center;
		font-size: 24px;
	}

	.calendarDiv /deep/ .el-calendar-table thead th {
		padding: 12px 0;
		color: #5059D5;
		font-weight: 400;
		font-size: 20px;
	}

	.calendarDiv /deep/ .el-calendar-table td {
		border: 10px solid #EBEEF5;
		/*border-bottom: 5px solid #EBEEF5;*/
		/*border-right: 5px solid #EBEEF5;*/
		vertical-align: top;
		-webkit-transition: background-color .2s ease;
		transition: background-color .2s ease;
	}

	.calendarDiv /deep/ .el-calendar-table .el-calendar-day {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 8px;
		height: 100px;
	}

	/deep/ .el-input__inner{
		border: 1px solid #a8acea;/*no*/
		font-size: 18px;
	}

	/deep/ .el-input__inner:hover {
		border-color: #5059d5;
	}

	/deep/ .el-input.is-active .el-input__inner, .el-input__inner:focus {
		border-color: #5059d5;
		outline: 0;
	}

	.selectDays{
		position: absolute;
		top: 0px;
		right: 10px;
	}
</style>
