<template>
	<div>
		<el-timeline class="time-line">
			<el-timeline-item v-for="(item, index) in props.data" :key="index" :type="item.type" size="large" hollow hide-timestamp>
				<!-- 左侧展示 -->
				<div class="leftcontainer" v-if="!item.parentId">
					<div class="flex">
						<div class="leftcontainer-inner" :title="item.name" :style="'background-color:var(--el-color-' + item.type + ')'">
							{{ item.name }}
						</div>
						<div class="right-triangle" :style="'border-left:20px solid var(--el-color-' + item.type + ')'"></div>
					</div>
				</div>
				<!-- 右侧 -->
				<div class="rightcontainer" v-else>
					<div class="flex">
						<div class="left-triangle" :style="'border-right:20px solid var(--el-color-' + item.type + ')'"></div>
						<div class="rightcontainer-inner" :title="item.name" :style="'background-color:var(--el-color-' + item.type + ')'">
							{{ item.name }}
						</div>
					</div>
				</div>
				<!-- 内容 -->
				<el-card class="card">
					<!-- 正常流转 -->
					<div
						class="icon"
						v-if="item.status == 1"
						style="color: var(--el-color-primary)"
						:style="'background-image:url(' + getImageUrl('order/processNormal.png') + ')'"
					>
						{{ item.statusText }}
					</div>
					<!-- 其他状态 -->
					<div
						class="icon"
						:style="'background-image:url(' + getImageUrl('order/processReturn.png') + ')'"
						style="color: var(--el-color-danger)"
						alt=""
						v-else
					>
						{{ item.statusText }}
					</div>
					<!-- 如果有办理人 展示办理人部门名称 -->
					<el-tag round size="large" class="tag" v-if="item.orgName">
						<span>{{ item.orgName }}</span>
					</el-tag>
					<!-- 没有办理人 展示接班人部门名称-->
					<el-tag round size="large" class="tag" v-else>
						<span>{{ item.acceptOrgName }}</span>
					</el-tag>
					<div class="infos flex mt20">
						<div class="flex1">
							<p class="flex1-title">接办人</p>
							<p class="flex1-inner">{{ item.acceptUserName }}</p>
						</div>
						<div class="flex1">
							<p class="flex1-title">办理人</p>
							<p class="flex1-inner">{{ item.userName }}</p>
						</div>
						<div class="flex1">
							<p class="flex1-title">接办时间</p>
							<p class="flex1-inner">{{ formatDate(item.acceptTime, 'YYYY-mm-dd HH:MM:SS') }}</p>
						</div>
						<div class="flex1">
							<p class="flex1-title">办理时间</p>
							<p class="flex1-inner">{{ formatDate(item.completeTime, 'YYYY-mm-dd HH:MM:SS') }}</p>
						</div>
						<div class="flex1">
							<p class="flex1-title">办理期限</p>
							<p class="flex1-inner">{{ formatDate(item.timeLimit, 'YYYY-mm-dd HH:MM:SS') }}</p>
						</div>
					</div>
					<div class="opinion">
						<span class="opinion-title">意见</span>
						<ExpandText> {{ item.opinion }} </ExpandText>
					</div>
				</el-card>
				<!-- 展开收起 -->
				<div class="pt10">
					<div style="position: absolute; left: -5px" v-if="item.traces && item.traces.length">
						<SvgIcon name="iconfont icon-tianjiawenjian" size="24px" :color="'var(--el-color-' + item.type + ')'" />
					</div>
					<el-button :type="item.type" @click="itemNodeClick(item)" v-if="item.traces && item.traces.length">
						{{ isOpen(item.code) ? '收起' : '展开' }}会签<SvgIcon
							name="ele-DArrowRight"
							class="ml5 collapse-item__arrow"
							style="transition: transform 0.3s,transform: rotate(-90deg)"
							:style="isOpen(item.code) ? 'transform: rotate(90deg)' : 'transform: rotate(-90deg)'"
						/>
					</el-button>
				</div>
				<div v-if="item.traces && item.traces.length" class="item-childen mt20" v-show="isOpen(item.code)">
					<!-- 嵌套组件 -->
					<TimeLine
						:data="item.traces"
						class="sub-time-line"
						:expandedKeys="props.expandedKeys"
						:current="state.curNameId"
						:defaultExpandAll="props.defaultExpandAll"
						@node-click="(e:any)=>emit('node-click', e)"
					/>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script setup lang="ts" name="TimeLine">
import { defineAsyncComponent, computed, reactive, watch, onMounted } from 'vue';
import { getImageUrl } from '/@/utils/tools';
import { formatDate } from '/@/utils/formatTime';
const emit = defineEmits(['node-click']);
const props = defineProps({
	// 数据
	data: {
		type: <any>Array,
		default: [],
	},
	current: Number, //保存当前点击节点的id
	expandedKeys: {
		// 默认展开数组
		type: Array,
		default: <any>[],
	},
	defaultExpandAll: {
		// 展开全部
		type: Boolean,
		default: false,
	},
});
const state = reactive<any>({
	expandedKeys: [], // 当前列表需要展开的节点id组成的数组
	curNameId: 0, //保存current的值
});
const ExpandText = defineAsyncComponent(() => import('/@/components/ExpandText/index.vue'));

const isOpen = computed(() => {
	return (id: string) => {
		// 判断节点id在不在数组中，在则显示，不在则隐藏
		return state.expandedKeys.includes(id);
	};
});
watch(
	() => props.expandedKeys,
	(newVal) => {
		state.expandedKeys = newVal;
	},
	{
		immediate: true,
	}
);
watch(
	() => props.current,
	(val) => {
		state.curNameId = val;
	},
	{
		deep: true,
		immediate: true,
	}
);
// 获取全部可以展开的内容
let arr: any = [];
const getAllKeys = (val: any) => {
	if (!val || !val.length) return [];
	val.forEach((item: any) => {
		if (item.traces?.length) {
			arr.push(item.code);
			getAllKeys(item.traces);
		}
	});
	return arr;
};
// 点击节点
const itemNodeClick = (item: any) => {
	emit('node-click', item);
	if (item.traces && item.traces.length) {
		let index = state.expandedKeys.indexOf(item.code);

		if (index > -1) {
			// 如果当前节点id存在数组中，则删除
			state.expandedKeys.splice(index, 1);
		} else {
			// 如果当前节点id不存在数组中，则添加
			state.expandedKeys.push(item.code);
		}
	}
};
onMounted(() => {
	if (props.defaultExpandAll) {
		state.expandedKeys = getAllKeys(props.data);
	}
});
</script>

<style lang="scss" scoped>
.time-line {
	margin-top: 20px;
	margin-left: 150px;
	.collapse-item__arrow {
		margin: 0 8px 0 auto;
		transition: transform var(--el-transition-duration);
		font-weight: 300;
	}
	//左侧内容
	.leftcontainer {
		position: absolute;
		left: -140px;
		top: -10px;
		&-inner {
			width: 110px;
			padding: 0 10px;
			text-align: center;
			text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
			white-space: nowrap; /*让文字不换行*/
			overflow: hidden; /*超出要隐藏*/
			border-top-left-radius: 18px;
			border-bottom-left-radius: 18px;
			background: var(--el-color-primary);
			height: 36px;
			line-height: 36px;
			color: var(--hotline-color-white);
		}
		.right-triangle {
			width: 0px;
			height: 0px;
			border: 18px solid transparent;
			border-left: 18px solid var(--el-color-primary);
		}
	}
	.card {
		position: relative;
		overflow: initial;
		.tag {
			padding: 10px 20px;
			span {
				font-weight: bold;
				font-size: var(--el-font-size-medium);
			}
		}
		.icon {
			position: absolute;
			right: -10px;
			top: 0;
			width: 95px;
			height: 33px;
			background-size: contain;
			background-repeat: no-repeat;
			text-align: center;
			line-height: 24px;
		}
		.infos {
			.flex1 {
				flex: 1;
				&-title {
					color: var(--hotline-bg-grey-color);
				}
				&-inner {
					margin-top: 10px;
				}
			}
		}
		.opinion {
			display: flex;
			margin-top: 20px;
			&-title {
				color: var(--hotline-bg-grey-color);
				margin-right: 10px;
				display: inline-block;
				width: 40px;
				line-height: 30px;
			}
		}
	}
	.item-childen {
		padding: 20px;
		&:nth-child(even) {
			background-color: var(--hotline-bg-main-color);
		}
		&:nth-child(odd) {
			background-color: var(--hotline-order-CrculationRecord-color);
		}
		border-radius: 10px;
		.sub-time-line {
			.time-line {
				margin: 0;
				.rightcontainer {
					position: absolute;
					left: 4px;
					top: -10px;
					.rightcontainer-inner {
						width: 110px;
						padding: 0 10px;
						text-align: center;
						text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
						white-space: nowrap; /*让文字不换行*/
						overflow: hidden; /*超出要隐藏*/
						border-top-right-radius: 18px;
						border-bottom-right-radius: 18px;
						background: var(--el-color-primary);
						height: 36px;
						line-height: 36px;
						color: var(--hotline-color-white);
					}
					.left-triangle {
						width: 0px;
						height: 0px;
						border: 18px solid transparent;
						border-right: 18px solid var(--el-color-primary);
					}
				}
				.card {
					margin-left: 160px;
				}
			}
		}
		.bottom {
			:deep(.el-timeline-item__timestamp.is-bottom) {
				margin-bottom: 0 !important;
			}
			:deep(.el-timeline-item__timestamp) {
				font-weight: bold;
				font-size: var(--el-font-size-medium);
				color: var(--el-color-primary);
			}
		}
	}
}
// 线颜色
:deep(.el-timeline-item__tail) {
	border-left: 1px solid #bfcdff;
}
</style>
