<template>
	<view class="contentStyle">
		<view class="content-wrap">
			<!-- 时间选择器 -->
			<view class="timebox">
				<view class="daybox flex ">
					<uni-datetime-picker type="date" :clear-icon="false" @change="handleChangeTime" v-model="datetime">
						<view class="inner-date-box">
							<view class="day">{{ showDate }}</view>
							<view class="searchiconbox">
								<view class="arrow"> </view>
								<view class="arrow1"> </view>
							</view>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<!-- 巡检列表 -->
			<view  class="scroll-view">
				<view class="list-container" v-if="listData.length > 0">
					<view class="card-item" v-for="(item, index) in listData" :key="index" @click="goToInspectionDetail(item)">
						<view class="card-head">
							<text class="address">{{ item.locationName }}</text>
							<text class="status">{{ item.status }}</text>
						</view>
						<view class="tag-label">{{ item.inspectionType }}</view>
						<view class="text-row">巡检时间：{{ item.taskTime }}</view>
						<view class="text-row">巡检人：{{ item.inspectorName }}</view>
					</view>
				</view>
				<!-- 暂无数据 -->
				<view class="empty-wrap" v-if="!loading && listData.length === 0">
					<uni-icons type="info" size="30" color="#ccc"></uni-icons>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad,onReachBottom,onPullDownRefresh,onBackPress} from '@dcloudio/uni-app'
	import {getInspectionList} from '../api/apiSub.js'
	import moment from 'moment'  // 新增

	// ---------- 基础状态 ----------
	const datetime = ref('')
	const showDate = ref('选择日期')
	const listData = ref([])
	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)

	// ---------- 分页状态 ----------
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const loading = ref(false)
	const noMore = ref(false)

	// ---------- 初始化 ----------
	onLoad(() => {
		// 使用 moment 格式化今天
		const today = moment().format('YYYY-MM-DD')
		datetime.value = today
		showDate.value = moment().format('MM-DD')  // 显示 MM-DD
		fetchList(true)
	})

	// ---------- 获取列表 ----------
	const fetchList = async (reset = false) => {
		if (loading.value) return
		if (!reset && noMore.value) return

		loading.value = true
		try {
			const params = {
				date: datetime.value,          // 已经是 YYYY-MM-DD
				pageNum: reset ? 1 : pageNum.value,
				pageSize: pageSize.value
			}
			const res = await getInspectionList(params)
			if (res.code === 200) {
				const rows = res.rows
				total.value = res.total || 0
				if (reset) {
					listData.value = rows
					pageNum.value = 1
					noMore.value = rows.length < pageSize.value
				} else {
					listData.value = [...listData.value, ...rows]
					noMore.value = rows.length < pageSize.value || listData.value.length >= total.value
				}
				if (!reset && rows.length > 0) {
					pageNum.value += 1
				}
			} else {
				uni.showToast({ title: res.msg || '获取列表失败', icon: 'none' })
			}
		} catch (err) {
			console.error('获取巡检列表失败', err)
			uni.showToast({ title: '网络异常，请重试', icon: 'none' })
		} finally {
			loading.value = false
			uni.stopPullDownRefresh()
		}
	}

	// ---------- 日期变更（使用 moment） ----------
	const handleChangeTime = (e) => {
		if (e) {
			showDate.value = moment(e).format('MM-DD')
			datetime.value = e
		} else {
			showDate.value = '选择日期'
			datetime.value = ''
		}
		// 重置分页并刷新
		pageNum.value = 1
		noMore.value = false
		fetchList(true)
	}

	// ---------- 上拉加载更多 ----------
	onReachBottom(() => {
		if (!noMore.value && !loading.value) {
			fetchList(false)
		}
	})

	// ---------- 下拉刷新 ----------
	onPullDownRefresh(() => {
		pageNum.value = 1
		noMore.value = false
		fetchList(true)
	})

	// ---------- 页面返回拦截 ----------
	onBackPress(() => {
		const pages = getCurrentPages()
		if (pages.length > 1) {
			return false
		}
		uni.switchTab({ url: '/pages/serviceIndex/serviceIndex' })
		return true
	})

	// ---------- 跳转详情 ----------
	const goToInspectionDetail = (item) => {
		uni.navigateTo({
			url: `/pageSubPack/inspection-revenue/inspection-details?id=${item.id}&date=${datetime.value}`
		})
	}
</script>

<style lang="scss" scoped>
	.contentStyle {
		// display: flex;
		// flex-direction: column;
		min-height: 100vh;
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}

	.content-wrap {
		flex: 1;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.timebox {
		width: 188rpx;
		height: 48rpx;
		background: #ffffff;
		border-radius: 24rpx;
		text-align: center;
		line-height: 48rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;

		.daybox {
			height: 100%;
			box-sizing: border-box;
			position: relative;

			.inner-date-box {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
			}

			.day {
				flex: 1;
				font-size: 28rpx;
				text-align: left;
				padding-left: 15rpx;
			}

			.searchiconbox {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 38rpx;
				height: 48rpx;
				padding-right: 10rpx;
				flex-shrink: 0;
				margin-left: auto;

				.arrow,
				.arrow1 {
					border: 1rpx solid #ccc;
					width: 8rpx;
					height: 8rpx;
				}

				.arrow {
					border-right-color: transparent;
					border-top-color: transparent;
					transform: rotateZ(135deg);
				}

				.arrow1 {
					border-left-color: transparent;
					border-bottom-color: transparent;
					transform: rotateZ(135deg);
				}
			}
		}
	}
	//滚动容器 App重点：高度自适应 \*/
	// .scroll-view {
	//   flex: 1;
	//   height: 0;
	// }
	.list-container {
	  display: flex;
	  flex-direction: column;
	  gap: 24rpx;
	}
	
	//卡片 \*/
	.card-item {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 32rpx;
	}
	.card-head {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	  margin-bottom: 20rpx;
	}
	.address {
	  font-size: 32rpx;
	  color: #222;
	  font-weight: 500;
	}
	.status {
	  font-size: 24rpx;
	  color: #666;
	}
	
	// 标签 蓝色边框 \*/
	.tag-label {
	  display: inline-block;
	  border: 2rpx solid #2F77FD;
	  color: #222;
	  padding: 6rpx 16rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	  margin-bottom: 20rpx;
	}
	
	.text-row {
	  font-size: 28rpx;
	  color: #333;
	  line-height: 2;
	}

	// 暂无数据
	.empty-wrap {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding-top: 200rpx;
	}
	.empty-img {
	  width: 240rpx;
	  height: 240rpx;
	}
	.empty-text {
	  font-size: 28rpx;
	  color: #999;
	  margin-top: 20rpx;
	}
</style>