<template>
	<div class="all-box">
		<!-- 头部提示 -->
		<div class="diy-tip" style="margin-bottom: 10px;">
			<div>
				当前组织架构成员通过钉钉通讯录同步，员工开启绩效管理后才能正式启用并进入“功道云绩效管理系统”，如果您的钉钉通讯录有变动，点击
				<span class="blue" style="margin-left: 10px;cursor: pointer;" @click="tb()" v-loading="tbLoading"><i class="el-icon-refresh"></i>立即同步</span>
			</div>
		</div>
		<div class="all">
			<div class="flex-box">
				<div class="terr-left">
					<div class="rule_class_box" v-loading="ruleDeprt">
						<div class="company_name">
							<img src="@/assets/image/two.png" />
							<span>组织架构</span>
						</div>
						<el-tree
							:data="bmList"
							class="cate-tree"
							:highlight-current="true"
							:props="{ children: '_child', label: 'name' }"
							@node-click="handleNodeClick"
							:accordion="true"
							empty-text="您暂无部门数据,请同步钉钉通讯录"
						>
							<div
								content="tree"
								class="flex-box flex-v-ce"
								slot-scope="{ node, data }"
								style="font-size: 14px;color: #606266; width:100%; text-align: left;"
							>
								<img src="@/assets/image/one.png" style="width: 20px;margin-right: 5px;" />
								<span class="name">{{ data.name }}</span>
							</div>
						</el-tree>
					</div>
				</div>
				<div class="terr-right border-right flex-1">
					<div class="margin-bottom">
						<div style="padding-bottom: 10px;font-size: 20px;">{{deptName}}</div>
						<el-button @click="participation()" :loading="enable_loading" size="medium" type="primary">批量启用</el-button>
						<el-button @click="forbidden()" :loading="enable_loading" size="medium" type="danger" style="margin-right: 10px;">批量禁用</el-button>
						<el-select v-model="status"  size="medium" style="margin-right: 10px;width: 150px;">
						  <el-option
						    v-for="item in options"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
						<el-input placeholder="输入同事姓名" size="medium" style="width: 230px;" v-model="keywords" clearable></el-input>
					</div>
					<el-table :data="userList" @selection-change="handleSelectionChange" v-loading="tableToading">
						<el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
						<el-table-column label="姓名">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce">
									<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="44px" height="44px"></userImage>
									<div style="margin-left: 10px;">{{ scope.row.name }}</div>
									<div style="margin-left: 10px;" v-if="scope.row.id == userInfo.id" class="green">（我）</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="部门" min-width="150px">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce bms">
									<div v-for="(item, index) in scope.row.dept_list" :key="index">{{ item.name }}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="员工标识" min-width="150px">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce">
									<el-input v-model="scope.row.code" disabled auto-complete="off" style="width: 200px;"></el-input>
									<span style="font-size:12px;color:#61aeff;cursor:pointer;padding-left:10px" @click="copyToClipboard(scope.row.code)">点击复制</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="启用绩效管理" align="center">
							<template slot="header" slot-scope="scope">
								<el-popover placement="top-start" width="300" trigger="manual" v-model="visible">
									<div class="el-popover2">
										<div class="title">
											提示
											<i class="el-icon-info" style="margin-left: 5px;"></i>
										</div>
										<div style="margin-bottom: 10px;">在这里启用绩效管理，即可进入系统</div>
										<div class="flex-box">
											<div class="flex-1"></div>
											<el-button size="small" @click="visible_close()">我知道了</el-button>
										</div>
									</div>
									<div slot="reference" class="popover" @click="visible = !visible">
										启用绩效管理
										<i class="el-icon-info" style="margin-left: 5px;"></i>
									</div>
								</el-popover>
							</template>
							<template slot-scope="scope">
								<div :class="[scope.row.is_official == 1 ? 'switch-box' : '']" @click="changeIs(scope.row.is_official, scope.row)">
									<div class="switch"></div>
								</div>
							</template>
						</el-table-column>
						<template slot="empty">
							<noData></noData>
						</template>
					</el-table>
					<div class="pagination">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[10, 20, 50, 100]"
							:page-size="perPage"
							layout="total,sizes, prev, pager, next"
							:total="total"
						></el-pagination>
					</div>
				</div>
			</div>
			<!-- 隐藏文本，用于复制ID -->
			<input v-model="copyIds" id="biao" style="opacity:0"/>
		</div>
	</div>
</template>

<script>

import EmployeeSelector from '@/components/public/EmployeeSelector.vue';
import {_debounce} from '@/api/auth';
export default {
	data() {
		return {
			manageData: [],//管理员列表
			employeeList: [],
			manageScope_show: false,
			scope_loading: false,
			clickone: false,
			mangeId: 0,
			selected_manage: { employee: [], dept: [] },

			is: 1,
			no: 0,
			page: 1,
			perPage: 10,
			total: 0,
			info: {}, //公司信息
			tips_show: true,
			bmList: [],
			userList: [],
			class_type: '',
			tableData: [],
			keywords: '',
			dept_id: 0,

			tableToading: false,
			tbLoading: false,
			selectIds: [],
			enable_loading: false,
			visible: false,

			ruleDeprt: false,
			dialogVisible: false,
			rankingtakePartInId: '',
			radio: '1',

			rangLoad: false,
			radioLi: [{ id: '1', name: '参与排名', kam: '在排名中展示此人' }, { id: '0', name: '不参与排名', kam: '排名不展示此人(自定义排名除外)' }],
			userInfo: this.$getUserData(),
			options: [{
			  value: '-1',
			  label: '全部'
			}, {
			  value: '1',
			  label: '已开启'
			}, {
			  value: '0',
			  label: '已禁用'
			}],
			status: '-1',
			//导入规则
			import_rules_show: false,
			save_loading: false,
			import_btn_show: false,
			fileList: [],
			file: null,
			action: process.env.VUE_APP_BASE_API + 'api/employee/enable_import',
			ATOKEN: { 'A-TOKEN': this.$getToken()},
			diaTableVisible: false,
			messageMore: {},
			deptList: '',
			propList: '',
			dirSupervisor: {},
			dirSupScope_show: false,
			show_loading: false,
			newId: 0,
			dirSupList: [],
			selected_dirSup: { employee: [], dept: [] },
			employeeAll:[],//人员列表
			copyIds:'',
			deptName:'',
		};
	},
	components: {
		EmployeeSelector
	},
	watch: {
		keywords: {
		  deep: true,
		  handler: _debounce(function(val) {
			this.page = 1;
			this.getEmployee();
		  })
		},
		dept_id(val) {
			this.page = 1;
			this.getEmployee();
		},
		status(){
			 this.page = 1;
			 this.getEmployee();
		}
	},
	created() {
		this.filtration();
		this.getInfo();
		this.getEmployee();
	},
	mounted() {
		this.$nextTick(function() {
			if (this.$getCache('rule')) {
				this.tips_show = false;
			} else {
				this.tips_show = true;
			}
		});
	},
	methods: {
		copyToClipboard(copyIds) {
			this.copyIds=copyIds;
			this.$nextTick(()=>{
				var Url2=document.getElementById("biao");
				Url2.select(); // 选择对象
				document.execCommand("Copy"); // 执行浏览器复制命令
				this.$message.success('已复制');
			})
		},
		filtration() {
		  this.$axios('get', '/api/per/user/employee_list', { dept_id: this.pid, page: 0, page_size: 10000,official:1 }).then(res => {
			 this.employeeAll = res.data.data.list;
		  }); 
		},
		selectable(row) {
			// if (row.is_creator) {
			// 	return false;
			// } else 
			if (this.userInfo.id == row.id) {
				return false;
			} else {
				return true;
			}
		},
		//同步信息
		tb() {
			this.$confirm('下次同步时间需在10分钟之后，是否同步?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.tbLoading = true;
				this.$axios('post', '/api/sync/employee')
					.then(res => {
						this.$message.success({ message: '同步成功' });
						this.dept_id = 0;
						this.getInfo();
						this.getEmployeeList();
						this.page=1;
						this.getEmployee();
					})
					.finally(() => {
						this.tbLoading = false;
					});
			});
		},
		//是否开通
		changeIs(e,item) {
			if(item.id==this.$getUserData().id){
				this.$message.error({ message: '不能禁用自己！' });
				return;
			}
			this.$axios('post', 'api/per/user/change_status', { ids_code: JSON.stringify([item.code]),status:e==0? 1:0 }).then(res => {
				if (res) {
					if (e == 0) {
						this.$message.success({ message: '开启成功' });
					} else {
						this.$message.success({ message: res.data.msg });
					}
					this.getEmployee();
				}
			});
		},
		//批量禁用权限
		forbidden() {
			if (this.selectIds.length == 0) {
				this.$message.error({ message: '请选择禁用的人员！' });
				return;
			}
			this.$confirm('确定禁用选择的人员？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.enable_loading = true;
				this.$axios('post', '/api/per/user/change_status', { ids_code:JSON.stringify(this.selectIds),status:0 })
					.then(res => {
						if (res) {
							this.$message.success('已禁用');
							this.page=1;
							this.getEmployee();
						}
					})
					.finally(err => {
						this.enable_loading = false;
					});
			});
		},
		//批量开通权限
		participation() {
			if (this.selectIds.length == 0) {
				this.$message.error({ message: '请选择参与的人员！' });
				return;
			}
			this.enable_loading = true;
			this.$axios('post', '/api/per/user/change_status', { ids_code:JSON.stringify(this.selectIds),status:1 })
				.then(res => {
					if (res) {
						this.$message.success({ message: '开启成功' });
						this.page=1;
						this.getEmployee();
					}
				})
				.finally(err => {
					this.enable_loading = false;
				});
		},
		//获取公司信息
		getInfo() {
			this.info = this.$getUserData().site;
			this.getDepartment();
		},
		//选择员工
		handleSelectionChange(e) {
			var arr = [];
			for (var item in e) {
				arr.push(e[item].code);
			}
			this.selectIds = arr;
		},
		//点击部门
		handleNodeClick(e) {
			this.deptName=e.name;
			this.dept_id = e.dept_id;
		},
		//获取部门
		getDepartment() {
			this.ruleDeprt = true;
			this.$axios('get', '/api/per/user/department').then(res => {
					var list = [
						{
							id: 0,
							name: this.info.name,
							_child: res.data.data.dept_tree
						}
					];
					this.bmList = list;
				})
				.finally(() => {
					this.ruleDeprt = false;
				});
		},
		//获取员工
		getEmployee() {
			this.tableToading = true;
			let data={
				dept_id: this.dept_id,
				page: this.page,
				page_size:this.perPage,
				scope:1,
				
			}
			if(this.keywords){
				data.str=this.keywords;
			}
			let is_official=this.status=='-1'? '':this.status;
			if(is_official){
				data.official=is_official;
			}
			this.$axios('get', '/api/per/user/employee_list', data).then(res => {
					this.total = res.data.data.total;
					this.userList = res.data.data.list;
					var visible = this.$getCache('visible');
					if (!visible) {
						this.visible = true;
					}
				})
				.finally(err => {
					this.tableToading = false;
				});
		},
		// 部门列表
		getEmployeeList(fun) {
			//获取绩效人员列表（包含已被删除的人员）
			this.$axios('get', '/api/per/user/employee_list',{page_size:0,page:0}).then(res => {
				if (res.data.code == 1) {
					var list = res.data.data.list;
					const data = {};
					for (const i in list) {
						if (list[i].is_scope === 0||list[i].is_official ===0) {
							list[i].name = list[i].name + '(未启用)';
						}
						data[list[i].id] = list[i];
					}
					this.$setEmployeeList(data);
				}
			});
		},
		visible_close() {
			this.$setCache('visible', 'true');
			this.visible = false;
		},
		handleSizeChange: function(val) {
			this.perPage = val;
			this.page = 1;
			this.getEmployee();
		},
		//页码变更
		handleCurrentChange: function(val) {
			this.page = val;
			this.getEmployee();
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.text-center {
	text-align: center;
}
.text-center p {
	padding: 10px 0;
}
.title {
	font-size: 16px;
	color: #909399;
	margin-bottom: 10px;
}
.popover {
	border: none;
	// color: #909399;
	font-weight: 600;
	cursor: pointer;
}
.popover:hover {
	background-color: #fff;
	border-color: #fff;
}

.switch {
	margin: 0;
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
	border: 1px solid #dcdfe6;
	outline: none;
	border-radius: 10px;
	box-sizing: border-box;
	background: #dcdfe6;
	cursor: pointer;
	transition: border-color 0.3s, background-color 0.3s;
	vertical-align: middle;
}
.switch:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	border-radius: 100%;
	transition: all 0.3s;
	width: 16px;
	height: 16px;
	background-color: #fff;
}
.switch-box .switch {
	border-color: #409eff;
	background-color: #409eff;
}
.switch-box .switch:after {
	left: 100%;
	margin-left: -17px;
}
.name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 80%;
}
.bms div {
	margin-right: 10px;
}
.top-msg div:nth-child(1) {
	margin-bottom: 10px;
}
.company_name {
	position: relative;
	display: block;
	font-family: 'Microsoft YaHei';
	text-align: left;
	padding: 15px 25px;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px #f8f8f8 solid;
}
.company_name img {
	position: relative;
	display: inline-block;
	top: 2px;
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.terr-right {
	.custom-tree-node {
		margin-left: -4px;
	}
	.custom-tree-node * {
		vertical-align: middle;
	}
	.custom-tree-node:hover {
		.treeIcon {
			display: inline-block;
			width: 55%;
		}
	}
}

.el-popover2 {
	color: #409eff;
}
.rule_class_box {
	::v-deep .el-tree-node {
		border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content {
		padding: 10px 0;
		// border-bottom: 1px #f8f8f8 solid;
	}
	::v-deep .el-tree-node__content:hover {
		background: #ecf5ff;
		border-radius: 4px;
	}
	::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .name {
		color: #409eff !important;
		font-weight: normal;
		transition: 0.35s ease-in-out;
	}
}
.participateRank {
	cursor: pointer;
	text-decoration: underline;
}
.tips {
	background: #dcdfe6;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
}
.rankingcla{
	font-size: 13px;
	color: #959595;
}
</style>
