<template>
	<div class="all">
		<div class="main">
			<div class="flex-box" style="height: 140px;position: relative;">
				<div style="margin-left: 30px;" class="flex-box-ce">
					<div>
						<div class="title">1、选择需要转交的人员</div>
						<el-select style="width: 250px;" v-model="employee_id" filterable clearable placeholder="被转交人">
							<el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
					<i class="el-icon-d-arrow-right" style="padding: 0 10px;font-size: 24px;position: relative;top: 16px;"></i>
					<div>
						<div class="title">2、选择给谁</div>
						<el-select style="width: 250px;" v-model="to_employee_id" filterable clearable placeholder="转交人">
							<el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="flex-box" style="height: 140px;position: relative;" v-loading="loading">
				<div style="margin-left: 30px;">
					<div class="title">3、选择需要转交的节点</div>
					<div style="padding-top: 10px;">
						<el-checkbox v-for="(item, index) in selectList" :disabled="!item.num" v-model="item.isSelect" :key="item.name">
							{{ item.name }} ({{ item.num }})
						</el-checkbox>
					</div>
				</div>
			</div>
			<!--      <div class="flex-box" style="height: 140px;position: relative;">
        <div class="num2">3</div>
        <div style="margin-left: 30px;">
          <div class="title">选择转交人</div>
          <el-select style="width: 300px;" v-model="to_employee_id" filterable clearable placeholder="姓名搜索">
            <el-option v-for="item in employees" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </div> -->
		</div>
		<div class="footer" style="padding-left: 70px;margin-top: 40px;"><el-button type="primary" @click="submitForm()" round style="width: 150px;">批量转交</el-button></div>
		<el-dialog title="转交结果" :visible.sync="isResult" width="800" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="results.length == submitList.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-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;">{{ returnName(item.from_employee_id) }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ returnName(item.to_employee_id) }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ filtrationStr(item.code) }}</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 == submitList.length || isError">
						<el-button type="primary" @click="isResult = false" size="small">关 闭</el-button>
					</div>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'careOf',
	props: {
		packageId: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			loading: false,
			to_employee_id: '',
			employee_id: '',
			selectList: [
				{ name: '目标制定', item: [], isSelect: true, num: 0, code: 'target' },
				{ name: '目标确认', item: [], isSelect: true, num: 0, code: 'confirm' },
				{ name: '结果值录入', item: [], isSelect: true, num: 0, code: 'result_value' },
				{ name: '上级评分', item: [], isSelect: true, num: 0, code: 'score_supervisor' },
				{ name: '指定评分人', item: [], isSelect: true, num: 0, code: 'special_scorer' },
				{ name: '审批', item: [], isSelect: true, num: 0, code: 'review' },
				{ name: '管理记录人', item: [], isSelect: true, num: 0, code: 'record_ids' }
			],
			submitList: [],
			results: [],
			resultIndex: 0,
			remark: '',
			isShowRemark: false,
			isResult: false,
			isError: false
		};
	},
	watch: {
		employee_id() {
			this.init();
		},
		isResult(val) {
			if (!val) {
				this.empty();
			}
		}
	},
	created() {
		this.employees = this.$getEmployeeList();
	},
	methods: {
		empty() {
			this.to_employee_id = '';
			this.employee_id = '';
			this.selectList = [
				{ name: '目标制定', item: [], isSelect: true, num: 0, code: 'target' },
				{ name: '目标确认', item: [], isSelect: true, num: 0, code: 'confirm' },
				{ name: '结果值录入', item: [], isSelect: true, num: 0, code: 'result_value' },
				{ name: '上级评分', item: [], isSelect: true, num: 0, code: 'score_supervisor' },
				{ name: '指定评分人', item: [], isSelect: true, num: 0, code: 'special_scorer' },
				{ name: '审批', item: [], isSelect: true, num: 0, code: 'review' },
				{ name: '管理记录人', item: [], isSelect: true, num: 0, code: 'record_ids' }
			];
		},
		filtrationStr(str) {
			let name = '';
			switch (str) {
				case 'review':
					name = '审批节点';
					break;
				case 'target':
					name = '目标制定';
					break;
				case 'confirm':
					name = '目标确认';
					break;
				case 'execution':
					name = '执行中';
					break;
				case 'score_self':
					name = '自评';
					break;
				case 'result_value':
					name = '结果值录入';
					break;
				case 'score_mutual':
					name = '互评';
					break;
				case 'special_scorer':
					name = '指定评分人';
					break;
				case 'score_supervisor':
					name = '上级评分';
					break;
				case 'score':
					name = '所有评分';
					break;
				case 'record_ids':
					name = '管理记录人';
					break;
				default:
					name = '未知错误';
					break;
			}
			return name;
		},
		returnName(id) {
			return this.$getEmployeeList()[id].name;
		},
		opneWebSocket() {
			let wsData = this.submitList;
			if (wsData[this.resultIndex]) {
				let data = {
					id: wsData[this.resultIndex].pe_id,
					from_employee_id_code: this.$returnCode(this.employee_id),
					to_employee_id_code: this.$returnCode(this.to_employee_id),
					from_employee_id: this.employee_id,
					to_employee_id: this.to_employee_id,
					code: wsData[this.resultIndex].code
				};
				if (wsData[this.resultIndex].node_id) {
					//管理记录人转交
					data.node_id = wsData[this.resultIndex].node_id;
				}
				this.submit(data);
			}
		},
		submit(data) {
			let url = data.node_id ? 'api/per/package/transfer' : 'api/per/package/transfer_manager';
			this.$axios('post', url, 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();
				});
		},
		submitForm() {
			let isSelect = false,
				submitList = [];
			if (!this.employee_id) {
				this.$message.error('请选择需要转交人员');
				return;
			}
			this.selectList.forEach((item, index) => {
				if (item.isSelect) {
					item.item.forEach(item2 => {
						item2.code = item.code;
					});
					submitList.push(...item.item);
					isSelect = true;
				}
			});
			if (!isSelect) {
				this.$message.error('请选择需要转交的节点');
				return;
			}
			if (!this.to_employee_id) {
				this.$message.error('请选择转交人员');
				return;
			}
			if (submitList.length == 0) {
				this.$message.error('所选择节点没有符合转交条件人员');
				return;
			}
			this.submitList = submitList;
			this.results = [];
			this.resultIndex = 0;
			this.remark = '';
			this.isError = false;
			this.isResult = true;
			this.opneWebSocket();
		},
		init() {
			if (!this.employee_id) {
				this.selectList.forEach((item, index) => {
					this.$set(this.selectList[index], 'num', 0);
					this.$set(this.selectList[index], 'item', {});
				});
				return false;
			}
			this.loading = true;
			this.$axios('get', '/api/per/package/search_transfer', { id: this.packageId, employee_id_code: this.$returnCode(this.employee_id) })
				.then(res => {
					let { process, dimension } = res.data.data;
					this.selectList.forEach((item, index) => {
						if (process[item.code]) {
							this.$set(this.selectList[index], 'num', process[item.code].length);
							this.$set(this.selectList[index], 'item', process[item.code]);
						}
					});
					this.$set(this.selectList[6], 'num', dimension.record_ids.length);
					this.$set(this.selectList[6], 'item', dimension.record_ids);
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style scoped="scoped" lang="scss">
.results {
	border-bottom: 1px solid #f1f1f1;
	text-align: center;
}
.results div {
	padding: 10px;
}
.num,
.num2 {
	width: 40px;
	height: 40px;
	border: 2px solid #238dfa;
	line-height: 40px;
	text-align: center;
	color: #238dfa;
	border-radius: 50%;
	font-size: 16px;
	// position: relative;
}
.num::after {
	content: ' ';
	position: absolute;
	width: 2px;
	background-color: #238dfa;
	top: 40px;
	bottom: 0;
	left: 20px;
}
.all {
	position: relative;
	font-size: 14px;
	background-color: #fff;
	padding: 20px;
}
.title {
	font-size: 16px;
	margin-bottom: 10px;
	color: #606266;
}
.main {
	// margin-bottom: 60px;
}
</style>
