<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;" :active-value="1" :inactive-value="0" v-model="shop_status"></el-switch>
					</b>
					<div style="margin-top:5px;" class="fontColorF">
						<div>开启后，通过“功勋点”可兑换公司的福利奖品；</div>
						<div>员工可通过公司定期统一发放或挣更多个人B分来获得功勋点</div>
					</div>
				</div>
				
				<div class="integralApproval">
					<b>
						提交积分时，必须选择积分规则
						<el-switch style="margin-left:30px;" v-model="ruleOnoff"></el-switch>
					</b>
					<div style="margin-top:5px;" class="fontColorF">
						<div>开启后，申请积分或奖扣积分时，必须选择积分规则提交；</div>
						<div>此配置不影响积分审批和任务发布</div>
					</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 pop-up" @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-tab-pane label="操作历史" name="history">
				<el-form :inline="true">
					<el-form-item style="float: right;margin-bottom: 0;">
						<el-input size="medium" v-model="formData.keywords" placeholder="请输入内容" max="200" @keyup.enter.native="his_int()" class="persons_name">
							<el-button size="medium" slot="append" icon="el-icon-search" @click="his_int()"></el-button>
						</el-input>
					</el-form-item>
				</el-form>
				<el-table :data="list" style="width: 100%" v-loading="hisload">
					<!-- <el-table-column label="操作人" prop="name" width="250">
						<template slot-scope="scope">
							<div class="flex-box-ce">
								<userImage class="fl" :id="scope.row.id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
								<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.name }}</span>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="内容" prop="content"></el-table-column>
					<el-table-column prop="create_time" label="时间" width="180px"></el-table-column>
					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
				<center style="padding: 20px 0;">
					<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next"
					:page-size="formData.page_size"
					:current-page="formData.page"
					:total="total"
					></el-pagination>
				</center>
			</el-tab-pane>
		</el-tabs>
		<div class="pop-up">
			<el-button type="primary" class="save" v-if="activeName == 'first' || activeName == 'second'" @click="saveFirst(activeName)">保存</el-button>
		</div>
		<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,
			ruleOnoff: false,
			shop_status:0,//是否开启福利模块

			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,

			// 操作历史
			hisload: false,
			list: null,
      		total: null,
			formData: {
				keywords: '',
				page: 1,
				page_size: 10
			},
		};
	},
	mounted() {
		this.cheakAx('first');
	},
	methods: {
		hisList() {
			let params = this.formData
			this.hisload = true
			this.$axios('get', '/api/log/operation/list', params).then(res =>{
				if(res.data.code == 1){
					let list = res.data.data.list
					this.list = list.list
					this.total = list.total
				}
			}).finally(_=>{
				this.hisload = false
			})
		},
		approvalProcess() {
			this.dialogVisible = true;
		},
		handleClose(none) {
			none();
		},
		handleClick(tab, event) {
			if(this.activeName == 'history'){
				this.hisList()
			}else{
				this.cheakAx(this.activeName);
			}
		},
		saveFirst(name) {
			let data = {};
			if (name == 'first') {
				data.specified_rule_item = this.ruleOnoff ? 1 : 0;
				data.rule_limit_check = this.examine ? 0 : 1;
				data.task_review = this.task_review ? 1 : 0;
				data.shop_status = this.shop_status;//是否开启福利模块
				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;
					this.cheakAx('first');
				});
		},
		cheakAx(name) {
			this.loading = true;
			this.$axios('get', '/api/integral/site/config')
				.then(res => {
					let data = res.data.data;
					this.$store.dispatch('setConfig', res.data.data);
					if (name == 'first') {
						if(data.specified_rule_item){
							this.ruleOnoff = data.specified_rule_item == 1 ? true : false;
						}else{
							this.ruleOnoff = false
						}
						this.shop_status=data.shop_status;//是否开启福利模块
						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;
				});
		},
		// 页码变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.hisList()
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.hisList()
		},
		his_int(val) {
			this.formData.page = 1;
			this.hisList()
		},
	}
};
</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;
}
.pop-up{
  position: sticky;
  bottom: -10px;
  z-index: 999;
  padding: 10px 0;
  background-color: #fff;
}
.tab-container ::v-deep .el-tabs__item {
	font-size: 16px;
}
.tab-container ::v-deep .el-tabs__nav-wrap::after {
	background: #fff;
}
</style>
