<template>
	<view class="pages">
		<view class="top">
				<text class="title">审批流程</text>
				<text class="state" v-if="isFinish!=''">- 已办结</text>
		</view>
	

		<view v-for="(item,index) in dataList" class="newslist">

			<view class="item">

				<view class="item-top">

					<text class="item-top-taskName">{{item.taskName}}</text>
					<text class="item-top-taskstate" v-if="item.comment.type ==''">审批中</text>
				</view>

				<view class="item-bom">

					<view class="item-bom-view1"
						:class="{'item-bom-view2':item.comment.type =='','item-bom-view3':item.comment.type =='0'}">
					</view>

					<view class="item-bom-one" v-if="item.taskUserInfos.length==1">

						<view class="item-bom-one-lay">
							<view class="item-bom-one-lay-img">

								<image class="item-bom-one-lay-img-header"
									src='https://supervise.yxtsoft.com/img/user/userImage.png'></image>

								<image class="item-bom-one-lay-img-state" v-if="item.comment.type=='0'"
									src='/static/baseIcon/fqw.png'></image>

								<image class="item-bom-one-lay-img-state" v-if="item.comment.type=='1'"
									src='/static/baseIcon/ty.png'></image>

								<image class="item-bom-one-lay-img-state" v-if="item.comment.type=='6'"
									src='/static/baseIcon/jj.png'></image>

								<image class="item-bom-one-lay-img-state" v-if="item.comment.type==''"
									src='/static/baseIcon/spz.png'></image>

							</view>

							<view class="item-bom-one-lay-right">

								<view class="item-bom-one-lay-right-top">
									<text
										class="item-bom-one-lay-right-top-name">{{item.taskUserInfos[0].assigneeName}}</text>
									<text class="item-bom-one-lay-right-top-time"
										v-show="item.finishTime!=null">{{item.finishTime}}</text>
								</view>

								<text class="item-bom-one-lay-right-top-state" v-if="item.comment.type=='0'">发起申请</text>
								<text class="item-bom-one-lay-right-top-state" v-if="item.comment.type=='1'">已同意</text>
								<text class="item-bom-one-lay-right-top-state" v-if="item.comment.type=='6'">已拒绝</text>

							</view>

						</view>

						<view class="item-bom-one-opinion" v-if="item.comment.comment!=''">

							<text>审批意见：</text>
							<text>{{item.comment.comment}}</text>

						</view>


					</view>

					<scroll-view class="item-bom-list" scroll-x="true" @scroll="scroll"
						v-if="item.taskUserInfos.length>1">

						<view style="display: flex;flex-direction: row; margin-right: 20px;">

							<view v-for="(info,pos) in item.taskUserInfos" class="item-bom-list-newslist">

								<view class="item-bom-list-newslist-item">

									<view class="item-bom-list-newslist-item-img">

										<image class="item-bom-list-newslist-item-img-header"
											src='https://supervise.yxtsoft.com/img/user/userImage.png'></image>

										<image class="item-bom-list-newslist-item-img-state"
											src='../../static/baseIcon/spz.png'></image>

									</view>

									<text class="item-bom-list-newslist-item-name">{{info.assigneeName}}</text>

								</view>

							</view>
						</view>
					</scroll-view>


				</view>



			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: "ProcessRecords",
		props: {
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			procInsId: {
				type: String,
				default: ""
			},
			deployId: {
				type: String,
				default: ""
			},
			isFinish:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
		},
	}
</script>

<style lang="scss">
	.pages {
		margin-bottom: 150px;
		display: flex;
		flex-direction: column;
	
	.top{
		display: flex;
		flex-direction: row;
		width: 100%;
			background: #fff;
			align-items: center;
				padding-top: 15px;
		.title {
			
			margin-left: -5px;
			font-size: 18px;
			font-weight: 600;
			font-family: sans-serif;
			color: #000;
		}
		.state{
		
			margin-left: 5px;
			font-size: 15px;
			font-weight: 600;
			font-family: sans-serif;
			color: #848484;
		}
	}

		

		.newslist {
				background: #fff;
			padding-bottom: 10px;
			padding-left: 20px;
			padding-right: 20px;
			width: 100%;
			padding-top: 10px;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				display: flex;
				flex-direction: column;

				.item-top {
					display: flex;
					flex-direction: row;
					align-items: center;

					.item-top-taskName {
						font-size: 16px;
						font-weight: 600;
						font-family: sans-serif;
						color: #000;
					}

					.item-top-taskstate {
						margin-left: 10px;
						font-size: 15px;
						color: #848484;
					}
				}

				.item-bom {
					margin-left: 5px;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10px;
					margin-right: 20px;

					.item-bom-view1 {
						width: 2px;
						height: 100%;
						margin-right: 5px;
						background: #1684FC;
					}

					.item-bom-view2 {
						margin-right: 5px;
						width: 2px;
						height: 100%;
						background: #ccc;
					}

					.item-bom-view3 {
						margin-right: 5px;
						width: 2px;
						height: 100%;
						background: none
					}


					.item-bom-one {
						width: 100%;
						margin: 10px;
						display: flex;
						flex-direction: column;
						margin-right: 30px;

						.item-bom-one-lay {
							display: flex;
							flex-direction: row;
							align-items: center;

							.item-bom-one-lay-img {
								width: 50px;
								height: 50px;

								.item-bom-one-lay-img-header {
									width: 40px;
									height: 40px;
									border-radius: 10px;
								}

								.item-bom-one-lay-img-state {
									width: 15px;
									height: 15px;
									z-index: 1000;
									position: relative;
									top: -15px;
									right: -28px;
								}
							}


							.item-bom-one-lay-right {
								flex: 1;
								margin-left: 5px;
								margin-top: -10px;
								display: flex;
								flex-direction: column;

								.item-bom-one-lay-right-top {
									display: flex;
									flex-direction: row;
									align-items: center;

									.item-bom-one-lay-right-top-name {
										flex: 1;
										font-size: 14px;
										color: #232323;
									}

									.item-bom-one-lay-right-top-time {
										font-size: 12px;
										color: #999999;

									}
								}

								.item-bom-one-lay-right-top-state {
									margin-top: 5px;
									font-size: 12px;
									color: #666666;
								}
							}
						}

						.item-bom-one-opinion {
							font-size: 13px;
							color: #666666;
						}

					}


					.item-bom-list {
						width: 90%;

						.item-bom-list-newslist {
							display: flex;
							flex-direction: row;

							.item-bom-list-newslist-item {
								display: flex;
								margin: 10px;
								flex-direction: column;
								justify-content: center;

								.item-bom-list-newslist-item-img {
									width: 50px;
									height: 50px;

									.item-bom-list-newslist-item-img-header {
										width: 40px;
										height: 40px;
										border-radius: 10px;

									}

									.item-bom-list-newslist-item-img-state {
										width: 15px;
										height: 15px;
										z-index: 1000;
										position: relative;
										top: -15px;
										right: -28px;
									}
								}

								.item-bom-list-newslist-item-name {
									text-align: center;
									margin-left: -8px;
									font-size: 14px;
									color: #232323;
								}
							}
						}
					}
				}
			}
		}
	}
</style>