<template>
	<ul class="timeline-wrapper">
		<li class="timeline-item" v-for="t in props.timelineList" :key="t.id">
			<div class="timeline-box">
				<div class="">
					<!-- 审批通过 -->
					<img
						src="/src/assets/check@3x.png"
						alt=""
						style="
							width: 16px;
							height: 16px;
							box-shadow: 0px 3px 8px 0px rgba(98, 179, 142, 0.1);
						"
						v-if="t.isIconStutas === 1"
					/>
					<!-- 审批不通过 -->

					<div v-else-if="t.isIconStutas !== 1" class="out-circle2">
						<div class="in-circle"></div>
					</div>
				</div>
				<!-- 线 -->
				<div class="long-line1" v-if="!t.result"></div>
			</div>
			<div class="timeline-content">
				<div>
					<!-- 标题 -->
					<div class="timeline-title" v-if="!t.result">
						<span>{{ t.title }}</span>
						<span v-if="t.method" style="margin-left: 5px"
							>({{ METHOD[t.method] }})</span
						>
					</div>
					<!-- 结束的标题 -->
					<div
						style="font-weight: 900; font-size: 14px"
						v-if="t.result"
					>
						<span>{{ t.title }}</span>
						<!-- <span
							v-if="t.result == 2 || t.result == 3"
							style="
								margin-left: 5px;
								color: rgba(153, 153, 153, 1);
								font-size: 12px;
							"
							>审核结束</span
						> -->
					</div>
					<!-- 发起人 -->
					<div
						class="Originator-box"
						v-if="JSON.stringify(t.Originators) !== '{}'"
					>
						<span>发起人 : {{ t.Originators.name }}</span>
						<span class="color92">{{ t.Originators.date }}</span>
					</div>
					<div
						class="Originator-box1"
						v-if="t.Originators.remark"
						style="margin-top: 10px"
					>
						<span>{{ t.Originators.remark }} </span>

						<img
							src="/src/assets/wrong@3x.png"
							alt=""
							style="width: 16px; height: 16px"
						/>

						<!-- <span class="color92">{{ t.Originators.date }}</span> -->
					</div>
					<!-- 审批人 -->
					<div>
						<template
							v-for="(item, index) in t.examine"
							:key="item.name + index"
						>
							<div class="examine-box">
								<!-- 姓名\审核状态 -->
								<div style="display: flex; align-items: center">
									<span :class="COLORS[item.status]"
										>{{ item.name
										}}<span
											style="margin-left: 5px"
											v-if="STATUS[item.status]"
										>
											({{ STATUS[item.status] }})
										</span>
									</span>
								</div>

								<!-- 时间 -->
								<div style="display: flex; align-items: center">
									<span
										class="color92"
										style="margin-left: 56px"
										>{{ item.date }}</span
									>
								</div>

								<!-- 已经说明 -->
								<div style="display: flex; align-items: center">
									<span
										:class="COLORS1[item.status]"
										style="margin-left: 56px; width: 300px"
										>意见说明:
										{{
											item.remack ? item.remack : '--'
										}}</span
									>
								</div>
								<div style="display: flex; align-items: center">
									<span
										class="color92"
										style="margin-left: 56px"
										v-if="item.id && item.status"
									>
										<img
											src="/src/assets/gou@3x.png"
											alt=""
											style="width: 16px; height: 16px"
										/>
									</span>
								</div>
							</div>
						</template>
					</div>
				</div>
			</div>
		</li>
	</ul>
</template>

<script setup>
import { reactive } from 'vue';
const props = defineProps({
	timelineList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const STATUS = {
	1: '审批同意',
	2: '驳回重审',
	3: '终止流程',
	4: '等待审批中',
	5: '',
};
const BG = [
	'',
	'examine-box',
	'examine-box1',
	'examine-box1',
	'examine-box',
	'examine-box',
];
const COLORS = ['', 'color31', 'colorRed1', 'colorRed1', 'color31', 'color31'];
const COLORS1 = ['', 'color92', 'colorRed2', 'colorRed2', 'color92', 'color92'];
const IMGS = [
	'',
	'/src/assets/gou@3x.png',
	'/src/assets/wrong@3x.png',
	'/src/assets/wrong@3x.png',
	'',
	'',
];
const METHOD = ['', '会签', '或签'];
const TITLE = ['', 'title1', 'title2', 'title3'];
console.log(props.timelineList);
</script>

<style scoped lang="scss">
@import './index.scss';
.title1 {
	font-size: 14px;
	color: rgba(92, 92, 92, 1);
}
.title2 {
	font-size: 14px;
	color: rgba(250, 87, 87, 1);
}
.title3 {
	font-size: 14px;
	color: rgba(4, 204, 141, 1);
}
.timeline-wrapper {
	height: 100%;
	line-height: 1 !important;
}
.timeline-item .timeline-content {
	padding-left: 21px;
}

.Originator-box1 {
	min-width: 538px;
	width: fit-content;
	height: auto;
	padding: 10px 16px;
	background: rgba(250, 87, 87, 0.3);
	display: flex;
	border: 1px solid rgba(250, 87, 87, 0.3);
	align-items: center;
	font-size: 12px;
	line-height: 1;
	color: rgba(250, 87, 87, 1);
	border-radius: 4px;
	span {
		flex: 2;
	}
	img {
		// flex: 1;
	}
}

.Originator-box {
	min-width: 238px;
	width: fit-content;
	height: auto;
	padding: 10px 16px;
	background: rgba(242, 243, 245, 1);
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 1;
	border-radius: 4px;
	span {
		flex: 1;
	}
}
.examine-box {
	font-size: 12px;
	width: 790px;
	height: auto;
	padding: 12px 16px;

	border-radius: 4px;
	background: rgba(242, 243, 245, 1);
	display: flex;
	margin-bottom: 4px;
	// span {
	// 	flex: 1;
	// }
}
.out-circle2 {
	width: 16px;
	height: 16px;
	background: rgba(206, 209, 217, 1);
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;

	.in-circle {
		width: 6px;
		height: 6px;
		margin: 0 auto;
		background: #fff;
		border-radius: 50%;
		box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
	}
}
.long-line1 {
	border-left: 1px dashed rgba(206, 209, 217, 1);
	min-height: 98px;
	height: 198px;
	margin-top: 8px;
	margin-left: 7px;
}
.examine-box1 {
	font-size: 12px;
	width: 790px;

	height: auto;
	padding: 12px 16px;
	border-radius: 4px;
	background: rgba(250, 87, 87, 0.06);
	display: flex;
	margin-bottom: 4px;
}
.out-circle {
	background: #fff;
}
.color92 {
	color: rgba(92, 92, 92, 1);
}
.colorRed1 {
	color: rgba(250, 87, 87, 1);
	font-weight: 700;
}
.colorRed2 {
	color: rgba(250, 87, 87, 1);
}
.color31 {
	color: rgba(31, 31, 31, 1);
	font-weight: 700;
}
</style>
