<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"
								v-show="treedata.length != 0"
								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">
					<FormBox>
						<div class="form-item">
							<div class="form-label">启用状态</div>
							<div class="form-search">
								<el-select v-model="status"  size="medium">
								  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item">
							<div class="form-label">姓名搜索</div>
							<div class="form-search">
								<el-input placeholder="请输入" size="medium" v-model="keywords" clearable></el-input>
							</div>
						</div>
					</FormBox>
					<div style="margin: 10px 0;" class="flex-box-ce">
						<el-button @click="participation()" :loading="enable_loading" size="medium" type="primary">批量启用</el-button>
						<el-button @click="forbidden()" :loading="enable_loading" size="medium" type="danger">批量禁用</el-button>
						<el-button  size="medium" type="success" @click="import_rules_show = true" plain>导入人员</el-button>
						<el-button  size="medium" type="primary" @click="derivedRule" plain>导出人员</el-button>
						<div class="flex-1"></div>
						<el-button @click="showDrawerTow=true" plain size="medium" type="primary">未授权人员</el-button>
					</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.is_creator" class="green">（系统管理员）</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="部门">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce bms">
									<div v-for="(item, index) in scope.row.employee_detail.dept_list" :key="index">{{ item.dept_name }}<span v-if="scope.row.employee_detail.dept_list.length-index>1">,</span></div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="accedence_time" label="入职时间">
							<template slot-scope="scope">
								<span style="cursor: pointer;" @click="moreMessage(scope.row.id)">{{scope.row.accedence_time}}</span>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="id" label="员工标识" width="80">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="copyId(scope.row.id)">复制</el-button>
							</template>
						</el-table-column> -->
						<!-- <el-table-column label="是否参与排名" align="center">
							<template slot-scope="scope">
								<template v-if="scope.row.is_creator != 1">
									<span
										class="participateRank"
										:style="scope.row.is_ranking == 1 ? 'color:#409eff' : 'color:#F56C6C'"
										@click="rankingtakePartIn(scope.row.id, scope.row.is_ranking)"
									>
										{{ scope.row.is_ranking == 1 ? '参与' : '不参与' }}
									</span>
								</template>
								<span v-else class="fontColorB">不参与</span>
							</template>
						</el-table-column> -->
						<el-table-column label="启用积分管理">
							<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.id)">
									<div class="switch"></div>
								</div>
							</template>
						</el-table-column>
						
						<!-- <el-table-column label="管理上级" align="center" width="80">
							<template slot-scope="scope">
								<span v-if="scope.row.is_creator != 1 && scope.row.is_official != 0" class="participateRank" style="color:#409eff;" @click="setSuperior(scope.row)">设置</span>
							</template>
						</el-table-column> -->
						
						<el-table-column prop="id" label="操作" >
							<template slot-scope="scope">
<!-- 								<el-link style="padding-right: 10px;" type="info" @click="moreMessage(scope.row.id)" :underline="false">转交事项</el-link> -->
								<el-link type="primary" @click="moreMessage(scope.row.id)" :underline="false">更多信息</el-link>
							</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>
		
		<el-dialog  :close-on-click-modal="false" ref="EditInformation_list" title="员工详情" width="500px" :before-close="detailFormreturn" :visible.sync="diaTableVisible">
			<div style="padding-right:20px;">
				<div class="flex-box-end" style="margin-bottom: 20px;"><el-button size="mini" type="primary" @click="openZj()">任务，审批事项转交</el-button></div>
				<el-form ref="detailForm" :model="messageMore"  @submit.native.prevent v-loading="show_loading">
					<el-form-item label="员工标识" prop="id" :label-width="'100px'">
						<el-input v-model="copyIds" disabled auto-complete="off"></el-input>
						<span style="position:absolute;top:1px;right:7px;font-size:12px;color:#61aeff;cursor:pointer;" @click="copyToClipboard()">点击复制</span>
					</el-form-item>
					<el-form-item label="姓名" prop="name" :label-width="'100px'">
						<el-input v-model="messageMore.name" disabled ref="inputName" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="入职时间" prop="accedence_time" :label-width="'100px'">
						<el-date-picker
						style="width:100%;"
						v-model="messageMore.accedence_time"
						type="date"
						@change="updateDate"
						:clearable="false"
						value-format="yyyy-MM-dd"
						placeholder="选择日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="部门" prop="name" :label-width="'100px'">
						<el-input v-model="deptList" disabled ref="inputName" placeholder="暂无部门"  auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="是否参与排名" prop="name" :label-width="'100px'">
						<span v-if="messageMore.is_creator != 1" class="participateRank"
							:style="messageMore.is_ranking == 1 ? 'color:#409eff' : 'color:#F56C6C'"
							@click="rankingtakePartIn(messageMore.id, messageMore.is_ranking)">
								{{ messageMore.is_ranking == 1 ? '参与' : '不参与' }}
						</span>
						<span v-else class="fontColorB">不参与</span>
					</el-form-item>
					<el-form-item label="管理上级" prop="name" :label-width="'100px'">
						<el-input auto-complete="off" v-model="propList" :disabled="messageMore.is_creator == 1 || messageMore.is_official == 0"  placeholder="暂无管理上级"></el-input>
						<div
						@click="setSuperior(messageMore)"
						v-if="messageMore.is_creator != 1 && messageMore.is_official != 0"
						style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"
						></div>
					</el-form-item>
					<el-form-item label="直属上级" prop="name" :label-width="'100px'">
						<el-input auto-complete="off" v-model="dirSupervisor.name" :disabled="messageMore.is_creator == 1 || messageMore.is_official == 0"  placeholder="暂无直属上级"></el-input>
						<div
						@click="dirSuperior(messageMore)"
						v-if="messageMore.is_creator != 1 && messageMore.is_official != 0"
						style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"
						></div>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
		
		<!-- 事项转交 -->
		<el-dialog class="dialog" :visible.sync="isShowZj" top="10vh" width="700px" :before-close="handleClose">
			<div>
			  <div style="margin-top: 10px;" v-if="selectUserName">事项转交({{selectUserName}})</div>
			  <el-tabs v-model="activeName">
				<el-tab-pane label="待完成任务" name="first"></el-tab-pane>
				<el-tab-pane label="待审批事项" name="second"></el-tab-pane>
			  </el-tabs>
			  <div class="flex-box-ce">
					<el-select size="small" style="width: 150px" v-model="taskType" placeholder="请选择截止日期" v-if="activeName=='first'">
						<el-option :key="1" label="Ta负责的" :value="1"></el-option>
						<el-option :key="2" label="Ta审批的" :value="2"></el-option>
					</el-select>
					<el-input size="small"  prefix-icon="el-icon-search" style="width: 200px;margin-left: 10px;" clearable placeholder="内容搜索" v-model="keyName"></el-input>
					<span class="fontColorC" style="font-size: 12px;padding-left: 10px;">请选择对应事项进行转交，暂不支持批量转交</span>
			  </div>
			  <div>
				  <template v-if="activeName=='first'">
					  <el-table :data="taskList" style="width: 100%;height: 536px;">
					  	<el-table-column label="任务内容" prop="task_name">
					  		<template slot-scope="scope"><span class="font-flex-word" style="max-width: 400px;">{{ scope.row.task_name }}</span></template>
					  	</el-table-column>

					  	<el-table-column label="操作" width="120px">
					  		<template slot-scope="scope">
								<el-link type="primary" style="padding-right: 10px;" :underline="false" @click.stop="openDetail(scope.row)" class="blue">查看任务</el-link>
								<el-link type="primary" :underline="false" @click.stop="completeBtn(scope.row,1)">转交</el-link>
					  		</template>
					  	</el-table-column>
					  	<template slot="empty"><noData></noData></template>
					  </el-table>
				  </template>
				  <template v-if="activeName=='second'">
					  <el-table :data="spList" style="width: 100%;height: 536px;">
						<el-table-column label="审批内容" prop="remark.rule">
							<template slot-scope="scope">
								<span class="font-flex-word" style="max-width: 400px;">{{ scope.row.remark.customize || scope.row.remark.rule }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="120px">
							<template slot-scope="scope">
								<el-link style="padding-right: 10px;" type="primary" :underline="false" @click.stop="openDetailXq(scope.row)">查看审批</el-link>
								<el-link type="primary" :underline="false" @click.stop="completeBtn(scope.row,2)">转交</el-link>
							</template>
						</el-table-column>
						<template slot="empty"><noData></noData></template>
					  </el-table>
				  </template>
				  <center class="pagination">
				  	<el-pagination	:current-page.sync="page3" 	layout="total,prev,pager,next" 	:total="total3" @size-change="handleSizeChange3" @current-change="handleCurrentChange3" :page-size="perPage3"></el-pagination>
				  </center>
			  </div>
			</div>
		</el-dialog>
		
		<!-- 详情弹窗 -->
		<taskDetailsPopup :visible.sync="showDetailPopup" v-if="showDetailPopup" :id="taskId" :title="'任务详情'"></taskDetailsPopup>
		<!-- 审批详情 -->
		<examinePopup :title="'审核详情'" :id="examineId" :show.sync="detailShow"></examinePopup>

		<el-dialog title="设置是否参与排名" :visible.sync="dialogVisible" top="30vh" width="520px" :before-close="handleClose">
			<div style="margin-left:20px;">
				<el-radio v-for="(item, index) in radioLi" :key="index" v-model="radio" :label="item.id">
					<span style="font-size:17px;">{{ item.name }}</span>
					<p style="font-size:14px;margin:8px 0 0 24px;">{{ item.kam }}</p>
				</el-radio>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="setRanking" :disabled="rangLoad">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 导入规则 -->
		<el-dialog title="导入人员" :visible.sync="import_rules_show" width="500px" @before-close="close_import">
					<div class="text-center flex-box-v flex-center-center">
						<p><img src="@/assets/image/rules_mould1.png" alt="" /></p>
						<p>仅支持xls、xlsx格式文件</p>
						<el-upload
							class="upload-demo"
							:headers="ATOKEN"
							ref="upload"
							:limit="1"
							:action="action"
							:on-remove="handleRemove"
							:on-success="handleSuccess"
							:before-upload="beforeFilesUpload"
							:file-list="fileList"
						>
							<el-button slot="trigger" type="primary">选取文件</el-button>
						</el-upload>
					</div>
		</el-dialog>
		
		<el-dialog title="设置管理上级" :visible.sync="manageScope_show" :before-close="publicClose2" top="5vh" width="700px">
			<EmployeeSelector
				v-if="manageScope_show"
				ref="Employee2"
				:employee_list="employeeList"
				:user_no_select="false"
				:close_clear_data="false"
				isCreatorSelect
				createDimness
				:selected="selected_manage"
				@confirm="manage_confirm"
			></EmployeeSelector>
			<span slot="footer">
				<el-button @click="publicClose2()">取消</el-button>
				<el-button type="primary" :loading="scope_loading" :disabled="scope_loading" @click="sub_manageScope">完成</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="设置直属上级" :visible.sync="dirSupScope_show" :before-close="publicClose3" top="5vh" width="700px">
			<EmployeeSelector
				v-if="dirSupScope_show"
				:max="1"
				ref="Employee3"
				:multi="false"
				:close_clear_data="false"
				:employee_list="dirSupList"
				isCreatorSelect
				:selected="selected_dirSup"
				@confirm="dirSup_confirm"
			></EmployeeSelector>
			<span slot="footer">
				<el-button @click="publicClose3()">取消</el-button>
				<el-button type="primary" :loading="scope_loading" :disabled="scope_loading" @click="dir_SupScope">完成</el-button>
			</span>
		</el-dialog>
		<!-- 未授权人员 -->
		<el-drawer :visible.sync="showDrawerTow" :append-to-body="true" :with-header="false">
		  <div class="drawer-header flex-box-ce">
		  	<span class="flex-1">未授权人员</span>
		  	<i  @click="showDrawerTow=false" style="cursor: pointer;" class="el-icon-close"></i>
		  </div>
		  <div class="drawer-main">
				<div class="flex-box-ce"><el-input prefix-icon="el-icon-search"  maxlength="10" show-word-limit  placeholder="人员搜索" clearable v-model="userName"></el-input></div>
				<ul class="ul"  v-loading="tableToading2">
				  <li v-for="(item, index) in noUserList" :key="index" class="flex-box-ce li" style="padding: 10px 0;">
					<div class="flex-1 flex-box-ce">
						<userImage :user_name="item.name"  :img_url="item.img_url"></userImage>
						<div class="flex-box-v" style="margin: 0 10px;">
						  <div>{{ item.name }}</div>
						  <div v-if="item.employee_detail.dept_list.length > 0" style="margin-top: 5px;" class="fontColorC font-flex-word">
						    <span v-for="(item2, index2) in item.employee_detail.dept_list" :key="index2">
						      <span>{{ item2.dept_name }}</span>
						      <span v-if="item.employee_detail.dept_list.length - index2 > 1">,</span>
						    </span>
						  </div>
						</div>		  
					</div>
					<span style="cursor: pointer;" class="blue" @click="openZj(item)">事项转交</span>
				  </li>
				</ul>
				<noData v-if="noUserList.length==0"></noData>
				<center class="pagination">
					<el-pagination
					:current-page.sync="page2" 
					layout="total,prev,pager,next" 
					:total="total2" 
					@size-change="handleSizeChange2"
					@current-change="handleCurrentChange2" 
					:page-size="perPage2">
					</el-pagination>
				</center>
		  </div>
		</el-drawer>
	
		<el-dialog title="转交" :visible.sync="comtheResults" width="500px" :close-on-click-modal="false">
		  <div class="">
		    <div style="margin-bottom: 20px;">{{selectIndex==1? '当前负责人':'当前审批人'}}：<span style="padding-left: 10px;">{{ selectUserName }}</span></div>
			<div class="flex-box-ce">
				<span style="line-height:36px;width: 84px;text-align: right;">转给：</span>
				<el-select size="small" v-model="employee_id" filterable clearable placeholder="请输入或选择人员">
					<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="comtheResults = false">取 消</el-button>
		    <el-button type="primary" @click="savecomtheResults()">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 人员同步 -->
		<el-dialog title="钉钉通讯录同步" :visible.sync="isShowTb" top="30vh" width="600px" :before-close="handleClose">
			<div style="margin-left:20px;">
				<el-radio :style="{marginBottom:index==0?'70px':'30px'}" v-for="(item, index) in tbList" :key="index" v-model="selectTbIndex" :label="item.id">
					<span style="font-size:17px;font-weight: 600;" class="black">{{ item.name }}</span>
					<div style="font-size:13px;padding-left: 24px;padding-top: 5px;" class="fontColorC">{{ item.kam }}</div>
				</el-radio>
				<el-cascader
					size="medium"
					style="width: 300px;position: relative;left: 20px;top: -196px;"
					v-model="dept_name"
					@change="handleChange"
					:options="dept_tree"
					:disabled="selectTbIndex!=4"
					collapse-tags
					:props="{checkStrictly: true, value: 'id', label: 'name', multiple: true, children: '_child' }"
					ref="dept"
					clearable
					placeholder="请选择部门"
				></el-cascader>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isShowTb = false">取 消</el-button>
				<el-button type="primary" @click="tb(true)" :disabled="rangLoad">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import {_debounce} from '@/api/auth';
import examinePopup from '@/components/examinePopup';
import taskDetailsPopup from '@/views/common/taskDetailsPopup'
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: '',
			treedata: [1],
			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(),
			copyIds:'',
			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:[],//人员列表
			
			// 未授权
			showDrawerTow:false,
			tableToading2:false,
			page2: 1,
			perPage2: 10,
			total2: 0,
			noUserList: [],
			userName:'',
			
			isShowZj:false,
			activeName:'first',
			taskList:[],
			spList:[],
			showDetailPopup:false,
			detailShow:false,
			examineId:0,
			taskId:0,
			selectUserId:0,
			
			page3: 1,
			perPage3: 10,
			total3: 0,
			keyName:'',
			comtheResults:false,
			selectIndex:1,
			selectUserName:'',
			employee_id:'',
			selectId:0,
			employee_map:[],
			taskType:1,
			
			// 人员同步
			isShowTb:false,
			selectTbIndex:4,
			tbList: [
				{ id: 4, name: '仅同步指定部门内的人员信息(可多选)', kam: '该选择不会包含子部门人员，请确保选中需要同步的人员的直属部门' },
				{ id: 3, name: '仅同步部门信息和上下级关系', kam: '仅同步所有部门名称和上下级所属关系，但不同步人员信息' },
				{ id: 1, name: '同步全部部门和人员信息 ', kam: '同步全部信息所需时间较长，请关注同步成功后推送的工作通知' },
			],
			dept_tree:[],
			dept_name: [],
			dept_ids:[],
		};
	},
	components: {
		EmployeeSelector,examinePopup,taskDetailsPopup
	},
	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();
		},
		userName: {
		  deep: true,
		  handler: _debounce(function(val) {
			this.page2 = 1;
			this.getNoUser();
		  })
		},
		keyName: {
		  deep: true,
		  handler: _debounce(function(val) {
			this.page3 = 1;
			if(this.activeName=='first'){
				if(this.taskType==1){
					this.getTaskList();
				}else{
					this.getTaskList2();
				}
			}else{
				this.getSpList();
			}
		  })
		},
		showDrawerTow(val){
			if(val){
				this.getNoUser();
			}
		},
		activeName(val){
			this.page3= 1;
			this.perPage3= 10;
			this.total3= 0;
			this.keyName='';
			this.$nextTick(()=>{
				if(val=='first'){
					if(this.taskType==1){
						this.getTaskList();
					}else{
						this.getTaskList2();
					}
				}else{
					this.getSpList();
				}
			})
		},
		taskType(val){
			this.page3= 1;
			this.perPage3= 10;
			this.total3= 0;
			if(val==1){
				this.getTaskList();
			}else{
				this.getTaskList2();
			}
		},
		isShowTb(val){
			if(val){
				this.dept_name=[];
				this.dept_ids=[];
				this.selectTbIndex==4;
			}
		},
		diaTableVisible(val){
			if(!val){
				this.getEmployee();
			}
		},
	},
	created() {
		this.filtration();
		this.getInfo();
		this.getEmployee();
		this.manageList();
		this.getEmployeeList();
	},
	mounted() {
		this.$nextTick(function() {
			if (this.$getCache('rule')) {
				this.tips_show = false;
			} else {
				this.tips_show = true;
			}
		});
	},
	methods: {
		//获取员工列表
		updateDate() {
			this.$axios('POST', '/api/employee/accedence', { employee_id: this.messageMore.id, time:this.messageMore.accedence_time}).then(res => {
				this.$message.success('已修改')
			})
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		},
		handleChange(val) {
			if (val.length !== 0) {
				let dept_ids=[];
				val.forEach((item)=>{
					dept_ids.push(item[item.length-1]);
				})
				let set =new Set(dept_ids);
				this.dept_ids=[...set]
			} else {
				this.dept_ids=[];
			}
		},
		//获取员工列表
		getEmployeeList() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 3000, is_official: 1 })
				.then(res => {
					let list = res.data.data.list;
					this.employee_map = list;
				})
				.finally(err => {});
		},
		savecomtheResults(){
			if(!this.employee_id){
				
				this.$message.error('请选择转交人员')
				return false
			}
			let url='';
			if(this.selectIndex==1){
				url=this.taskType==1? "api/integral/work/transfer":'api/integral/work/transfer/reviewer'
			}else{
				url='api/integral/review/transfer'
			}
			let data={
				work_id:this.selectId,
				review_id:this.selectId,
				employee_id:this.employee_id,
			}
			this.$axios('post', url, data).then(res => {
				this.$message.success('已转交')
				this.comtheResults=false;
			})
		},
		completeBtn(item,index){
			this.selectIndex=index;
			this.selectId=item.id;
			this.employee_id='';
			this.comtheResults=true;
		},
		openDetail(row) {
			this.taskId = parseInt(row.id);
			this.showDetailPopup = true;
		},
		openDetailXq(row) {
			this.examineId = row.id;
			this.detailShow = true;
		},
		
		getTaskList(){
			let data={
				status: 'running',
				page: this.page3,
				page_size:this.perPage3,
				content:this.keyName,
				sort:'publish',
				employee_id:this.selectUserId,
			}
			this.$axios('get', '/api/integral/work/list', data).then(res => {
				this.total3 = res.data.data.total;
				this.taskList = res.data.data.list;
			})
		},
		getTaskList2(){
			let data={
				page: this.page3,
				page_size:this.perPage3,
				reviewer_id:this.selectUserId,
				keyword:this.keyName,
			}
			this.$axios('get', '/api/integral/work/list/reviewer/r', data).then(res => {
				this.total3 = res.data.data.total;
				this.taskList = res.data.data.list;
			})
		},
		getSpList(){
			let data={
				type: 'waiting',
				page: this.page3,
				pt_id:0,
				page_size:this.perPage3,
				keyword:this.keyName,
				reviewer_id:this.selectUserId,
			}
			this.$axios('get', '/api/integral/review/list', data).then(res => {
				this.$nextTick(()=>{
					this.total3 = res.data.data.total;
					this.spList = res.data.data.list;
				})
			})
		},
		openZj(item){
			this.page3= 1;
			this.perPage3= 10;
			this.total3= 0;
			this.keyName='';
			this.taskType=1;
			this.selectUserId=item? item.id:this.newId;
			this.activeName='first';
			this.selectUserName=item? item.name:this.messageMore.name,
			this.getTaskList();
			this.isShowZj=true;
		},
		getNoUser(){
			this.tableToading2 = true;
			let data={
				keywords: this.userName,
				page: this.page2,
				page_size:this.perPage2,
				is_scope:0,
			}
			this.$axios('get', '/api/employee/index', data).then(res => {
				this.total2 = res.data.data.pageInfo.count;
				this.noUserList = res.data.data.list;
			}).finally(err => {
				this.tableToading2 = false;
			});
		},
		
		manage_confirm(date) {
			let manageId = [];
			date.employee.forEach(item => manageId.push(item.id))
			let data = {
				employee_id: this.mangeId,
				manage_id: manageId
			}
			this.$axios('post', '/api/employee/superior', data).then(res =>{
				if(res.data.code == 1){
					this.manageScope_show = false
					this.$message.success('设置成功');
					this.moreMessage();
				}
			}).finally(_=>{
				this.scope_loading = false
			})
		},
		dirSup_confirm(date){
			let data = {
				employee_ids: [this.newId],
				superior_id: date.employee.length > 0 ? date.employee[0].id : null
			}
			this.$axios('post','/api/employee/directly_superior',data).then(res =>{
				if(res.data.code == 1){
					this.dirSupScope_show = false
					this.$message.success('设置成功');
					this.moreMessage();
				}
			}).finally(_=>{
				this.scope_loading = false
			})
		},
		sub_manageScope(){
			this.scope_loading = true
			this.$refs.Employee2.confirm();
		},
		dir_SupScope(){
			this.scope_loading = true
			this.$refs.Employee3.confirm();
		},
		detailFormreturn() {
			this.diaTableVisible = false
		},
		nameStrList(list,Str){
			let deptarr = ''
			list.forEach((x, y) =>{
				deptarr += x[Str] + ' ';

			})
			return deptarr
		},
		moreMessage(id) {
			let isId = 0;
			if(id){
				this.newId = id
				isId = id
			}else{
				isId = this.newId
			}
			this.diaTableVisible = true
			this.show_loading = true
			let http1 = this.$axios('get', '/api/employee/info', { id: isId })
			let http2 = this.$axios('get', '/api/employee/code', { employee_id: isId })
			Promise.all([http1, http2]).then(res =>{
				if(res[0]){
					if (res[0].data.code == 1) {
						let data = res[0].data.data
						if(data.employee_detail.dept_list){
							this.deptList = this.nameStrList(data.employee_detail.dept_list, 'dept_name');
						}
						if(data.employee_detail.superior_list){
							let employeeD = data.employee_detail
							if(employeeD.superior_id != 0){
								this.dirSupervisor = employeeD.superior_list.filter(x => x.id == employeeD.superior_id)[0]||{}
							}else{
								this.dirSupervisor = {}
							}
							// 过滤已经离职人员
							let sup=[...this.employeeAll].filter(x => [...employeeD.superior_list].some(y => y.id === x.id));
							this.propList = this.nameStrList(sup, 'name');
						}
						this.messageMore = data
					}
				}
				if(res[1]){
					if (res[1].data.code == 1) {
						this.copyIds = res[1].data.data.encrypt_code;
					}
				}
			}).finally(() =>{
				this.show_loading = false
			})
		},
		setSuperior(row){
			this.mangeId = row.id
			let createData = this.manageData.filter(x => x.is_creator == 1);
			let list = this.manageData.filter(x => x.id != row.id && x.is_creator != 1)
			this.employeeList = list
			let supList =row.employee_detail.superior_list
			if(createData[0]){
				supList.forEach(item =>{
					createData.some(arr =>{
						if(item.id == arr.id){
							item.is_creator = true
							return true
						}
					})
				})
			}
			this.selected_manage.employee = supList
			this.manageScope_show = true
		},
		filtration() {
		  this.$axios('get', '/api/employee/index', { dept_id: this.pid, page: 0, page_size: 3000,is_official:1 }).then(res => {
			 this.employeeAll = res.data.data.list;
		  }); 
		},
		dirSuperior(row){
			this.dirSupList = row.employee_detail.superior_list
			if(this.dirSupervisor.name){
				let arr = []
				arr.push(this.dirSupervisor)
				this.selected_dirSup.employee = arr
			}else{
				this.selected_dirSup.employee = []
			}
			this.dirSupScope_show = true
		},
		publicClose2() {
			this.$refs.Employee2.close();
			this.manageScope_show = false;
		},
		publicClose3() {
			this.$refs.Employee3.close();
			this.dirSupScope_show = false
		},
		//管理列表
		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
				}
			})
		},
		handleSuccess(response) {
			if (response.code == 1) {
				if (response.data.list.length > 0) {
					var htmls = response.data.list;
					var str = "<div class='red'></div>";
					htmls.forEach(item => {
						str += `<div>${item.姓名}:${item.line_err}</div>`;
					});
					this.$notify.error({
						title: '导入错误',
						dangerouslyUseHTMLString: true,
						message: str,
						duration: 0,
						offset: 50,
						customClass: 'notifyBox'
					});
					this.close_import();
				} else {
					this.file = response.data.list;
					this.$message.success({ message: response.msg });
					this.getEmployee();
					this.close_import();
				}
			}else{
				this.$message.error({ message: response.msg });
			}
		},
		handleRemove(file, fileList) {
			if (fileList !== null && fileList.length != 0) {
				this.import_btn_show = true;
			} else {
				this.import_btn_show = false;
			}
		},
		beforeFilesUpload(file) {
			const $ext_list = ['xlsx', 'xls'];
			let len = file.name.split('.').length - 1;
			const $ext_name = file.name.split('.')[len];
			if ($ext_list.indexOf($ext_name) != -1) {
				this.import_btn_show = true;
			} else {
				this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls）');
				return false;
			}
		},
		//导出规则按钮
		derivedRule(){
		  let status=this.status=='-1'? '':this.status
		  let str='';
		  if(status){
			  if(this.dept_id){
				  str='&is_official='+status+'&dept_id='+this.dept_id+'&keywords='+this.keywords;
			  }else{
				  str='&is_official='+status+'&keywords='+this.keywords;
			  }
		  }else{
			  if(this.dept_id){
			  	str='&dept_id='+this.dept_id+'&keywords='+this.keywords;
			  }else{
			  	str='&keywords='+this.keywords;
			  }
		  }
		  let userData=this.$getUserData();
		  window.open(process.env.VUE_APP_BASE_API+'/api/download/employee_status_export?employee_id='+userData.id+str)
		},
		// 导入相关
		close_import() {
			this.import_rules_show = false;
			this.import_btn_show = false;
			this.$refs.upload.clearFiles();
		},
		// 复制ID
		copyId(id) {
			this.$axios('get', '/api/employee/code', { employee_id: id })
				.then(res => {
					if (res.data.code == 1) {
						this.copyIds = res.data.data.encrypt_code;
						this.$nextTick(()=>{
							this.copyToClipboard();
						})
					}
				})
		},
		copyToClipboard() {
			var Url2=document.getElementById("biao");
			Url2.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			this.$message.success('已复制');
		},
		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/employee/disable', { employee_id: this.selectIds })
					.then(res => {
						if (res) {
							this.$message.success('已禁用');
							this.page=1;
							this.getEmployee();
						}
					})
					.finally(err => {
						this.enable_loading = false;
					});
			});
		},
		selectable(row) {
			if (row.is_creator) {
				return false;
			} else if (this.userInfo.id == row.id) {
				return false;
			} else {
				return true;
			}
		},
		setRanking() {
			this.rangLoad = true;
			let data = {
				employee_id: this.rankingtakePartInId,
				switch: Number(this.radio)
			};
			this.$axios('post', '/api/employee/ranking_switch', data)
				.then(res => {
					if (res.data.code == 1) {
						this.$message.success({ message: res.data.msg });
						this.moreMessage();
					}
				})
				.finally(() => {
					this.dialogVisible = false;
					setTimeout(() => {
						this.rangLoad = false;
					}, 200);
				});
		},
		rankingtakePartIn(id, is_ranking) {
			this.radio = is_ranking.toString();
			this.rankingtakePartInId = id;
			this.dialogVisible = true;
		},
		handleClose(done) {
			done();
		},
		//同步信息
		tb(is) {
			if(!is){
				this.isShowTb=true;
				return false
			}
			let data={
				type:this.selectTbIndex,
				dept_list:this.dept_ids.toString(),
			}
			if(this.selectTbIndex==4&&this.dept_ids.length==0){
				this.$message.error({ message: '请选择指定部门' });
				return false
			}
			this.tbLoading = true;
			this.$axios('post', '/api/ding/site_sync',data).then(res => {
				this.$message.success({ message: '同步中，成功后将发送工作通知' });
				this.dept_id = 0;
				this.getInfo();
				this.page=1;
				this.getEmployee();
				this.isShowTb=false
			}).finally(() => {
				this.tbLoading = false;
				this.isShowTb=false
			});
		},
		//搜索
		searchUser() {
			this.page = 1;
			this.getEmployee();
		},
		//是否开通
		changeIs(e, id) {
			var url = e == 1 ? '/api/employee/disable' : '/api/employee/enable';
			this.$axios('post', url, { employee_id: [id] }).then(res => {
				if (e == 0) {
					this.$message.success({ message: '开启成功,可在"角色权限设置对应管理范围"' });
				} else {
					this.$message.success({ message: res.data.msg });
				}
				this.getEmployee();
			});
		},
		//批量开通权限
		participation() {
			if (this.selectIds.length == 0) {
				this.$message.error({ message: '请选择参与的人员！' });
				return;
			}
			this.enable_loading = true;
			this.$axios('post', '/api/employee/enable', { employee_id: this.selectIds }).then(res => {
				this.$message.success({ message: '开启成功,可在"角色权限设置对应管理范围"' });
				this.page=1;
				this.getEmployee();
			}).finally(err => {
				this.enable_loading = false;
			});
		},
		//获取公司信息
		getInfo(is) {
			this.ruleDeprt = true;
			this.$axios('get', '/api/site/info').then(res => {
				this.info = res.data.data;
				this.getDepartment();
			});
		},
		//选择员工
		handleSelectionChange(e) {
			var arr = [];
			for (var item in e) {
				arr.push(e[item].id);
			}
			this.selectIds = arr;
		},
		//点击部门
		handleNodeClick(e) {
			this.page = 1;
			this.dept_id = e.id;
		},
		//获取部门
		getDepartment() {
			this.ruleDeprt = true;
			this.$axios('get', '/api/department/tree').then(res => {
				var list = [{id: 0,name: this.info.name,_child: res.data.data.list}];
				this.bmList = list;
				this.dept_tree = this.getTreeData(res.data.data.list);
			}).finally(() => {
				this.ruleDeprt = false;
			});
		},
		//获取员工
		getEmployee() {
			this.tableToading = true;
			let data={
				dept_id: this.dept_id,
				keywords: this.keywords,
				page: this.page,
				page_size:this.perPage,
			}
			let is_official=this.status=='-1'? '':this.status;
			if(is_official){
				data.is_official=is_official;
			}
			this.$axios('get', '/api/employee/index', data).then(res => {
				this.total = res.data.data.pageInfo.count;
				this.userList = res.data.data.list;
				var visible = this.$getCache('visible');
				if (!visible) {
					this.visible = true;
				}
			}).finally(err => {
				this.tableToading = false;
			});
		},
		visible_close() {
			this.$setCache('visible', 'true');
			this.visible = false;
		},
		//关闭提示
		tips_close() {
			this.$setCache('rule', 'true');
			this.tips_show = false;
		},
		handleSizeChange: function(val) {
			this.perPage = val;
			this.page = 1;
			this.getEmployee();
		},
		//页码变更
		handleCurrentChange: function(val) {
			this.page = val;
			this.getEmployee();
		},
		handleSizeChange2: function(val) {
			this.perPage2 = val;
			this.page2 = 1;
			this.getNoUser();
		},
		//页码变更
		handleCurrentChange2: function(val) {
			this.page2 = val;
			this.getNoUser();
		},
		handleSizeChange3: function(val) {
			this.perPage3 = val;
			this.page3 = 1;
			if(this.activeName=='first'){
				if(this.taskType==1){
					this.getTaskList()
				}else{
					this.getTaskList2()
				}
			}else{
				this.getSpList()
			}
		},
		//页码变更
		handleCurrentChange3: function(val) {
			this.page3 = val;
			if(this.activeName=='first'){
				if(this.taskType==1){
					this.getTaskList()
				}else{
					this.getTaskList2()
				}
			}else{
				this.getSpList()
			}
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.li {
  border-bottom: 1px solid #f1f1f1;
}
.li:hover {
  background-color: #f5f7fa;
}
.ul {
  margin-top: 20px;
}
.el-icon-close {
  cursor: pointer;
  padding: 8px;
  position: relative;
  right: -8px;
}
.el-icon-close:hover {
  color: #f56c6c;
}
.dialog ::v-deep .el-dialog__body{
	padding-top: 0px;
	padding: 0 20px;
}

::v-deep .li .el-checkbox__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 440px;
}
::v-deep .li .el-radio__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
  max-width: 440px;
}
::v-deep .el-drawer {
  width: 500px !important;
}
.drawer-header {
  height: 60px;
  border-bottom: 1px solid #ebebeb;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  padding: 0 20px;
}
.drawer-main {
  height: calc(100vh - 120px);
  padding: 20px;
  overflow-y: scroll;
  min-width: 450px;
  font-size: 14px;
}
.drawer-main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background-color: rgba(216, 216, 216, 0.8);
}
.drawer-main::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(201, 201, 201, 0);
}
.drawer-main::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
  background-color: rgb(168, 167, 167);
}
.drawer-footer {
  background-color: #fff;
  border-top: 1px solid #ebebeb;
  padding: 10px 20px;
  font-size: 14px;
}
::v-deep .width-150 {
  width: 180px;
}
::v-deep :focus {
  outline: 0;
}
.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>
