<template>
	<div class="box boxMinHeight">
		<PageHead phName="参与人员"></PageHead>
		<div class="main">
			<el-tabs style="position: relative;" v-model="activeIndex">
				<el-tab-pane :name="item.val" :label="item.name" v-for="(item, index) in tabs" :key="index">
					<div class="flex-box flex-d-center">
						<div class="flex-box">
							<div class="dept_wdiv" style="position: relative;">
								<el-input auto-complete="off" v-model="deptNames" placeholder="选择部门"><i class="el-icon-arrow-down el-input__icon" slot="suffix"></i></el-input>
								<div @click="show_dept_selector = true" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
							</div>
							<el-select v-model="group_ids" style="margin: 0 10px;width: 300px;" multiple collapse-tags placeholder="选择考核表">
								<el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							<el-input style="width: 150px;" prefix-icon="el-icon-search" v-model="keywords" placeholder="请输入姓名搜索"></el-input>
						</div>
						<div>
							<el-button class="primaryBtn" @click="openAdd()">添加到已有配置</el-button>
							<el-button class="primaryBtn" @click="openConfiguration(1)">新增等级配置</el-button>
						</div>
					</div>
					<div class="table-box" style="margin-top: 30px;">
						<el-table stripe :data="tableData" v-loading="loading" :header-cell-style="{ background: '#ECF5FF' }" @selection-change="handleSelectionChange">
							<el-table-column type="selection" label="全选"></el-table-column>
							<el-table-column prop="employee_name" label="被考核人"></el-table-column>
							<el-table-column prop="dept_ids" label="部门">
								<template slot-scope="scope">
									<div v-if="scope.row.dept_ids.length > 0" class="flex-box-ce">
										<span v-for="(item, index) in scope.row.dept_ids" :key="index">
											{{ item.name }}
											<span v-if="scope.row.dept_ids.length != index + 1">,</span>
										</span>
									</div>
									<span v-else>-</span>
								</template>
							</el-table-column>
							<el-table-column prop="group_name" label="考核表"></el-table-column>
							<el-table-column prop="level_config_name" label="等级配置">
								<template slot-scope="scope">
									<span v-if="scope.row.level_config_name">{{ scope.row.level_config_name }}</span>
									<span v-else>-</span>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		
		<!-- 添加到已有配置 -->
		<el-dialog title="添加到已有配置" :visible.sync="isClass" width="500px">
			<el-form label-width="120px">
				<el-form-item label="参与人员:" prop="employee_ids">
					<div class="flex-box-ce" v-if="multipleSelection.length > 0">{{ multipleSelection[0].employee_name }}等{{ multipleSelection.length }}人</div>
					<div v-else class="fontColorC">未选择</div>
				</el-form-item>
				<el-form-item label="等级配置:">
					<el-select v-model="group_id" placeholder="请选择"><el-option v-for="item in pzList" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isClass = false">取 消</el-button>
				<el-button type="primary" @click="saveClass()">保存</el-button>
			</span>
		</el-dialog>
		<!-- 等级配置 -->
		<BrawerBox :drawerTitle="configurationName" :showDrawer.sync="isConfiguration">
			<template slot="main">
				<el-form :rules="classRules" :model="classFrom" ref="configuration" label-width="120px">
					<el-form-item label="等级配置名称:" prop="name">
						<el-input placeholder="请输入等级配置名称" v-model="classFrom.name" style="width: 250px;"></el-input>
					</el-form-item>
					<el-form-item label="参与人员:" prop="employee_ids">
						<div class="border flex-box-ce">
							<div class="flex-1" v-if="users.length == 0">请选择参与人员</div>
							<div v-else style="width: 180px;" class="font-flex-word">
								<span v-for="(item, index) in users" :key="index">
									<i v-if="index != 0">,</i>
									{{ item.name }}
								</span>
							</div>
							<span v-if="users.length > 0" class="blue">{{ users.length }}人</span>
							<i class="el-icon-arrow-down icon-right" v-else></i>
							<div @click="openSelectUser" class="inputDc"></div>
						</div>
					</el-form-item>
					<ClassSet ref="ClassSet" :inputs="inputs"></ClassSet>
				</el-form>
			</template>
			<template slot="footer">
				<el-button plain @click="isConfiguration = false">取消</el-button>
				<el-button type="primary" @click="saveConfiguration('configuration')">保存</el-button>
			</template>
		</BrawerBox>

		<EmployeeSelector :selected="selected" :is_employee_list="true" :employee_list="employee_list" :visible.sync="setUser" :is_filtration_creator="false" @confirm="confirm" />

		<EmployeeSelector
			:title="'选择部门'"
			:isChecKedAll="false"
			:can_select_employee="false"
			:can_select_dept="true"
			:selected="dept_selected"
			:visible.sync="show_dept_selector"
			@confirm="dept_confirm"
		/>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import JxSearch from '@/components/public/JxSearch'; //搜索
import BrawerBox from '@/components/public/BrawerBox';
import ClassSet from '@/components/public/ClassSet';
import PageHead from '@/components/public/PageHead';
export default {
	name: 'participation',
	components: { EmployeeSelector, JxSearch, BrawerBox, ClassSet, PageHead },
	data() {
		return {
			loading: false,
			activeIndex: '0',
			packageId: 0,
			tabs: [{ name: '全部', val: '0' }, { name: '无等级配置', val: '1' }],
			tableData: [],
			AlltableData: [], //备份
			show_dept_selector: false,
			deptNames: '',
			dept_ids: [],
			keywords: '',
			dept_selected: { dept: [], employee: [] },
			group_ids: [], //选择考核表val
			groupOptions: [], //选择考核表数据
			
			  isClass:false,
			  multipleSelection:[],//选择的人员
			  group_id:'',
			  pzList:[],//配置列表
			  
			// 等级配置
			classFrom: { level_type: 1, name: '', employee_ids: '', id: '' },
			classRules: { name: [{ required: true, message: '请输入等级配置名称', trigger: 'blur' }] },
			force: '', //是否强制使用
			isConfiguration: false,
			configurationName: '新增等级配置',
			selected: { employee: [], dept: [] },
			users: [],
			setUser: false,
			inputs: [{ name: 'C', min: 0, max: 60 }, { name: 'B', min: 60, max: 80 }, { name: 'A', min: 80, max: 100 }]
		};
	},
	watch: {
		isClass(val) {
			if (!val) {
				this.group_id = '';
				this.getList();
			}
		},
		users(val) {
			let employee_ids = val.map(item => {
				return item.id;
			});
			this.classFrom.employee_ids = employee_ids;
		},
		group_ids() {
			this.getList();
		},
		activeIndex() {
			this.getList();
		},
		isConfiguration(val) {
			if (!val) {
				this.closeLevel();
			}
		},
		keywords(val) {
			this.tableData = JSON.parse(JSON.stringify(this.AlltableData));
			if (val) {
				let tableData = this.tableData;
				let arr = tableData.filter(item => {
					return item.employee_name.indexOf(val) >= 0;
				});
				this.tableData = arr;
			}
		}
	},
	created() {
		if (this.$route.query.packageId) {
			this.packageId = this.$route.query.packageId;
			this.employee_list = JSON.parse(this.$route.query.employee_list);
			this.getAssessList();
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		// 获取配置列表
		getPzList(fun = function() {}) {
			this.$axios('get', '/api/per/package/level_config/list', { package_id: this.packageId }).then(res => {
				this.pzList = res.data.data.list;
				fun();
			});
		},
		//添加到已有配置
		saveClass() {
			if (!this.group_id) {
				this.$message.error('请选择等级配置');
				return false;
			}
			let employee_ids = this.multipleSelection.map(item => {
				return item.employee_id;
			});
			let data = {
				id: this.group_id,
				employee_ids_code: this.$returnCode(employee_ids)
			};
			if (this.force) {
				data.force = this.force;
			}
			this.$axios('post', '/api/per/package/add_package_level_employees', data).then(res => {
				if (!res.data.data.result) {
					this.$confirm(res.data.data.msg + ',是否改为到此考核表中进行考核', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.force = 1;
						this.saveClass();
					}).catch(() => {});
				} else {
					this.$message.success('添加成功');
					this.isClass = false;
				}
			});
		},
		closeLevel() {
			this.force = '';
			this.classFrom = {
				id: '',
				level_type: 1,
				name: '',
				employee_ids: ''
			};
			this.inputs = [{ name: 'C', min: 0, max: 60 }, { name: 'B', min: 60, max: 80 }, { name: 'A', min: 80, max: 100 }];
			this.users = [];
		},
		openSelectUser() {
			this.selected.employee = this.users;
			this.setUser = true;
		},
		confirm(val) {
			this.users = val.employee;
		},
		// 新增||编辑等级配置
		saveConfiguration(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let isSave = this.$refs.ClassSet.isSave;
					let inputsList = this.$refs.ClassSet.inputsList;
					let classFrom = this.classFrom;
					let is = true,
						level_scope = [];
					if (!isSave) {
						return false;
					}
					inputsList.some(item => {
						if (!item.name) {
							this.$message.error('等级的名称不能为空');
							is = false;
							return true;
						}
						if (item.max == 0) {
							this.$message.error('最大值不能为空或者0');
							is = false;
							return true;
						}
						level_scope.push({ name: item.name, value: Number(item.max) });
					});
					if (!is) {
						return false;
					}
					var level_scopes = {
						//参数的数据结构
						level_type: classFrom.level_type,
						level_scope: {
							levels: level_scope
						},
						level_normal: {
							levels: [
								{
									name: '优秀',
									value: 80
								}
							],
							distribution_type: 1
						}
					};
					console.log(classFrom.employee_ids)
					let data = {
						package_id: this.packageId,
						name: classFrom.name,
						config: JSON.stringify(level_scopes),
						employee_ids_code: this.$returnCode(classFrom.employee_ids)
					};
					if (classFrom.id) {
						data.id = classFrom.id;
					}
					if (this.force) {
						data.force = this.force;
					}
					this.$axios('post', '/api/per/package/edit_package_level', data).then(res => {
						if (!res.data.data.result) {
							this.$confirm(res.data.data.msg + ',是否改为到此考核表中进行考核', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
								.then(() => {
									this.force = 1;
									this.saveConfiguration('configuration');
								})
								.catch(() => {});
						} else {
							if (this.classFrom.id) {
								this.$message.success('保存成功');
							} else {
								this.$message.success('创建成功');
							}
							this.isConfiguration = false;
							this.getList();
						}
					});
				} else {
					return false;
				}
			});
		},
		// 开打等级配置
		openConfiguration(index) {
			this.configurationName = index == 1 ? '新增等级配置' : '编辑等级配置';
			this.isConfiguration = true;
		},
		getAssessList() {
			this.$axios('get', 'api/per/evaluation/all_group', { package_id: this.packageId, page: 0 }).then(res => {
				this.groupOptions = res.data.data.list;
			});
		},
		getList() {
			let data = {
				package_id: this.packageId,
				dept_ids: JSON.stringify(this.dept_ids),
				group_ids: JSON.stringify(this.group_ids),
				pl_id: this.activeIndex
			};
			this.loading = true;
			this.$axios('get', 'api/per/package/employee/list', data)
				.then(res => {
					if (this.keywords) {
						this.tableData = res.data.data.list.filter(item => {
							return item.employee_name.indexOf(this.keywords) >= 0;
						});
					} else {
						this.tableData = res.data.data.list;
					}
					this.AlltableData = res.data.data.list;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		openAdd() {
			if (this.multipleSelection.length == 0) {
				this.$message.error('请先勾选参与员工');
				return;
			}
			this.getPzList(() => {
				this.isClass = true;
			});
		},
		dept_confirm(data) {
			let dept = data.dept;
			let deptNames = '';
			let ids = [];
			dept.forEach(item => {
				deptNames += item.dept_name + ',';
				ids.push(item.dept_id);
			});
			this.dept_selected.dept = data.dept;
			this.deptNames = deptNames;
			this.dept_ids = ids;
			this.getList();
		},
		//考核表选中
		groupChange(data) {
			this.group_ids = data;
			this.getList();
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
.box {
	position: relative;
	background-color: #fff;
	padding: 20px;
}
.main {
	margin-top: 20px;
}
.box::-webkit-scrollbar {
	width: 3px;
	height: 10px;
	background-color: #fff;
}
.box::-webkit-scrollbar-thumb {
	background-color: #d9d9d9;
}
.step-item {
	width: 140px;
	color: #777777;
	text-align: center;
	height: 60px;
	cursor: pointer;
}
.step-item span {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	text-align: center;
	line-height: 24px;
	border: 1px solid #ebebeb;
	margin-right: 10px;
}
.active-step {
	background-color: #1583f2;
	color: #fff;
}
.active-step span {
	border: 1px solid #1583f2;
	background-color: #fff;
	color: #1583f2;
}
.primaryBtn {
	color: #409eff;
	border: 1px solid #409eff;
	background-color: #fff;
}
.primaryBtn:hover {
	background-color: #ecf5ff !important;
}
.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: #c0c4cf;
	font-size: inherit;
	height: auto;
	outline: 0;
	padding: 0 15px;
	width: 250px;
	position: relative;
	cursor: pointer;
}
.border .font-flex-word {
	color: #606266;
}
.inputDc {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 9;
	cursor: pointer;
}
.li {
	border-bottom: 1px solid #f1f1f1;
}
.li:hover {
	background-color: #f5f7fa;
}
</style>
