<template>
	<ul class="timeline-wrapper">
		<li class="timeline-item" v-for="t in props.timelineList" :key="t.id">
			<div
				style="padding-bottom: 38px; margin-bottom: 8px"
				v-if="t.isAdd"
			>
				<!-- 编辑审批流的新增按钮 -->
				<div class="add" @click="handleBtnClick">
					<i class="el-icon-plus" style="margin-right: 2px" /><span
						>添加审批方式</span
					>
				</div>

				<div class="timeline-box">
					<div
						:class="t.isLine ? 'long-line' : 'long-line1'"
						style="height: 30px"
					></div>
				</div>
			</div>

			<div class="timeline-box">
				<div :class="t.isLine ? 'out-circle' : 'out-circle1'">
					<div class="in-circle"></div>
				</div>
				<!-- 控制结束不要显示线 -->
				<div
					:class="t.isLine ? 'long-line' : 'long-line1'"
					v-if="t.title !== '结束'"
				></div>
			</div>
			<div class="timeline-content">
				<div>
					<!-- 标题 -->
					<div
						class="timeline-title"
						:style="{
							marginBottom: t.text ? '8px' : '16px',
						}"
					>
						{{ t.title }}
					</div>
					<!-- 新增审批流 -->
					<div class="timeline-newTxet" v-if="t.text">
						<div class="text">
							<div v-if="JSON.stringify(t.method) == '{}'">
								{{ t.text }}
							</div>
							<div
								class="timeline-method"
								v-if="
									JSON.stringify(t.method) !== '{}' &&
									t.isShowM
								"
							>
								<div class="timeline-method-item">
									<div>
										<span
											style="color: rgba(92, 92, 92, 1)"
										>
											审批人 :
										</span>
										<span
											style="color: rgba(31, 31, 31, 1)"
											>{{ t.method.name }}</span
										>
									</div>
									<div style="margin-top: 8px">
										<span
											style="color: rgba(92, 92, 92, 1)"
										>
											审批方式 :
										</span>
										<span
											style="color: rgba(31, 31, 31, 1)"
											>{{ t.method.status }}</span
										>
									</div>
								</div>
							</div>

							<!-- <div
								:class="status !== 'a' ? 'add_allowed' : 'add'"
								v-if="t.isNewAdd"
								style="margin-top: 13px"
								@click="handleBtnClick(t)"
							>
								<i
									class="el-icon-plus"
									style="margin-right: 2px"
								/><span>添加审批方式</span>
							</div> -->
						</div>

						<div
							:class="
								status !== 'a' && status !== 'd'
									? 'content_allowed'
									: 'content'
							"
							v-if="t.setName"
							@click="handleClick(t)"
						>
							<span>
								<!-- 123232323 -->
								{{ t.setName }}
							</span>
							<i
								class="el-icon-arrow-right"
								style="margin-right: 6px"
							/>
						</div>
					</div>
					<!-- 审批流适用范围 -->
					<div class="timeline-desc" style="margin-top: 12px">
						<!-- :class="status !== 'a' ? 'add_allowed' : 'add'" -->
						<template v-if="Array.isArray(t.content)">
							<div class="timeline-desc-item-box">
								<div
									class="timeline-desc-item"
									v-for="item in t.content"
								>
									{{ item }}
								</div>
							</div>
						</template>
					</div>
					<!--单据触发审批的条件  -->
					<div class="timeline-status">
						<div>
							<template v-if="Array.isArray(t.statuss)">
								<div class="timeline-status-item-box">
									<div
										class="timeline-status-item"
										v-for="item in t.statuss"
									>
										<span>{{ item.name }}</span>
										<span
											style="
												color: rgba(31, 31, 31, 1);
												margin-left: 5px;
											"
											>{{ item.status }}</span
										>
									</div>
								</div>
							</template>
						</div>
					</div>
					<!-- 审批 -->
					<div
						class="timeline-method"
						v-if="JSON.stringify(t.method) !== '{}' && !t.isShowM"
					>
						<div class="timeline-method-item">
							<div>
								<span style="color: rgba(92, 92, 92, 1)">
									审批人 :
								</span>
								<span style="color: rgba(31, 31, 31, 1)">{{
									t.method.name
								}}</span>
							</div>
							<div style="margin-top: 8px">
								<span style="color: rgba(92, 92, 92, 1)">
									审批方式 :
								</span>
								<span style="color: rgba(31, 31, 31, 1)">{{
									t.method.status
								}}</span>
							</div>
						</div>
					</div>
				</div>

				<div class="rTitle" v-if="t.rTitle && t.title !== '结束'">
					<!-- 占位符 -->
					<div
						:class="
							status === 'a' || status === 'd'
								? 'rTitle-box'
								: 'rTitle_box_allowed'
						"
						@click="handleClick(t)"
					>
						<span style="margin-right: 18px">{{ t.rTitle }}</span>
						<img src="/src/assets/edit.png" alt="" />
					</div>
					<div
						v-if="t.isDelete"
						:class="
							status === 'a' || status === 'd'
								? 'delete'
								: 'delete_allowed'
						"
						@click="handleDelete(t)"
					>
						<img src="/src/assets/delete.png" alt="" />
					</div>
				</div>
			</div>
		</li>
	</ul>
</template>

<script setup>
import { toRefs } from 'vue';
const props = defineProps({
	timelineList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	handleClick: Function, //设置审批流方式按钮
	handleBtnClick: Function, //添加审批方式按钮
	handleDelete: Function, //删除审批方式
	status: {
		type: String,
	},
});

const emits = defineEmits(['handleClick', 'handleBtnClick', 'handleDelete']);
const handleClick = (t) => {
	emits('handleClick', t);
};
const handleBtnClick = (t) => {
	emits('handleBtnClick', t);
};
const handleDelete = (t) => {
	emits('handleDelete', t);
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
