<template>
	<view class="page">
		<u-navbar title="审核管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<!-- <view class="" style="background: #FFFFFF;width: 750rpx;padding-bottom: 36rpx;">
			<view class="top_box" style="margin-top: 20rpx;">
				<view class="sear_ipt">
					<input type="text" v-model="sn" placeholder="请输入SN码" class="input" placeholder-style="color:#C7CDD3"
						@input="search()">
				</view>
			</view>
		</view> -->
		<scroll-view class="cont" @scrolltolower="handleScrollToLower" scroll-y>
			<view class="card" v-for="(item,index) in list " :key="index">
				<view class="top">
					<view class="phone">车辆编号：{{item.vehicleCode}}</view>
					<view class="type" v-if="item.appealStatus==1">待处理</view>
					<view class="type" v-if="item.appealStatus==0" style="background-color: #ccc;color: #000;">已驳回</view>
					<view class="type" v-if="item.appealStatus==2" style="background-color: #77B8FD;color: #fff;">维修中</view>
					<view class="type" v-if="item.appealStatus==3" style="background-color: #64B6A8;color: #fff;">已完成</view>
				</view>
				<view class="txt"> {{item.faultDetail == null ? '--' : item.faultDetail}}</view>
				<view class="pic_cont">
					<view class="img" v-for="(pic, idx) in parsePictures(item.picture)" :key="idx"
						@click="preview(pic, item)">
						<image style="border-radius: 20rpx;" :src="pic" mode="aspectFill"></image>
					</view>
				</view>
				<view class="info_cont">
					<view class="sn">
						车牌号:{{item.vehicleNum == null ? '--' : item.vehicleNum}}
					</view>
					<view class="time">
						提交时间：{{item.createTime}}
					</view>
				</view>
				<view class="btn_cont">
					<view class="btn1" v-if="item.appealStatus==1" @click="unpass(item,1)">
						处理
					</view>
					<view class="btn1" v-if="item.appealStatus==2" @click="btnwc(item)">
                        维修完成
					</view>
					<view class="btn2" v-if="item.appealStatus==1" @click="unpass(item,0)">
						忽略
					</view>
				</view>
				<!-- <view class="tips" @click="todetail()">
					该车故障记录>
				</view> -->
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				当前没有更多申报审核咯...
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: '#fff'
				},
				sn: '',
				pageNum: 1, // 当前页码
				pageSize: 20, // 每页显示条数
				list: [] ,// 数据列表
				total:''
			};
		},
		onShow() {
			this.pageNum = 1
			this.getlist();
		},
		onReachBottom() {
			// 当页面滚动到底部时，触发加载更多
			// this.loadMore();
		},
		methods: {
			handleScrollToLower() {
				console.log(this.total,this.list.length);
			   if(this.total > this.list.length){
				  this.getlist()
			   }
			},
			// 点击完成
			btnwc(item){
				let data = {
					id:item.id,
					pass:true
				}
				this.$u.put('/bst/fault/complete', data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
						this.pageNum = 1;
						this.list = []; // 清空当前列表
						this.getlist();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
            // 点击处理和忽略
			unpass(item,num){
				let passflag = ''
				if(num == 0){
					passflag = false
				}else if(num == 1){
					passflag = true
				}
				uni.showLoading({
					title:'加载中...'
				})
				let data = {
					id:item.id,
					pass:passflag
				}
				this.$u.put('/bst/fault/handle', data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
						this.pageNum = 1;
						this.list = []; // 清空当前列表
						this.getlist();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			parsePictures(pictureString) {
				if (pictureString) {
					return pictureString.split(',')
				}
				return [];
			},
			preview(pic, item) {
				uni.previewImage({
					current: pic, // 当前显示图片的链接
					urls: this.parsePictures(item.picture) // 需要预览的图片链接列表
				})
			},
			getlist() {
				let data = {
					sn: this.sn,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				};
				this.$u.get(`/bst/fault/list?pageNum=${this.pageNum}&pageSize=10`).then((res) => {
					if (res.code === 200) {
						this.total = res.total
						if(this.pageNum == 1){
							this.list = res.rows
						}else{
							this.list = this.list.concat(res.rows)
						}
						this.pageNum ++
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				})
			},
			loadMore() {
				this.pageNum += 1 // 页码增加
				this.getlist() // 调用getlist方法获取更多数据
			},
			search() {
				clearTimeout(timerId1);
				timerId1 = setTimeout(() => {
					// 搜索时重置页码并重新获取数据
					this.pageNum = 1
					this.list = [] // 清空当前列表
					this.getlist()
				}, 500)
			
			},
			todetail() {
				uni.navigateTo({
					url: '/pages_adminSet/shDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 750rpx;
	}
	.top_box {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		padding: 28rpx 30rpx;
		margin: 0 auto;
		width: 672rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 10rpx;
	}
	.cont {
		width: 100%;
		height: 88vh;
	}
	.card {
		padding: 24rpx;
		margin: 20rpx auto;
		width: 672rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 10rpx;
		.btn_cont {
			display: flex;
			flex-wrap: nowrap;
			justify-content: flex-end;
			/* 添加此行使按钮靠右对齐 */
			.btn1 {
				margin-right: 30rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FEFFFE;
				padding: 6rpx 36rpx;
				background: #64B6A8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
			.btn2 {
				font-weight: 400;
				font-size: 32rpx;
				color: #64B6A8;
				padding: 6rpx 36rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #64B6A8;
			}
		}
		.tips {
			margin-top: 24rpx;
			width: 100%;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
		}
		.info_cont {
			margin-top: 22rpx;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: space-between;
			.sn {
				font-weight: 400;
				font-size: 32rpx;
				color: #979797;
			}
			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #979797;
			}
		}
		.txt {
			margin-top: 24rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;
		}
		.pic_cont {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			.img {
				margin-top: 10rpx;
				background: #D8D8D8;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
			}
		}
	}
	.top {
		border-bottom: 1rpx solid #D8D8D8;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		.name {
			width: 100rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;
		}
		.phone {
			font-weight: 400;
			font-size: 32rpx;
			color: #979797;
		}
		.type {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 130rpx;
			height: 48rpx;
			background: #FFEEEE;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FF4444;
		}
	}
</style>