<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>
					<div>当前系统审批流程 <span class="blue cursor" @click="approvalProcess">查看图例</span></div>
					<div class="fontColorC"><span>指定规则的审批或奖扣分，均可直接通过</span></div>
				</div>
				
				<div class="integralApproval">
					<b>积分复核<el-switch style="margin-left:30px;" :active-value="1" :inactive-value="0" v-model="event_review_status"></el-switch></b>
					<div style="line-height: 22px;"  v-if="event_review_status">
						<div class="fontColorC" style="margin-bottom: 5px;">开启后，以下来源的积分需要在<span class="orange">复核通过</span>后才计入排名和统计<br/>哪些来源的积分需要复核（至少选择一项）</div>
						<div class="flex-box-ce">
						  <el-checkbox v-model="event_apply_review" label="积分申请" border size="small"></el-checkbox>
						  <el-checkbox v-model="event_entry_review" label="积分奖扣" border size="small"></el-checkbox>
						  <el-checkbox v-model="event_task_review" label="任务" border size="small"></el-checkbox>
						</div>
						<div style="margin: 12px 0;">
							<div style="margin-bottom: 10px;">复核人员选择 <span style="font-size: 12px;" class="fontColorB">(仅系统管理员可更改此配置)</span></div>
							<el-radio-group  v-model="is_review_manager" style="display: block;">
							    <el-radio :disabled="!isCreator" :label="1">积分管理员、公司管理员、系统管理员均可操作复核</el-radio>
								<div style="margin-bottom: 8px;"></div>
							    <el-radio :disabled="!isCreator" :label="2">指定人员可操作复核</el-radio>
							</el-radio-group>
							<div class="input-box font-flex-word" @click="openUserSelect" v-if="is_review_manager==2">
								<span class="fontColorC" v-if="event_special.length==0">请选择指定人员</span>
								<template v-else>
									<span v-for="(item,index) in event_special" :key="index">{{item.name}}<span v-if="index!=event_special.length-1">,</span></span>
								</template>
							</div>
						</div>
						<el-checkbox v-model="event_review_point">允许复核人调整分值</el-checkbox>
					</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  class="fontColorC">
						<div>开启后，通过“功勋点”可兑换公司的福利奖品；</div>
						<div>员工可通过公司定期统一发放或挣更多个人B分来获得功勋点</div>
					</div>
				</div>
				
				<div class="integralApproval">
					<b>
						提交积分时，必须选择积分规则
						<el-switch style="margin-left:30px;" v-model="ruleOnoff"></el-switch>
					</b>
					<div  class="fontColorC">
						<div>开启后，申请积分或奖扣积分时，必须选择积分规则提交；</div>
						<div>此配置不影响积分审批和任务发布</div>
					</div>
				</div>
				<div class="integralApproval">
					<b>
						指定规则的审批或奖扣分免审
						<el-switch style="margin-left:30px;" v-model="examine"></el-switch>
					</b>
					<div  class="fontColorC">
						<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" 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 class="fontColorC">
						<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  class="fontColorC">
						<div>系统默认的管理者奖扣目标只包含管理者主动给员工奖扣的积分；</div>
						<div>开启后，审批员工申请的积分和任务也会记入Ta的奖扣分目标内</div>
					</div>
				</div>
				<div class="integralApproval">
					<b>管理者奖扣分目标结算时间（不达标自动扣分）</b>
					<div class="flex-box flex-v-ce" style="margin-top:10px;">
						每月
						<el-select v-model="task_schedule_day" size="mini" style="margin: 0 10px;width: 80px;" placeholder="请选择截止日期">
							<el-option v-for="item in columns" :key="item.value" :label="item.name" :value="item.value"></el-option>
						</el-select>
						结算上个月的管理者奖扣，不达标的自动扣分
					</div>
					<div class="fontColorC">
						<div>结算产生的积分事件均记录为上月的管理者积分，例如6月5号结算5月份的管理者奖扣：</div>
						<div>如果5月份管理者“张三”存在目标不达标，将进行扣分，扣分事件计入5月份的积分排名和统计中</div>
						<div class="orange">*注：如上月已结算扣分，修改结算时间不会再次结算，请企业根据自身情况合理设置结算时间</div>
					</div>
				</div>
			</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  class="flex-box-ce">
							<b>{{ 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 style="margin-top: 5px;" v-if="item.checkboxs && individualPoints">
							<el-checkbox v-model="checked">{{ item.checkboxs }}</el-checkbox>
						</p>
					</div>
				</div>
			</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="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>
		
		<el-dialog title="人员选择" :visible.sync="manageScope_show" top="5vh" width="700px">
			<EmployeeSelector
				v-if="manageScope_show"
				ref="Employee2"
				:max="10"
				:isChecKedAll="false"
				:selected="selected_manage"
				@confirm="manage_confirm"
			></EmployeeSelector>
			<span slot="footer">
				<el-button @click="manageScope_show=false">取消</el-button>
				<el-button type="primary" :loading="scope_loading" :disabled="scope_loading" @click="sub_manageScope">完成</el-button>
			</span>
		</el-dialog>
	
	</div>
</template>
<script>
import EmployeeSelector from '@/components/EmployeeSelector.vue';
export default {
	components:{EmployeeSelector},
	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
			},
			
			// 复核相关
			event_review_status:1,//是否开启复核 1 开启 0或其他 不开启
			event_task_review:1,//审批是否开启复核 1 开启 0或其他不开启
			event_apply_review:1,//任务积分是否开启复核 1 开启 0或其他不开启
			event_entry_review:1,//录入积分，是否开启复核 1 开启 0或其他不开启
			event_review_point:1,//复核积分，是否允许修改分值 1 可以 0或其他不可以
			
			is_review_manager:1,
			event_review_manager:1,//是否管理员复核 0-否 1-是
			event_review_special:1,//是否指定人员复核 0-否 1-是
			event_special:[], //指定复核的人员id列表
			
			
			columns: [
				{ name: '1号', value: 1 },
				{ name: '2号', value: 2 },
				{ name: '3号', value: 3 },
				{ name: '4号', value: 4 },
				{ name: '5号', value: 5 },
				{ name: '6号', value: 6 },
				{ name: '7号', value: 7 },
				{ name: '8号', value: 8 },
				{ name: '9号', value: 9 },
				{ name: '10号', value: 10 },
				{ name: '11号', value: 11 },
				{ name: '12号', value: 12 },
				{ name: '13号', value: 13 },
				{ name: '14号', value: 14 },
				{ name: '15号', value: 15 },
				{ name: '16号', value: 16 },
				{ name: '17号', value: 17 },
				{ name: '18号', value: 18 },
				{ name: '19号', value: 19 },
				{ name: '20号', value: 20 },
				{ name: '21号', value: 21 },
				{ name: '22号', value: 22 },
				{ name: '23号', value: 23 },
				{ name: '24号', value: 24 },
				{ name: '25号', value: 25 },
				{ name: '26号', value: 26 },
				{ name: '27号', value: 27 },
				{ name: '28号', value: 28 },
				// { name: '29号', value: 29 },
				// { name: '30号', value: 30 },
				// { name: '31号', value: 31 }
			],
			task_schedule_day:1,
			
			manageData:[],
			manageScope_show:false,
			scope_loading:false,
			selected_manage: { employee: [], dept: [] },
			isCreator:this.$getIsCreator('creator'),
		};
	},
	watch:{
		is_review_manager(val){
			this.event_review_manager=0;//是否管理员复核 0-否 1-是
			this.event_review_special=0;//是否指定人员复核 0-否 1-是
			val==1? this.event_review_manager=1:this.event_review_special=1
		}
	},
	mounted() {
		this.manageList();
		this.cheakAx('first');
	},
	methods: {
		manage_confirm(val){
			if(val.employee.length>0){
				this.event_special=val.employee;
			}else{
				this.event_special=[];
			}
			this.scope_loading = false;
			this.manageScope_show = false
		},
		openUserSelect(){
			if(!this.$getIsCreator('creator')){
				return false
			}
			this.selected_manage.employee=this.event_special;
			this.manageScope_show=true;
		},
		sub_manageScope(){
			this.scope_loading = true
			this.$refs.Employee2.confirm();
		},
		//管理列表
		manageList(){
			let params = {
				roles: ['creator', 'admin', 'point_manager', 'dept_manager']
			}
			this.$axios('get', '/api/employee/role_employee', params).then(res =>{
				if(res.data.code == 1){
					this.manageData = res.data.data.list
				}
			})
		},
		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);
				data.event_review_status=this.event_review_status;//是否开启复核 1 开启 0或其他 不开启
				data.event_task_review=this.event_task_review? 1 : 0;//审批是否开启复核 1 开启 0或其他不开启
				data.event_apply_review=this.event_apply_review? 1 : 0;//任务积分是否开启复核 1 开启 0或其他不开启
				data.event_entry_review=this.event_entry_review? 1 : 0;//录入积分，是否开启复核 1 开启 0或其他不开启
				data.event_review_point=this.event_review_point? 1 : 0;//复核积分，是否允许修改分值 1 可以 0或其他不可以
				
				data.event_review_manager=this.event_review_manager;//是否管理员复核 0-否 1-是
				data.event_review_special=this.event_review_special;//是否指定人员复核 0-否 1-是
				data.event_special=this.event_special.map(e=>{
					return e.id
				}); //指定复核的人员id列表
				data.task_schedule_day=this.task_schedule_day  //月结日期
				if(this.event_review_status&&!data.event_task_review&&!data.event_apply_review&&!data.event_entry_review){
					this.$message({
						message: '复核来源至少选择一项',
						type: 'error'
					});
					return;
				}
				// if(this.event_review_special&&data.event_special.length==0){
				// 	this.$message.error('请选择指定复核人员');
				// 	return;
				// }
			} 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 => {
				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;
					
					this.event_review_status=data.event_review_status;//是否开启复核 1 开启 0或其他 不开启
					this.event_task_review=data.event_task_review== 1 ? true : false;//审批是否开启复核 1 开启 0或其他不开启
					this.event_apply_review=data.event_apply_review== 1 ? true : false;//任务积分是否开启复核 1 开启 0或其他不开启
					this.event_entry_review=data.event_entry_review== 1 ? true : false;//录入积分，是否开启复核 1 开启 0或其他不开启
					this.event_review_point=data.event_review_point== 1 ? true : false;//复核积分，是否允许修改分值 1 可以 0或其他不可以
					
					this.is_review_manager=data.event_review_manager== 1 ? 1 : 2;
					this.event_review_manager=data.event_review_manager;//是否管理员复核 0-否 1-是
					this.event_review_special=data.event_review_special;//是否指定人员复核 0-否 1-是
					this.event_special=data.event_special; //指定复核的人员id列表
					
					
					this.task_schedule_day=data.task_schedule_day;
				} 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">
.input-box{
	-webkit-appearance: none;
	background-color: #FFF;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #DCDFE6;
	box-sizing: border-box;
	color: #606266;
	display: inline-block;
	font-size: inherit;
	height: 36px;
	line-height: 36px;
	outline: 0;
	padding: 0 15px;
	transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	width: 360px;
	cursor: pointer;
	margin-top: 8px;
}	
.el-input__inner {
	height: 35px;
	line-height: 35px;
}
.integralApproval {
	margin-bottom: 40px;
	.pointNum {
		width: 100px;
		margin: 0 10px;
	}
	b {
		font-size: 16px;
		margin-bottom: 12px;
		display: block;
	}
	p {
		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>
