<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>
		<view class="cont">
			<view class="card" v-for="(item,index) in list " :key="index">
				<view class="top">
					<!-- <view class="name">张某某</view> -->
					<view class="phone">{{item.userName}}</view>
					<view class="type" v-if="item.status==1">待处理</view>
					<view class="type" v-if="item.status==0" style="background-color: #ccc;color: #000;">已驳回</view>
				</view>
				<view class="txt"> <span v-if="item.typeStr">【{{item.typeStr}}】 </span> {{item.detail}}</view>
				<view class="pic_cont">
					<view class="img" v-for="item in 3" :key="item">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/ugvqmfB3QYujZ6SnfTia" mode=""></image>
					</view>
				</view>
				<view class="info_cont">
					<view class="sn">
						SN:134531
					</view>
					<view class="time">
						提交时间：02-11 15:06:45
					</view>
				</view>
				<view class="btn_cont">
					<view class="btn1">
						生成工单
					</view>
					<view class="btn1">
						已生成工单
					</view>
					<view class="btn2">
						忽略
					</view>
				</view>
				<view class="tips" @click="todetail()">
					该车故障记录>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: '#fff'
      },
      sn: '',
      pageNum: 1, // 当前页码
      pageSize: 20, // 每页显示条数
      list: [] // 数据列表
    };
  },
  onShow() {
    this.getlist();
  },
  onReachBottom() {
    // 当页面滚动到底部时，触发加载更多
    this.loadMore();
  },
  methods: {
    getlist() {
      let data = {
        sn: this.sn,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      this.$u.get('/appVerify/fault/list?', data).then((res) => {
        if (res.code === 200) {
          this.list = [...this.list, ...res.rows]; // 拼接新数据
        } 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() {
      // 搜索时重置页码并重新获取数据
      this.pageNum = 1;
      this.list = []; // 清空当前列表
      this.getlist();
    },
    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%;
	}

	.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%;
			// display: flex;
			// justify-content: center;
			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: 256rpx;
				height: 134rpx;
			}

		}
	}

	.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 {
			margin-left: 38rpx;
			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>