<template>
	<div
		class="follow_box"
		v-loading="datas.loading"
		element-loading-text="数据加载中..."
	>
		<div class="btn_box">
			<div v-for="(item, index) in datas.btns" @click="handleClick(item)">
				<div :class="item.class">
					<img
						src="/src/assets/refresh1.png"
						v-if="item.icon === 1"
					/>
					<img
						src="/src/assets/log_down.png"
						v-if="item.icon === 2"
					/>
					<span style="margin-left: 5px">{{ item.name }}</span>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="detailed_box">
				<div class="detailed_line"></div>
				<div class="detailed_title">流程</div>
			</div>
			<!-- 审批流 -->
			<TimeLineStatus :timelineList="datas.timelineList" />
		</div>
	</div>
</template>

<script setup>
import { approvalFlowTrackingGet } from '@/utils/api.js';
import { reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import TimeLineStatus from '../components/Timeline/timeLineStatus.vue';
import { formatDate } from '@/utils/lodash/formatDate.js';
const $route = useRoute();
const { proxy } = getCurrentInstance();
const { $http } = proxy;
const store = useStore();
const $router = useRouter();
const datas = reactive({
	loading: false,
	timelineList: [
		{
			title: '发起审批',
			Originators: {}, //发起人
			examine: [],
			isIconStutas: 1,
			id: 0,
			method: 0, //审批方式
			result: false, //审核结果
		},
		// {
		// 	title: '直属上级审批',
		// 	Originators: {}, //发起人
		// 	examine: [
		// 		{
		// 			name: '杨春龙',
		// 			date: '2023-03-29 10:51:01',
		// 			remack: '',
		// 			status: 5, //审批人的审批状态
		// 		},
		// 	],
		// 	method: 1, //审批方式
		// 	isIconStutas: 5,
		// 	id: 1,
		// 	result: false, //审核结果
		// },
		{
			title: '结束',
			Originators: {}, //发起人
			examine: [],
			method: 0, //审批方式
			isIconStutas: 2,
			id: 2,
			result: 1, //审核结果 1审核中 2审核不通过 3审核通过
		},
	],
	btns: [
		{
			name: '刷新',
			class: 'refreshBtn',
			type: 'refresh',
			icon: 1,
		},
		// {
		// 	name: '退出',
		// 	class: 'outBtn',
		// 	type: 'out',
		// 	icon: 2,
		// },
	],
});
const initData = (data) => {
	let dts = data.details;
	let ways = data.approvalDetail.ways || [];
	let length = ways.length || 0;
	if (!length) {
		return;
	}
	const L = ['', '部门负责人审批', '指定成员审批', '其他部门负责人审批'];
	let itemObj = {};
	for (let i = 0; i < length; i++) {
		//显示审批类型和审批方式

		let item = ways[i];
		let obj = {
			title: L[item.type],
			Originators: {},
			examine: [],
			method: item.method,
			isIconStutas: 0,
			id: 0,
			result: false,
		};
		//找出对应的审批方式进行填充
		itemObj[item.id] = item;
		let dLength = dts.length || 0;
		let ids = [];
		for (let d = 0; d < dLength; d++) {
			let dItem = dts[d];
			//找出对应的ways，要不所有的审批方式都会填充
			if (dItem.wayId === item.id) {
				// //获取具体的ways项
				// let wItem = itemObj[dItem.wayId];
				//添加审批方式的内容 直接将详情中的填充
				let examineObj = {
					name: dItem.approverName || '',
					date: dItem.approvalDate
						? formatDate(new Date(dItem.approvalDate), false)
						: '',
					remack: dItem.remark || '',
					status: dItem.approvalResult, //审批人的审批状态
					id: dItem.approverId,
				};
				ids.push(dItem.approverId);
				obj.examine.push(examineObj);
				obj.isIconStutas = dItem.approvalResult;
			}
		}

		//填充时间线
		datas.timelineList.splice(i + 1, 0, obj);
		//设置结束的icon
		let tLength = datas.timelineList.length;
		datas.timelineList[tLength - 1].isIconStutas = data.isDone ? 1 : 2;

		//没有明细，发起审批置灰
		// datas.timelineList[0].isIconStutas = dts.length ? 1 : 2;
	}
};
const initDetails = () => {
	let arr = [
		{
			title: '发起审批',
			Originators: {}, //发起人
			examine: [],
			isIconStutas: 1,
			id: 0,
			method: 0, //审批方式
			result: false, //审核结果
		},
		// {
		// 	title: '直属上级审批',
		// 	Originators: {}, //发起人
		// 	examine: [
		// 		{
		// 			name: '杨春龙',
		// 			date: '2023-03-29 10:51:01',
		// 			remack: '',
		// 			status: 5, //审批人的审批状态
		// 		},
		// 	],
		// 	method: 1, //审批方式
		// 	isIconStutas: 5,
		// 	id: 1,
		// 	result: false, //审核结果
		// },
		{
			title: '结束',
			Originators: {}, //发起人
			examine: [],
			method: 0, //审批方式
			isIconStutas: 2,
			id: 2,
			result: 1, //审核结果 1审核中 2审核不通过 3审核通过
		},
	];
	datas.timelineList = JSON.parse(JSON.stringify(arr));
};
const getDetals = () => {
	if ($route.query.id) {
		initDetails();
		datas.loading = true;
		$http
			.get(approvalFlowTrackingGet + `${$route.query.id}`)
			.then((res) => {
				if (res.status === 200) {
					const uniqueArray = res.data.details.reduce(
						(accumulator, current) => {
							const duplicateIndex = accumulator.findIndex(
								(item) => {
									//去重
									if (
										item.approverName ===
											current.approverName &&
										item.approvalWayType ===
											current.approvalWayType &&
										item.approverId ===
											current.approverId &&
										item.wayId === current.wayId &&
										item.trackId === current.trackId
									) {
										return item;
									}
								}
							);
							if (duplicateIndex === -1) {
								accumulator.push(current);
							}
							return accumulator;
						},
						[]
					);
					res.data.details = uniqueArray;
					//发起人时间
					let date = res.data.sendDate
						? formatDate(new Date(res.data.sendDate), false)
						: '';
					//发起人
					let Originators = {
						name: res.data.sendName,
						date: date,
					};
					datas.timelineList[0].Originators = Originators;
					//备注说明
					datas.timelineList[0].Originators.remark = res.data.remark;
					//数据初始化
					initData(res.data);
				}
			})
			.finally(() => {
				datas.loading = false;
			});
	}
};
getDetals();
const handleClick = (item) => {
	if (item.type === 'refresh') {
		getDetals();
	} else {
		$router.go(-1);
	}
};
</script>

<style lang="scss" scoped>
@import '../index.scss';
.follow_box {
	width: 934px;
	margin: 0 auto;
	// background: #000;
}
.refreshBtn {
	border-radius: 4px;
	background: rgba(65, 120, 213, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 76px;
	height: 30px;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}
.outBtn {
	font-size: 12px;
	width: 76px;
	height: 30px;
	opacity: 1;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(220, 223, 230, 1);
	margin-left: 8px;
	cursor: pointer;
}
.refreshBtn:hover {
	opacity: 0.65;
}
.outBtn:hover {
	opacity: 0.65;
}
.btn_box {
	display: flex;
	margin-bottom: 16px;
	margin-top: 16px;
}
.main {
	background: #fff;
	width: 936px;
	height: 811px;
	overflow-y: auto;
}
</style>
