<template>
	<div class="all padding-20" v-loading="loading">
		<el-tabs v-model="activeName" @tab-click="handleClick" class="tab-container">
			<el-tab-pane label="基本设置" name="first">
				<div class="integralApproval" style="margin-top: 30px;">
					<b>积分审批</b>
					<p>
						当前系统审批流程
						<a @click="approvalProcess">查看图例</a>
					</p>
					<div style="margin-top:5px;" class="fontColorF"><span>指定规则的审批或奖扣分，均可直接通过</span></div>
				</div>
				<div class="integralApproval">
					<b>
						指定规则的审批或奖扣分免审
						<el-switch style="margin-left:30px;" v-model="examine"></el-switch>
					</b>
					<div style="margin-top:5px;" class="fontColorF">
						<div>开开启后，按照系统已有的积分规则制度提交的审批或者奖扣可直接通过；</div>
						<div>即使审批人/录分人的权限分不足，也能审批通过</div>
					</div>
				</div>
				<div class="integralApproval">
					<b>
						A分转B分
						<el-switch style="margin-left:30px;" v-model="isApB"></el-switch>
					</b>
					<div class="flex-box flex-v-ce" style="margin-top:10px;" v-if="isApB">
						1A分=<el-input v-model.number="pointNum" autofocus="0" size="mini" class="pointNum" oninput="value=value.replace(/[^\d]/g,'')"></el-input>B分
					</div>
					<div style="margin-top:10px;" class="fontColorF">
						<div>开启后，每奖/扣1条A分，额外产生一条分值按比例转换后的B分记录；</div>
						<div>例如：设置1A分=10B分时，因表现出色奖10A分的同时，额外奖100B分。</div>
					</div>
				</div>
				<div class="integralApproval">
					<b>
						管理者审批计入奖扣分任务
						<el-switch style="margin-left:30px;" v-model="task_review"></el-switch>
					</b>
					<div style="margin-top:5px;" class="fontColorF">
						<div>系统默认的管理者奖扣任务只包含管理者主动给员工奖扣的积分；</div>
						<div>开启后，审批员工申请的积分和任务也会记入Ta的奖扣分任务内</div>
					</div>
				</div>
				<el-button type="primary" class="save" @click="saveFirst('first')">保存</el-button>
			</el-tab-pane>
			<el-tab-pane label="通知设置" name="second">
				<div class="integralApproval">
					<div v-for="(item, index) in informText" :key="index" style="margin-top:30px;">
						<p>
							<b style="font-size:16px;">{{ item.title }}</b>
							<el-switch
								v-if="item.switchs == 0"
								style="margin:-6px 0 0 30px;"
								v-model="individualPoints"
							></el-switch>
							<el-switch
								v-if="item.switchs == 1"
								style="margin:-6px 0 0 30px;"
								v-model="pointManagement"
							></el-switch>
							<el-switch
								v-if="item.switchs == 2"
								style="margin:-6px 0 0 30px;"
								v-model="taskToInform"
							></el-switch>
							<el-switch
								v-if="item.switchs == 3"
								style="margin:-6px 0 0 30px;"
								v-model="approvalNotice"
							></el-switch>
						</p>
						<p>{{ item.ram }}</p>
						<p v-if="item.checkboxs && individualPoints">
							<el-checkbox v-model="checked">{{ item.checkboxs }}</el-checkbox>
						</p>
					</div>
				</div>
				<el-button type="primary" class="save" @click="saveFirst('second')">保存</el-button>
			</el-tab-pane>
		</el-tabs>

		<el-dialog title="系统审批流程" :visible.sync="dialogVisible" width="770px" top="3vh" :before-close="handleClose">
			<svg-icon icon-class="approval_process" style="font-size:730px;" />
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			loading: false,
			activeName: 'first',
			examine: false,

			checked: false, //积分日报展示A分数据
			individualPoints: false, //个人积分日报
			pointManagement: false, //积分管理周报
			taskToInform: false, //任务通知
			approvalNotice: false, //审批通知
			informText: [
				{ title: '个人积分通知', switchs: 0, ram: '每天推送个人积分的排名和奖扣分情况（不参与积分排名的除外）', checkboxs: '积分日报展示A分数据' },
				{ title: '管理者奖扣分执行情况通知', switchs: 1, ram: '每周给管理者推送当月的奖扣分执行情况' },
				{ title: '任务通知', switchs: 2, ram: '每天定时推送收到任务的通知' },
				{ title: '审批通知', switchs: 3, ram: '每天定时推送收到审批的通知' }
			],
			dialogVisible: false,
			//A转B
			pointNum: 0,
			isApB: false,

			// 管理者奖扣记入
			task_review: false
		};
	},
	mounted() {
		this.cheakAx('first');
	},
	methods: {
		approvalProcess() {
			this.dialogVisible = true;
		},
		handleClose(none) {
			none();
		},
		handleClick(tab, event) {
			this.cheakAx(this.activeName);
		},
		saveFirst(name) {
			let data = {};
			if (name == 'first') {
				data.rule_limit_check = this.examine ? 0 : 1;
				data.task_review = this.task_review ? 1 : 0;
				if (this.isApB) {
					if (this.pointNum == 0 || !this.pointNum) {
						this.$message({
							message: 'A转B分,分值不能空或者零',
							type: 'error'
						});
						return;
					}
				}
				this.isApB ? (data.a2b = this.pointNum) : (data.a2b = 0);
			} else {
				data.report_integral_daily = this.individualPoints ? 1 : 0;
				this.individualPoints ? (data.report_integral_daily_a = this.checked ? 1 : 0) : '';
				data.report_integral_weekly = this.pointManagement ? 1 : 0;
				data.report_work_daily = this.taskToInform ? 1 : 0;
				data.report_review_daily = this.approvalNotice ? 1 : 0;
			}
			this.loading = true;
			this.$axios('post', '/api/integral/site/config', data)
				.then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		cheakAx(name) {
			this.loading = true;
			this.$axios('get', '/api/integral/site/config')
				.then(res => {
					let data = res.data.data;
					if (name == 'first') {
						this.examine = data.rule_limit_check == 0 ? true : false;
						this.isApB = data.a2b == 0 ? false : true;
						this.task_review = data.task_review == 1 ? true : false;
						this.pointNum = data.a2b;
					} else {
						this.individualPoints = data.report_integral_daily == 1 ? true : false;
						this.checked = this.individualPoints ? (data.report_integral_daily_a == 1 ? true : false) : false;
						this.pointManagement = data.report_integral_weekly == 1 ? true : false;
						this.taskToInform = data.report_work_daily == 1 ? true : false;
						this.approvalNotice = data.report_review_daily == 1 ? true : false;
					}
				})
				.finally(err => {
					this.loading = false;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.el-input__inner {
	height: 35px;
	line-height: 35px;
}
.integralApproval {
	margin-bottom: 40px;
	.pointNum {
		width: 100px;
		margin: 0 10px;
	}
	b {
		font-size: 16px;
	}
	p {
		margin-top: 10px;
		a {
			color: #1795f9;
			padding-left: 15px;
			cursor: pointer;
		}
	}
	.initia_mark {
		background: #191919;
		border-radius: 50%;
		width: 14px;
		height: 14px;
		color: #fff;
		display: inline-block;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		margin-left: 4px;
		cursor: default;
	}
}
.toolCont {
	max-width: 280px;
}

.save {
	margin-top: 30px;
	width: 100px;
	font-size: 15px;
}
.tab-container ::v-deep .el-tabs__item {
	font-size: 16px;
}
.tab-container ::v-deep .el-tabs__nav-wrap::after {
	background: #fff;
}
</style>
