<template>
	<div class="box boxMinHeight">
		<PageHead :phName="packageName + (index == '1' ? '——批量转交' : '——批量修改目标值')"></PageHead>
		<el-tabs v-model="index">
			<el-tab-pane label="批量转交" name="1" v-if="this.$isAuthoritys(this.$17)"><careOf :packageId="params.package_id"></careOf></el-tab-pane>
			<el-tab-pane label="批量修改目标值" name="2" v-if="this.$isAuthoritys(this.$18)">
				<div class="main">
					<div class="flex-box">
						<el-popover popper-class="popover" placement="bottom" width="250" trigger="manual" content="请先输入搜索条件" v-model="visible">
							<div slot="reference" class="flex-box">
								<el-input prefix-icon="el-icon-search" placeholder="指标名称搜索" v-model="params.search_str" style="width: 250px;" clearable></el-input>
							</div>
						</el-popover>
						<el-select
							style="width: 300px;margin: 0 10px;"
							v-model="params.group_ids"
							:disabled="params.search_str ? false : true"
							multiple
							filterable
							clearable
							placeholder="选择考核表"
						>
							<el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<el-select
							style="width: 300px;"
							v-model="params.employee_ids"
							:disabled="params.search_str ? false : true"
							multiple
							filterable
							clearable
							placeholder="姓名搜索"
						>
							<el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<el-button type="primary" style="margin-left: 10px;" @click="searchBtn">搜索</el-button>
					</div>
					<el-button type="primary" style="margin: 20px 0;" @click="activeMb">批量修改目标值</el-button>
					<div class="table-box">
						<el-table stripe :data="tableData" v-loading="loading" :header-cell-style="{ background: '#ECF5FF' }" @selection-change="handleSelectionChange">
							<el-table-column type="selection"></el-table-column>
							<el-table-column prop="employee_name" label="被考核人">
								<template slot-scope="scope">
									<div class="flex-box-ce">
										<userImage :id="scope.row.employee_id" :user_name="scope.row.userName" width="35px" height="35px" fontSize="12px"></userImage>
										<span style="margin-left: 10px; line-height: 50px;">{{ scope.row.userName }}</span>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="dept_list" label="部门">
								<template slot-scope="scope">
									<div v-if="scope.row.dept_list.length > 0" class="flex-box-ce">
										<span v-for="(item, index) in scope.row.dept_list" :key="index">
											{{ item.name }}
											<span v-if="scope.row.dept_list.length != index + 1">,</span>
										</span>
									</div>
									<span v-else>-</span>
								</template>
							</el-table-column>
							<el-table-column prop="index_name" label="指标名称" min-width="200"></el-table-column>
							<el-table-column prop="target" label="目标值"></el-table-column>
							<el-table-column prop="unit" label="单位"></el-table-column>
							<template slot="empty">
								<NoData></NoData>
							</template>
						</el-table>
						<Pagination :page="page" :page_size="page_size" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>

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

		<el-dialog title="填写备注" :visible.sync="isShowRemark" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div style="margin: 0 auto;">
				<el-input type="textarea" v-model="remark" placeholder="请输入备注" :autosize="{ minRows: 3, maxRows: 6 }" show-word-limit maxlength="200"></el-input>
				<div style="height: 20px;"></div>
				<el-checkbox v-model="ding_msg" :true-label="1" :false-label="0">发送钉钉通知</el-checkbox>
				<div class="yellow" style="margin-top: 10px;">该备注将适用于修改的所有指标</div>
			</div>
			<span slot="footer">
				<div class="flex-box-end" style="margin-top: 20px;">
					<el-button @click="isShowRemark = false">取 消</el-button>
					<el-button type="primary" @click="opneWebSocket()">提 交</el-button>
				</div>
			</span>
		</el-dialog>

		<!-- 批量修改目标值 -->
		<el-dialog title="批量修改目标值" :visible.sync="isShowBreak" width="800" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div>
				<el-table :data="selectList" stripe v-loading="loading" :header-cell-style="{ background: '#ECF5FF' }" max-height="600">
					<el-table-column prop="employee_name" label="被考核人">
						<template slot-scope="scope">
							<div class="flex-box-ce">
								<!-- <userImage :id="scope.row.employee_id" :user_name="scope.row.userName" width="35px" height="35px" fontSize="12px"></userImage> -->
								<span>{{ scope.row.userName }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="index_name" label="指标名称" min-width="150"></el-table-column>
					<el-table-column prop="group_name" label="目标值">
						<template slot-scope="scope">
							<el-input v-model="scope.row.target" style="width: 100px;" @input="[(scope.row.target = scope.row.target.replace(/[^\d]/g, ''))]" />
						</template>
					</el-table-column>
					<el-table-column prop="unit" label="单位">
						<template slot-scope="scope">
							<el-input v-model="scope.row.unit" style="width: 100px;" />
						</template>
					</el-table-column>
					<template slot="empty">
						<NoData></NoData>
					</template>
				</el-table>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;">
						<el-button @click="isShowBreak = false">取 消</el-button>
						<el-button type="primary" @click="submitBreak()">确认修改</el-button>
					</div>
				</span>
			</div>
		</el-dialog>

		<el-dialog
			title="提交结果"
			:visible.sync="isResult"
			width="800"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="results.length == selectList.length || isError"
		>
			<div>
				<div style="margin-top: 20px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
					<div class="flex-box-ce results" style="font-weight: 600;">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">序号</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">对象</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">指标名称</div>
						<div class="flex-2">提交结果</div>
					</div>
					<div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">{{ results.length - index }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.userName }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.index_name }}</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">
							<span v-if="item.status" class="green">{{ item.msg }}</span>
							<span v-else class="red">{{ item.msg }}</span>
						</div>
					</div>
				</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;" v-if="results.length == selectList.length || isError">
						<el-button type="primary" @click="isResult = false" size="small">关 闭</el-button>
					</div>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/public/EmployeeSelector';
import PageHead from '@/components/public/PageHead';
import careOf from '@/views/assessManagement/careOf';
export default {
	name: 'updateTarget',
	components: { EmployeeSelector, PageHead, careOf },
	data() {
		return {
			loading: false,
			tableData: [],
			total: 0,
			page: 1,
			page_size: 10,

			deptVisibleName: '',
			dept_selected: { dept: [], employee: [] },
			show_dept_selector: false,
			groupOptions: [], //选择考核表数据
			employees: [], //被考核人员列表
			packageName: '',
			params: {
				package_id: 0, //考核包id
				dept_ids: [], //部门id
				group_ids: [], //考核表ID
				employee_ids: [], //搜索人员ID
				search_str: ''
			},
			visible: false,
			multipleSelection: [],
			isShowBreak: false,
			selectList: [],
			results: [],
			resultIndex: 0,
			remark: '',
			isShowRemark: false,
			isResult: false,
			isError: false,

			index: '1',
			ding_msg: 0,
			name:'updateTarget',
		};
	},
	watch: {
		isResult(val) {
			if (!val) {
				this.getList();
			}
		}
	},
	created() {
		this.keyupEnter();
		if (this.$route.query.packageId) {
			this.params.package_id = this.$route.query.packageId;
			this.packageName = this.$route.query.packageName;
			this.getInitData();
		}
		if (this.$route.query.index) {
			this.index = this.$route.query.index;
		}
	},
	mounted() {
		if (this.$route.query.index && this.$route.query.index == '2') {
			this.$nextTick(() => {
				this.visible = true;
				setTimeout(() => {
					this.visible = false;
				}, 3000);
			});
		}
	},
	methods: {
		keyupEnter() {
			let that=this;
			document.onkeydown = e => {
				let body = document.getElementsByTagName('body')[0];
				if (e.keyCode === 13 && that.name=='updateTarget'&& e.target === body) {
					that.searchBtn(); //调用查询方法
				}
			};
		},
		submitBreak() {
			let isError = false;
			this.selectList.some(item => {
				if (!item.unit || !item.target) {
					isError = true;
					return true;
				}
			});
			if (isError) {
				this.$message.error('目标值或者单位不能为空');
				return;
			}
			this.results = [];
			this.resultIndex = 0;
			this.remark = '';
			this.isShowBreak = false;
			this.isError = false;
			this.ding_msg = 0;
			this.isShowRemark = true;
		},
		opneWebSocket() {
			this.isShowRemark = false;
			this.isResult = true;
			let wsData = this.selectList;
			if (wsData[this.resultIndex]) {
				let data = wsData[this.resultIndex];
				data.remark = this.remark;
				data.id = data.pe_id;
				data.ding_msg = this.ding_msg;
				this.submit(data);
			}
		},
		submit(data) {
			this.$axios('post', '/api/per/package/index_target', data)
				.then(res => {
					data.msg = res.data.msg;
					data.status = 1;
					this.results.unshift(data);
				})
				.catch(err => {
					data.msg = err.data.msg;
					data.status = 0;
					this.results.unshift(data);
				})
				.finally(() => {
					this.resultIndex++;
					this.opneWebSocket();
				});
		},
		activeMb() {
			if (this.multipleSelection.length == 0) {
				this.$message.error('请选择指标');
				return;
			}
			this.selectList = JSON.parse(JSON.stringify(this.multipleSelection));
			this.isShowBreak = true;
		},
		searchBtn() {
			if (!this.params.search_str) {
				this.$message.error('请输入搜索条件');
				return;
			}
			this.page = 1;
			this.tableData = [];
			this.getList();
		},
		getInitData(id) {
			this.$axios('get', '/api/per/package/info_v3_aid', { package_id: this.params.package_id }).then(res => {
				this.groupOptions = res.data.data.groups; //考核表下拉
				this.employees = res.data.data.employees;
			});
		},
		getList() {
			let data = {
				search_str: this.params.search_str,
				package_id: this.params.package_id,
				page: this.page,
				page_size: this.page_size
			};
			if (this.params.employee_ids.length > 0) {
				data.employee_ids_code = this.$returnCode(this.params.employee_ids);
			}
			if (this.params.group_ids.length > 0) {
				data.group_ids = JSON.stringify(this.params.group_ids);
			}
			this.loading = true;
			this.$axios('get', 'api/per/package/search_index', data)
				.then(res => {
					let list = res.data.data.list;
					list.forEach(item => {
						if (this.$getEmployeeList()[item.employee_id]) {
							let obj = this.$getEmployeeList()[item.employee_id];
							item.userName = obj.name;
							item.dept_list = obj.dept_list;
						}
					});
					this.tableData = list;
					this.total = res.data.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		//部门选择
		dept_confirm(data) {
			this.dept_selected = { dept: [], employee: [] };
			let deptIds = [];
			this.deptVisibleName = '';
			if (data.dept !== null && data.dept.length != 0) {
				this.dept_selected = data;
				data.dept.forEach((element, index) => {
					deptIds.push(element.dept_id);
					this.deptVisibleName += element.dept_name;
					if (data.dept.length - index > 1) {
						this.deptVisibleName += ',';
					}
				});
			}
			this.page = 1;
			this.params.dept_ids = JSON.stringify(deptIds);
			// this.getList();
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 页面变更
		handleCurrentChange(val) {
			this.page = val;
			this.getList();
		},
		// 页面跳转
		handleSizeChange(val) {
			this.page_size = val;
			this.getList();
		}
	}
};
</script>
<style scoped="scoped" lang="scss">
::v-deep .el-select__tags-text {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	// display: inline-block;
}
.results {
	border-bottom: 1px solid #f1f1f1;
	text-align: center;
}
.results div {
	padding: 10px;
}
.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;
}
.dept_wdiv {
	width: 200px;
	position: relative;
	.dept_inp {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 9;
		border: 1px solid #e0e0e0;
		border-radius: 3px;
		line-height: 32px;
		font-size: 14px;
		padding: 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		cursor: pointer;
		color: #606266;
	}
	svg {
		position: absolute;
		top: 0;
		right: 0;
		top: 10px;
		right: 10px;
		font-size: 14px;
		color: #b5b5b5;
	}
}
</style>
