<template>
	<div class="all">
		<div class="flex-box-ce" style="margin-left: 10px;margin-top: 30px;">
			<span>上级评分：</span>
			<el-switch v-model="enable" :active-value="1" :inactive-value="0"></el-switch>
			<div v-if="enable" style="padding-left: 10px;">
				评分权重:
				<span class="blue">{{ num }}%</span>
			</div>
		</div>
		<div class="flex-box-ce" v-show="enable == 1" style="position: relative;background-color: #F5F9FF;padding:20px;border-radius: 5px;margin-top: 20px;max-width: 1000px;">
			<div
				class="flex-box-v flex-center-center flex-d-wrap flow"
				@click="activeFlow(index)"
				:class="[isActive == index ? 'isActive' : '']"
				v-for="(item, index) in score_supervisor"
				:key="index"
			>
				<div class="flex-box-v flex-center-center  flow-item">
					<div class="fontColorB font-flex-word" v-show="item.type == 1" style="width: 120px;">{{ options[item.manager_level - 1].label }}</div>
					<div class="fontColorB font-flex-word" v-show="item.type == 2" style="width: 120px;">
						<span v-if="item.employeeList.length > 0">{{ item.employeeList[0].name }}等({{ item.employeeList.length }})人</span>
						<span v-else>未指定人员</span>
					</div>
					<div class="fontColorD font-flex-word" style="font-size: 12px;width: 120px;">评分权重:{{ item.weight }}%</div>
					<i class="el-icon-error" style="font-size: 18px;color: #C0C4CC;" @click="deleteFlow(index)"></i>
				</div>
				<div class="flow-index">
					<span></span>
					<div class="dian"></div>
					<i class="el-icon-arrow-up jt-top" v-if="isActive == index"></i>
					<div class="add-flow" v-if="score_supervisor.length == index + 1">
						<i class="el-icon-circle-plus-outline blue" style="cursor: pointer;" v-if="score_supervisor.length != 6" @click="addFlow()"></i>
						<i class="el-icon-video-pause fontColorC" v-else></i>
					</div>
				</div>
				<div class="flow-box" v-show="isActive == index">
					<el-form label-width="80px">
						<el-form-item>
							<div class="form-titem">评分人:</div>
							<el-radio-group v-model="item.type">
								<el-radio :label="1">部门主管（指定一级）
									<el-tooltip class="item" effect="dark" content="指定某一级主管" placement="top-start">
										<i class="fontColorC el-icon-warning"></i>
									</el-tooltip>
								</el-radio>
								<el-radio :label="2">指定成员</el-radio>
							</el-radio-group>
							<div class="flex-box-ce" style="margin-top: 10px;" v-show="item.type == 1">
								<span>被考核人的</span>
								<el-select v-model="item.manager_level" placeholder="请选择级别" style="margin: 0 10px;">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
								<el-tooltip class="item" effect="dark" content="找不到确认人时，由上级管理员替代" placement="top-start">
									<i class="fontColorC el-icon-warning"></i>
								</el-tooltip>
							</div>
							<div class="border flex-box-ce" style="position: relative;" v-show="item.type == 2">
								<div class="fontColorC flex-1" v-if="item.employeeList.length == 0">请选择指定人员</div>
								<div v-else style="width: 180px;" class="font-flex-word">
									<span v-for="(j, index2) in item.employeeList" :key="index2">
										<i v-if="index2 != 0">,</i>
										{{ j.name }}
									</span>
								</div>
								<span v-if="item.employeeList.length > 0" class="blue">{{ item.employeeList.length }}人</span>
								<i class="el-icon-arrow-down icon-right" v-else></i>
								<div @click="setEmployeeList(item, index)" class="inputDc"></div>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="form-titem">评分权重:</div>
							<el-input
								laceholder="请输入评分权重(0~100)"
								@input="checkCountry($event, index)"
								v-model="item.weight"
								style="width:250px"
								@blur="setInput()"
								:id="index + 'input'"
							>
								<span slot="append">%</span>
							</el-input>
							<el-popover placement="bottom" width="450" trigger="hover">
								<div style="padding: 10px;width: 100%;" class="flex-box"><img src="@/assets/image/ts.png" style="width: 100%; height: auto;" /></div>
								<span slot="reference"><i class="fontColorC el-icon-warning" style="padding-left: 5px;"></i></span>
							</el-popover>
						</el-form-item>
						<el-form-item>
							<div class="form-titem">评分人多人时:</div>
							<el-radio-group v-model="item.multi_executor">
								<el-radio :label="1">各自评分取平均值</el-radio>
								<el-radio :label="2">任一人评分</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<div class="form-titem">评分规则:</div>
							<el-radio-group v-model="item.rule">
								<el-radio :label="1">指标均要评分</el-radio>
								<el-radio :label="2">只评总分</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<div class="form-titem">必填项:</div>
							<el-checkbox v-model="item.comment">评分说明</el-checkbox>
							<!-- <el-checkbox v-model="item.summary" >评分总结</el-checkbox> -->
						</el-form-item>
						<!-- <el-form-item label="手动评级:"></el-form-item> -->
						<el-form-item>
							<div class="form-titem">允许评分人:</div>
							<el-checkbox v-model="item.isTransfer">转交</el-checkbox>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>

		<!-- 选择子管理员 -->
		<EmployeeSelector title="指定成员" :selected="selected" :is_filtration_creator="false" :visible.sync="setAdministrator" @confirm="confirmAdministrator" />
	</div>
</template>
<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import BrawerBox from '@/components/public/BrawerBox';
export default {
	components: { EmployeeSelector, BrawerBox },
	name: 'SuperiorFlow',
	props: {
		data: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			loading: false,
			num: 100,

			isActive: '0',
			selected: { employee: [], dept: [] }, //执行者列表
			setAdministrator: false,

			flowIndex: 0,
			enable: 0, //是否启用 1-启用 0-禁用
			unique: 1, //评分人去重 1-是 0-否
			score_supervisor: [
				//上级配置列表
				{
					type: 1, //评分人类型 1-主管 2-指定成员 3-角色
					manager_level: 1, //主管等级(只有评分人类型为主管时有效)
					supervisor_confirm: 1, //找不到确认人时是否由上级主管代替(只有评分人类型为主管时有效) 1-是 0-否
					is_supervisor_confirm: true,
					// role_name: "creator",            //角色名(只有评分人类型为角色时有效)
					employee_ids: [], //用户id列表(只有评分人类型为指定人员时有效)
					employeeList: [], //人员集合
					weight: 100, //权重
					multi_executor: 1, //评分人多人时 1-各自评分 2-任一人评分
					rule: 1, //评分规则 1-指标均要评分 2-评分总结
					action: [
						//必填项
						'comment', //指标评分说明
						'summary' //评分总结
					],
					comment: false, //指标评分说明
					summary: false, //评分总结
					rating: 0, //是否手动评分 1-是 0-否
					transfer: 1, //是否允许转交 1-是 0-否
					isTransfer: true //是否允许转交 1-是 0-否
				}
			],
			options: [
				{
					value: 1,
					label: '直属部门主管'
				},
				{
					value: 2,
					label: '二级部门主管'
				},
				{
					value: 3,
					label: '三级部门主管'
				},
				{
					value: 4,
					label: '四级部门主管'
				},
				{
					value: 5,
					label: '五级部门主管'
				},
				{
					value: 6,
					label: '六级部门主管'
				}
			]
		};
	},
	watch: {
		data(val) {
			if (val.enable) {
				this.recoverData();
			}
		},
		enable(val) {
			this.setInput(!val);
		}
	},
	created() {},
	mounted() {},
	methods: {
		recoverData() {
			let data = this.data;
			let employeeMap = this.$getEmployeeList();
			this.enable = data.enable;
			this.unique = data.unique;
			data.supervisor.forEach(item => {
				item.is_supervisor_confirm = item.supervisor_confirm == 1 ? true : false;
				item.manager_level = item.manager_level == 0 ? 1 : item.manager_level;
				item.employeeList = item.employee_ids.map(item => {
					return employeeMap[item];
				});
				item.comment = item.action.indexOf('comment') >= 0 ? true : false;
				item.summary = item.action.indexOf('summary') >= 0 ? true : false;
				item.isTransfer = item.transfer == 1 ? true : false;
			});
			// 注意：el-checked绑定的数据要在data里面一开始就有，不后期追加，会导致点击失效,解决方案如下
			this.score_supervisor = JSON.parse(JSON.stringify(data.supervisor));
		},
		// 最大值不能大于100
		checkCountry(e, index) {
			//解决v-model与oninput同时使用失效问题
			var dom = document.getElementById(index + 'input');
			var value = dom.value;
			//写你自己的输入规则
			value = value.replace(/[^\d]/g, '');
			if (value > 100) {
				this.$set(this.score_supervisor[index], 'weight', 0);
				this.$message.error('不能大于100');
				return false;
			}
			dom.value = value; //输入框赋值
			this.$set(this.score_supervisor[index], 'weight', dom.value);
		},
		//计算权重
		setInput(is) {
			if (is) {
				this.$emit('setInput', '', false);
			} else {
				let num = 0;
				this.score_supervisor.forEach(item => {
					num += Number(item.weight);
				});
				this.num = num;
				// console.log(num);
				// this.$emit('setInput', num, true);
			}
		},
		activeFlow(index) {
			this.isActive = index;
		},
		//删除主管
		deleteFlow(index) {
			this.$confirm('确定删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					if (this.score_supervisor.length == 1) {
						this.$message.error('至少保留一个');
						return false;
					}
					this.score_supervisor.splice(index, 1);
					this.isActive = this.score_supervisor.length - 1;
					this.setInput();
				})
				.catch(() => {});
		},
		//添加主管
		addFlow() {
			if (this.score_supervisor.length == 6) {
				return false;
			}
			var leth = this.score_supervisor.length + 1;
			var score_supervisor = {
				type: 1, //评分人类型 1-主管 2-指定成员 3-角色
				manager_level: leth, //主管等级(只有评分人类型为主管时有效)
				supervisor_confirm: 1, //找不到确认人时是否由上级主管代替(只有评分人类型为主管时有效) 1-是 0-否
				is_supervisor_confirm: true,
				// role_name: "creator",            //角色名(只有评分人类型为角色时有效)
				employee_ids: [], //用户id列表(只有评分人类型为指定人员时有效)
				employeeList: [], //人员集合
				weight: 0, //权重
				multi_executor: 1, //评分人多人时 1-各自评分 2-任一人评分
				rule: 1, //评分规则 1-指标均要评分 2-评分总结
				action: [
					//必填项
					'comment', //指标评分说明
					'summary' //评分总结
				],
				comment: false, //指标评分说明
				summary: false, //评分总结
				rating: 0, //是否手动评分 1-是 0-否
				transfer: 1, //是否允许转交 1-是 0-否
				isTransfer: true //是否允许转交 1-是 0-否
			};
			this.score_supervisor.push(score_supervisor);
		},
		setEmployeeList(item, index) {
			this.flowIndex = index;
			this.selected.employee = item.employeeList;
			this.setAdministrator = true;
		},
		confirmAdministrator(e) {
			this.score_supervisor[this.flowIndex].employeeList = e.employee.length > 0 ? e.employee : [];
		},
		submitForm() {}
	}
};
</script>

<style scoped="scoped">
.border {
	-webkit-appearance: none;
	background-color: #fff;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #606266;
	font-size: inherit;
	height: auto;
	outline: 0;
	padding: 0 15px;
	width: 250px;
	position: relative;
}
.all {
	font-size: 14px;
}
.nweTitle {
	margin: 30px 0;
	padding-left: 10px;
	border-left: 3px solid #409eff;
}
.flow {
	margin-right: 30px;
	cursor: pointer;
}
.flow-item {
	border-radius: 3px;
	width: 120px;
	/* height: 50px; */
	position: relative;
	/* margin-top: 30px; */
	box-sizing: border-box;
	text-align: center;
	/* border: 1px solid #f4f6f9; */
}
.flow-item .el-icon-error {
	position: absolute;
	right: 0px;
	top: -14px;
	display: none;
}
.flow-item:hover {
	/* background-color: #e7f5fe; */
	font-weight: 600;
	font-size: 16px;
}
.flow-item:hover .el-icon-error {
	display: block !important;
}
.flow-item .el-icon-error:hover {
	color: #f56c6c !important;
}
.flow-item .fontColorD {
	margin-top: 10px;
}
.flow-index {
	width: 120px;
	text-align: center;
	position: relative;
	margin-top: 10px;
}
.flow-index span {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #ccc;
	color: #909399;
	display: inline-block;
	line-height: 22px;
	font-size: 12px;
	position: relative;
}
.flow-index span::after {
	width: 10px;
	height: 10px;
	content: ' ';
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -5px;
	background-color: #409eff;
	border-radius: 50%;
	position: absolute;
}
.add-flow {
	position: absolute;
	right: -100px;
	z-index: 2;
	top: 0px;
}
.add-flow i {
	font-size: 26px;
}
.isActive .flow-item {
	/* background-color: #ecf5ff; */
	font-weight: 600;
	font-size: 16px;
	color: #409eff !important;
}
.isActive .flow-item .fontColorB,
.isActive .fontColorD {
	color: #409eff !important;
}
.isActive .flow-index span {
	border: 1px solid #409eff !important;
	color: #409eff !important;
}
.isActive .el-icon-error {
	display: block;
}
.dian {
	position: absolute;
	height: 1px;
	border-top: 1px dashed #ccc;
	width: 127px;
	top: 40%;
	left: 71px;
}
.flow-box {
	/* border: 1px dashed #409eff; */
	border-radius: 3px;
	padding: 20px;
	width: 1000px;
	position: absolute;
	left: 0;
	right: 0;
	top: 146px;
	background-color: rgb(245, 249, 255);
	z-index: 2;
}
.jt-top {
	position: absolute;
	color: #409eff;
	font-size: 18px;
	font-weight: 600;
	top: 50px;
	left: 50px;
	background-color: #fff;
	z-index: 3;
}
.inputDc {
	position: absolute;
	top: 0;
	width: 250px;
	left: 0;
	bottom: 0;
	z-index: 9;
}
</style>
