<template>
	<div class="box-all boxMinHeight">
		<PageHead :phName="packageName"></PageHead>
		<div class="main">
			<div class="flex-box-ce" style="padding: 10px 0;border-bottom: 1px solid #f1f1f1;margin-bottom: 20px;">
				<span :class="{ active: activeName == 'noEntering' }" style="width: 80px;" @click="activeName = 'noEntering'">未录入({{ noStatusListTotal }})</span>
				<span :class="{ active: activeName == 'entering' }" style="width: 80px;" @click="activeName = 'entering'">已录入({{ statusListTotal }})</span>
			</div>

			<div v-show="activeName == 'noEntering'">
				<template v-if="noStatusList.length > 0">
					<div v-for="(item, index) in noStatusList" :key="index">
						<div class="wd-title">{{ item.wdName }}</div>
						<el-table :data="item.list" border :header-cell-style="{ background: '#ECF5FF' }">
							<el-table-column prop="userName" label="姓名"></el-table-column>
							<el-table-column prop="name" label="指标名称"></el-table-column>
							<el-table-column prop="per_remark" label="考核标准" min-width="200">
								<template slot-scope="scope">
									<PreBox :value="scope.row.per_remark"></PreBox>
								</template>
							</el-table-column>
							<el-table-column prop="target" label="目标值"></el-table-column>
							<el-table-column prop="weight" label="权重%"></el-table-column>
							<el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
							<el-table-column label="结果值附件" min-width="200">
								<template slot-scope="scope">
									<div style="margin-bottom: 10px;" class="flex-box-ce fontColorC">
										<el-button class="primaryBtn" icon="el-icon-paperclip" plain size="small" @click="uploadOss(scope.row)">附件</el-button>
										<!-- <div style="padding-left:10px;font-size: 12px;">附件存放在企业钉盘，请确保钉盘有足够空间</div> -->
									</div>
									<div class="">
										<div v-for="(item, index) in scope.row.result_file.append" style="cursor: pointer;margin-bottom: 5px;" :key="index" class="blue flex-box-ce">
											<i  class="el-icon-paperclip fontColorB" style="font-size: 18px;padding-right: 10px;"></i>
											<div style="width: 400px;" class="font-flex-word" @click="openImg(item)">{{ item.fileName }}</div>
											<i class="el-icon-close fontColorB" @click="deleteFile(scope.row.result_file.append,index)" style="font-size: 18px;padding-left: 10px;"></i>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="实际完成结果值" min-width="150">
								<template slot-scope="scope">
									<div class="flex-box-ce" v-if="scope.row.type == 1">
										<el-input
											type="textarea"
											@input="[(scope.row.result = isFloor(scope.row.result))]"
											style="min-width: 130px;"
											:rows="1"
											v-model="scope.row.result"
											placeholder="请输入"
										></el-input>
										<span style="width: 40px;padding-left: 5px;" class="font-flex-word">{{ scope.row.unit }}</span>
									</div>
									<div v-else>--</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
				<noData v-else></noData>
			</div>
			<div v-show="activeName == 'entering'">
				<template v-if="statusList.length > 0">
					<div v-for="(item, index) in statusList" :key="index">
						<div class="wd-title">{{ item.wdName }}</div>
						<el-table :data="item.list" border :header-cell-style="{ background: '#ECF5FF' }">
							<el-table-column prop="userName" label="姓名"></el-table-column>
							<el-table-column prop="name" label="指标名称"></el-table-column>
							<el-table-column prop="per_remark" label="考核标准" min-width="200">
								<template slot-scope="scope">
									<PreBox :value="scope.row.per_remark"></PreBox>
								</template>
							</el-table-column>
							<el-table-column prop="target" label="目标值"></el-table-column>
							<el-table-column prop="weight" label="权重%"></el-table-column>
							<el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
							<el-table-column label="结果值附件" min-width="200">
								<template slot-scope="scope">
									<div v-if="scope.row.result_file.append.length > 0">
										<div>附件</div>
										<div class="">
											<div v-for="(item, index) in scope.row.result_file.append" style="cursor: pointer;margin-bottom: 5px;" :key="index" class="blue flex-box-ce">
												<i  class="el-icon-paperclip fontColorB" style="font-size: 18px;padding-right: 10px;"></i>
												<div style="width: 400px;" class="font-flex-word" @click="openImg(item)">{{ item.fileName }}</div>
												<!-- <i class="el-icon-close fontColorB" @click="deleteFile(scope.row.result_file.append,index)" style="font-size: 18px;padding-left: 10px;"></i> -->
											</div>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="实际完成结果值" min-width="150" prop="result">
								<template slot-scope="scope">
									<span v-if="scope.row.type == 1">
										<span class="font-flex-word">{{ scope.row.result }}</span>
										<span style="width: 40px;padding-left: 5px;" class="font-flex-word">{{ scope.row.unit }}</span>
									</span>
									<div v-else>--</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
				<noData v-else></noData>
			</div>
		</div>
		<footer class="footer flex-box-end" v-if="activeName == 'noEntering'">
			<el-button class="primaryBtn" @click="save(1)">暂存</el-button>
			<el-button type="primary" @click="save(0)">提交结果值</el-button>
		</footer>
	</div>
</template>
<script>
import PageHead from '@/components/public/PageHead'; //头部---返回
import { _debounce } from '@/api/auth';
export default {
	components: { PageHead },
	name: 'resultSet',
	data() {
		return {
			title: '2024年的绩效考核',
			activeName: 'noEntering',
			noStatusList: [],
			noStatusListTotal: 0,
			statusList: [],
			statusListTotal: 0,
			id: '', //员工考核记录id
			packageName: '', //考核包名称 结果值录入用到
			// 上传图标与附件
			Xtoken: { 'X-Token': this.$getToken() },
			img_fileList: [], // 图片附件
			file_fileList: [], //文件附件
			imgs: [],
			doc: '',
			isShowImg: false,
			imgUrl: '',
			selectItem: {},
			accept: 'image/jpeg,image/png',
			accept2:
				'application/pdf,application/vnd.ms-excel,application/msword,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
		};
	},
	watch: {},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id;
			this.packageName = this.$route.query.packageName;
			this.getPackageDtail();
		}
	},
	mounted() {},
	methods: {
		deleteFile(item,index) {
			if (item.length == 0) {
				item = [];
				return false;
			}
			item.splice(index, 1);
		},
		openImg(item) {
			let corpId = this.$getCache('corpId');
			let loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading'
				// background: 'rgba(0, 0, 0, 0.7)'
			});
			if (item) {
				this.$axios('get', 'api/drive/grant', { file_id: item.fileId })
					.then(res => {
						this.$dd.ready(() => {
							this.$dd.biz.cspace.preview({
								corpId: corpId,
								spaceId: item.spaceId,
								fileId: item.fileId,
								fileName: item.fileName,
								fileSize: item.fileSize,
								fileType: item.fileType,
								onSuccess: function(res) {
									console.log(JSON.stringify(res));
								},
								onFail: function(err) {
									console.log(JSON.stringify(err));
								}
							});
						});
					})
					.finally(() => {
						loading.close();
					});
			}
		},
		uploadOss(item) {
			let that = this;
			// let data={
			// 	fileId: "64856759356",
			// 	fileName: "指标导入模板.xlsx",
			// 	fileSize: 30742,
			// 	fileType: "xlsx",
			// 	spaceId: "6200066562",
			// }
			// item.result_file.append.push(data);
			// return false
			let corpId = this.$getCache('corpId');
			this.$axios('get', 'api/drive/info').then(res => {
				let spaceId = res.data.data.space_id.toString();
				this.$dd.ready(() => {
					this.$dd.biz.util.uploadAttachment({
						image: {
							multiple: true,
							compress: false,
							max: 5,
							spaceId: spaceId
						},
						space: {
							corpId: corpId,
							spaceId: spaceId,
							max: 5
						},
						file: {
							spaceId: spaceId,
							max: 5
						},
						types: ['photo', 'file', 'space'], //PC端支持["photo","file","space"]
						onSuccess: function(res) {
							console.log(JSON.stringify(res));
							let data = res.data;
							item.result_file.append.push(...data);
						},
						onFail: function(err) {
							console.log(JSON.stringify(err));
						}
					});
				});
			});
		},
		isFloor(el) {
			var obj = event.target;
			var t = el.charAt(0);
			el = el
				.replace('.', '$#$') //把第一个字符'.'替换成'$#$'
				.replace(/\./g, '') //把其余的字符'.'替换为空
				.replace('$#$', '.') //把字符'$#$'替换回原来的'.'
				.replace(/[^\d.]/g, '') //只能输入数字和'.'
				.replace(/^\./g, '') //不能以'.'开头
				.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1'); //只保留2位小数
			if (t == '-') {
				el = '-' + el;
			}
			return el || null;
		},

		// 提交
		save(num) {
			let isLr = false;
			let data = {
				id: this.id, //个人考核包ID
				cache: num, //是否暂存 1 是 0 否（提交）
				result_info: '' //结果值信息
			};
			let result_info = [];
			let err = '';
			this.noStatusList.some(item => {
				item.list.forEach(e => {
					if (e.type == 1) {
						if (e.result) {
							result_info.push({
								result: e.result, //单项目结果值
								dimension_key: e.message.dimension_key, //维度索引
								index_key: e.message.index_key, //指标索引
								index_id: e.id, //指标ID
								result_file: e.result_file
					 	});
						}
					} else {
						// if (e.result_file.append.length > 0 || e.result_file.images.length > 0) {
							result_info.push({
								// result: e.result, //单项目结果值
								dimension_key: e.message.dimension_key, //维度索引
								index_key: e.message.index_key, //指标索引
								index_id: e.id, //指标ID
								result_file: e.result_file
							});
						// }
					}
				});
			});
			if (result_info.length == 0) {
				this.$message({ type: 'error', message: '至少输入一项结果值', duration: 3000, center: true });
				return false;
			}
			data.result_info = JSON.stringify(result_info);
			this.$axios('post', '/api/per/package/record_result', data).then(res => {
				this.$message.success(num == 1 ? '暂存成功' : '提交成功');
				this.getPackageDtail();
			});
		},
		getPackageDtail() {
			this.$axios('get', '/api/per/package/employee/info', { id: this.id }).then(res => {
				let data = res.data.data;
				let dimension = data.dimension;
				let relevance_employee = data.relevance_employee;
				dimension.forEach((item, index) => {
					if (item.index.length > 0) {
						item.index.forEach((item2, index2) => {
							item2.wdName = item.name;
							item2.userName = relevance_employee.name;
						});
					}
				});
				let flow = data.flow;
				let list = []; //结果值录入集合
				flow.some(item => {
					if (item.code == 'result_value') {
						item.target.forEach(item2 => {
							if (item2.employee_id == this.$getUserData().id) {
								list = item2.list;
								status = item2.status;
							}
						});
						return true;
					}
				});
				let statusList = []; //已录入指标
				let noStatusList = []; //未录入指标
				list.forEach(item => {
					//区分录入与未录入
					if (item.status == 2) {
						dimension[item.dimension_key].index[item.index_key].message = item;
						statusList.push(dimension[item.dimension_key].index[item.index_key]);
					}
					if (item.status == 1) {
						dimension[item.dimension_key].index[item.index_key].message = item;
						if (item.result_cache) {
							//是否有暂存的数据有就显示出来
							dimension[item.dimension_key].index[item.index_key].result = item.result_cache;
							dimension[item.dimension_key].index[item.index_key].result_file = item.result_file;
						}
						noStatusList.push(dimension[item.dimension_key].index[item.index_key]);
					}
				});
				this.statusListTotal = statusList.length;
				this.noStatusListTotal = noStatusList.length;
				this.statusList = this.conformityData(statusList);
				this.noStatusList = this.conformityData(noStatusList);
				console.log(this.noStatusList)
			});
		},
		conformityData(arr) {
			let returnArr = [];
			let strs = new Set(
				arr.map(item => {
					return item.wdName;
				})
			);
			strs.forEach(item => {
				let obj = {
					wdName: item,
					list: arr.filter(e => {
						return e.wdName == item;
					})
				};
				returnArr.push(obj);
			});
			return returnArr;
		}
	}
};
</script>
<style scoped lang="scss">
.wd-title {
	margin: 20px 0;
	padding-left: 10px;
	border-left: 3px solid #409eff;
}
.box-all {
	position: relative;
	background-color: #fff;
	font-size: 14px;
	padding: 20px;
}
.main {
	margin-bottom: 60px;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-top: 1px solid #e8e8e8;
	padding: 12px 30px;
}
.active {
	color: #409eff;
}
</style>
