<template>
	<view class="content">
		<!-- <view class="handleTop">
			<view class="handleTop-label">
				<view class="handleTop-number">1</view>
				<view class="handleTop-text">提交成功</view>
			</view>
			<view class="handleTop-label handleTop-label-active">
				<view class="handleTop-number-active"></view>
				<view class="handleTop-text-active">办理中</view>
			</view>
			<view class="handleTop-label">
				<view class="handleTop-number">3</view>
				<view class="handleTop-text">办理完成</view>
			</view>
		</view>
		<view class="pack-white">
			<view class="pack-cont">
				<img class="process-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/9842796ec26fb480ac17b471619a88dd.png">
				<view class="process-text">
					<view class="process-name">
						正在办理中...
					</view>
					<view class="process-tips">
						请您耐心等待,我们会尽快进行办理
					</view>
				</view>
				<view class="process-btn">
					<view class="btn" @click="clickBack">
						知道了
					</view>
				</view>
			</view>
		</view> -->
		
		<!-- 列表 -->
		<view class="list" v-if="logsArr.length > 0">
			<view class="item" v-for="(items, index) in logsArr" :key="index">
				<view class="itemName" v-if="items.operate">
					{{items.operate.name}}
					<view class="itemName-tips">
						{{items.operate.type}}
					</view>
				</view>
				<view class="itemLabel">
					<view class="label">
						<view class="label-name">
							所属机构
						</view>
						<view class="label-text">
							{{items.item}}
						</view>
					</view>
					<view class="label">
						<view class="label-name">
							备注信息
						</view>
						<view class="label-text">
							{{items.description}}
						</view>
					</view>
					<view class="label">
						<view class="label-name">
							操作时间
						</view>
						<view class="label-text">
							{{items.do_at}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="pagesLoding" v-if="lodingStats">
			    <block v-if="page.has_more">
			        <image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
			    </block>
			    <block v-else>
			        没有更多了~
			    </block>
			</view>
		</view>
		
		<view class="pack-center pages-hint" v-else>
		    <image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/7ad417d0c215db601b8e1bead05c3a5e.png"></image>
		    <view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import { doLogs } from '@/apis/interfaces/user'
	export default {
		data() {
			return {
				logsArr		 : [],
				page         : {},     // 分页信息
				lodingStats  : false,  // 加载状态
			}
		},
		onShow() {
			// 获取列表信息
			this.logsInfo();
		},
		methods: {
			// 返回上一页
			// clickBack() {
			// 	uni.navigateBack(1)
			// }
			
			// 列表信息
			logsInfo(page) {
				doLogs(this.$Route.query.id, {
					page  : page || 1
				}).then(res => {
					let esArr = res.data
					let list = this.logsArr,
					    newData = []
					    if(page == 1 || page == undefined) list = []
					    newData = list.concat(esArr)
					this.logsArr    = newData
					this.page        = res.page
					this.lodingStats = false
					uni.stopPullDownRefresh()
					
				}).catch( err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取列表信息
			    this.logsInfo();
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
					// 获取列表信息
					this.logsInfo(pageNumber);
			    }
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .content {
	// 	background-image: linear-gradient(to top, #f5f6f7, #e5f2ff);
	// 	padding: $padding * 3 0 $padding;
	// 	box-sizing: border-box;
	// 	height: 100vh;
	// 	overflow-y: scroll;
	// }
	
	.content {
		background-color: #f4f6f7;
	}
	
	.list {
		padding: $padding;
		box-sizing: border-box;
		.item {
			padding: $padding;
			box-sizing: border-box;
			border-radius: $radius;
			background-color: #ffffff;
			margin-bottom: $margin;
			.itemName {
				display: flex;
				font-weight: 600;
				.itemName-tips {
					font-weight: normal;
					font-size: $title-size-sm - 2;
					background-color: #da2b56;
					color: #ffffff;
					border-radius: 8rpx;
					line-height: 40rpx;
					padding: 0 10rpx;
					margin-left: $margin - 10;
				}
			}
			.itemLabel {
				border-top: 2rpx solid #f4f6f7;
				padding-top: $padding - 10;
				margin-top: $padding;
				.label {
					color: #8b8b8b;
					font-size: $title-size-m;
					display: flex;
					line-height: 46rpx;
					padding: 10rpx 0;
					.label-name {
						flex: 1;
					}
					.label-text {
						width: 70%;
						text-align: right;
					}
				}
			}
		}
	}
	.handleTop {
		display: flex;
		.handleTop-label {
			text-align: center;
			flex: 3;
			.handleTop-number {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				border-radius: 50%;
				background-color: #7a88a1;
				border: 15rpx solid #7a88a1;
				text-align: center;
				color: #ffffff;
				margin: 5rpx auto 20rpx;
				font-size: $title-size-m;
			}
			.handleTop-text {
				font-size: $title-size-lg;
				color: #6b7894;
				margin-top: 30rpx;
			}
		}
		.handleTop-label-active {
			position: relative;
			&::after,
			&::before {
				position: absolute;
				content: '';
				top: calc(25% - 5rpx);
				background-color: #d5e4f8;
				width: 50%;
				height: 10rpx;
				border-radius: $radius;
			}
			&::after {
				left: -25%;
			}
			&::before {
				right: -25%;
			}
			.handleTop-number-active {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				border-radius: 50%;
				background-color: $mian-color;
				border: 20rpx solid #ffe8e5;
				text-align: center;
				color: #ffffff;
				margin: 0 auto 20rpx;
			}
			.handleTop-text-active {
				font-size: $title-size-lg;
				color: #25345a;
				font-weight: 600;
			}
		}
	}
	
	.pack-white {
		padding: $padding;
		box-sizing: border-box;
		margin-top: $margin * 2;
		.pack-cont {
			background-color: #ffffff;
			border-radius: $radius;
			overflow: hidden;
			padding: $padding * 3;
			box-sizing: border-box;
			text-align: center;
			.process-img {
				width: 80%;
				margin: 0 auto;
			}
			.process-name {
				color: $mian-color;
				font-size: $title-size + 8;
				margin-bottom: $margin;
			}
			.process-tips {
				font-size: $title-size;
				color: #99a5b4;
			}
		}
	}
	
	.process-btn {
		text-align: center;
		margin-top: $margin * 2;
		width: 100%;
		.btn {
			display: inline-block;
			border: 2rpx solid $mian-color;
			color: $mian-color;
			border-radius: $radius-m;
			width: 100%;
			line-height: 90rpx;
		}
	}
</style>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       