<template>
	<view class="container">
		<!-- 查询条件 -->
		<view class="filter-card">
			<view class="filter-row">
				<view class="filter-item">
					<text class="filter-label">流水类型</text>
					<picker mode="selector" :range="flowTypeOptions" range-key="label" :value="flowTypeIndex" @change="onFlowTypeChange">
						<view class="picker-view">
							{{ flowTypeOptions[flowTypeIndex].label }}
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>
			</view>
			<view class="filter-buttons">
				<view class="filter-btn" @click="search">查询</view>
				<view class="filter-btn reset-btn" @click="reset">重置</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn send-btn" @click="goToSend">
				<text class="btn-text">创建送出记录</text>
			</view>
			<view class="action-btn return-btn" @click="goToReturn">
				<text class="btn-text">创建送回记录</text>
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="list-card">
			<view class="list-header">
				<text class="header-text">毛巾记录</text>
				<text class="total-count">共 {{ totalCount }} 条</text>
			</view>

			<scroll-view scroll-y class="list-content" @scrolltolower="loadMore">
				<view v-for="(item, index) in dataList" :key="index" class="list-item" @click="viewDetail(item)">
					<view class="item-header">
						<view class="flow-type-badge" :class="item.flowType === 0 ? 'send-type' : 'return-type'">
							<text class="flow-type-icon">{{ item.flowType === 0 ? '📤' : '📥' }}</text>
							<text class="flow-type-text">{{ item.flowTypeName || '无' }}</text>
						</view>
						<view class="create-time">{{ formatTime(item.createTime) }}</view>
					</view>
					<view class="item-details">
						<view class="detail-item full-width" >
							<text class="detail-label" style="width: 40px;">批次号:</text>
							<text class="detail-value">{{ item.batchNumber || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">门店:</text>
							<text class="detail-value">{{ item.storeName || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">产品类型:</text>
							<text class="detail-value">{{ item.productType || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">清洗商:</text>
							<text class="detail-value">{{ item.laundrySupplierName || '无' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">数量:</text>
							<text class="detail-value">{{ item.quantity || 0 }}</text>
						</view>
						<view class="detail-item full-width">
							<text class="detail-label">{{ item.flowType === 0 ? '送出时间:' : '送回时间:' }}</text>
							<text class="detail-value">{{ item.flowType === 0 
								? (item.sendTime ? formatTime(item.sendTime) : '无')
								: (item.returnTime ? formatTime(item.returnTime) : '无')
							}}</text>
						</view>
				<!-- 		<view class="detail-item">
							<text class="detail-label">清洗单价:</text>
							<text class="detail-value">¥{{ item.laundryPrice || 0 }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">总费用:</text>
							<text class="detail-value highlight">¥{{ item.totalPrice || 0 }}</text>
						</view> -->
						<view class="detail-item full-width">
							<text class="detail-label">备注:</text>
							<text class="detail-value">{{ item.remark || '无' }}</text>
						</view>
					</view>
					<view class="item-footer">
						<view class="status-badge" :class="item.isEffective === 1 ? 'effective' : 'ineffective'">
							{{ item.isEffective === 1 ? '有效' : '无效' }}
						</view>
						<view class="footer-actions">
							<view class="create-user">创建人: {{ item.createUserName || '无' }}</view>
							<view class="edit-btn" @click.stop="editRecord(item)">
								<text class="edit-text">编辑</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="!loading && dataList.length === 0" class="empty-state">
					<view class="empty-icon">📋</view>
					<view>暂无记录</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading && dataList.length === 0" class="loading">正在加载数据...</view>

				<!-- 加载更多 -->
				<u-loadmore v-if="dataList.length > 0" :status="loadmoreStatus" :load-text="loadText"></u-loadmore>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import laundryFlowApi from '@/apis/modules/laundry-flow.js'

	export default {
		data() {
			return {
				loading: false,
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				totalCount: 0,
				hasMore: true,
				loadmoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				// 查询条件
				query: {
					flowType: undefined
				},
				flowTypeOptions: [
					{ label: '全部', value: undefined },
					{ label: '送出', value: 0 },
					{ label: '送回', value: 1 }
				],
				flowTypeIndex: 0,
                userInfo: uni.getStorageSync('userInfo'),
				newuserInfo: uni.getStorageSync('newuserInfo'),
			}
		},

		onLoad() {
			this.initializePage()
		},

		onShow() {
			// 页面显示时刷新数据（如果从添加页面返回）
			if (this.dataList.length > 0) {
				this.refreshData()
			}
		},

		methods: {
			// 初始化页面
			async initializePage() {
				try {
					await this.checkLoginStatus()
					await this.loadList()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.showErrorState('页面初始化失败，请刷新重试')
				}
			},

			// 检查登录状态
			async checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
			},

			// 加载列表数据
			async loadList() {
				if (this.loading) return

				try {
					this.loading = true

					const params = {
						currentPage: this.currentPage,
						pageSize: this.pageSize
					}

					// 添加查询条件
					if (this.query.flowType !== undefined) {
						params.flowType = this.query.flowType
					}
                    // if (this.userInfo && this.userInfo.userId) {
                    //     params.createUser = this.userInfo.userId
                    // } else {
                    //     params.createUser = '暂无'
                    // }
					
					params.StoreId = this.newuserInfo.mdid || '暂无'
					const res = await laundryFlowApi.getLaundryFlowList(params)

					if (res.code === 200) {
						const data = res.data
						this.totalCount = data.pagination?.total || 0
						const list = data.list || []

						if (this.currentPage === 1) {
							this.dataList = list
						} else {
							this.dataList = [...this.dataList, ...list]
						}

						this.hasMore = list.length === this.pageSize

						if (this.hasMore) {
							this.loadmoreStatus = 'loadmore'
						} else {
							this.loadmoreStatus = 'nomore'
						}
					} else {
						throw new Error(res.message || '获取数据失败')
					}

				} catch (error) {
					console.error('加载列表失败:', error)
					if (this.currentPage === 1) {
						this.showErrorState('加载数据失败，请重试')
					} else {
						this.showMessage('加载更多数据失败', 'error')
					}
				} finally {
					this.loading = false
				}
			},

			// 刷新数据
			refreshData() {
				this.currentPage = 1
				this.hasMore = true
				this.loadmoreStatus = 'loadmore'
				this.dataList = []
				this.loadList()
			},

			// 加载更多
			async loadMore() {
				if (this.loading || !this.hasMore || this.loadmoreStatus === 'nomore') return

				this.loadmoreStatus = 'loading'
				this.currentPage++
				await this.loadList()
			},

			// 查询
			search() {
				this.refreshData()
			},

			// 重置
			reset() {
				this.query = {
					flowType: undefined
				}
				this.flowTypeIndex = 0
				this.refreshData()
			},

			// 流水类型变化
			onFlowTypeChange(e) {
				this.flowTypeIndex = e.detail.value
				this.query.flowType = this.flowTypeOptions[this.flowTypeIndex].value
			},

			// 跳转到送出记录页面
			goToSend() {
				uni.navigateTo({
					url: '/pages/laundry-flow-send/laundry-flow-send'
				})
			},

			// 跳转到送回记录页面
			goToReturn() {
				uni.navigateTo({
					url: '/pages/laundry-flow-return/laundry-flow-return'
				})
			},

			// 查看详情
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/laundry-flow-detail/laundry-flow-detail?id=${item.id}`
				})
			},

			// 编辑记录
			editRecord(item) {
				uni.navigateTo({
					url: `/pages/laundry-flow-edit/laundry-flow-edit?id=${item.id}`
				})
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			},

			// 显示错误状态
			showErrorState(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			},

			// 显示消息提示
			showMessage(message, type = 'info') {
				uni.showToast({
					title: message,
					icon: type === 'error' ? 'error' : 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx 40rpx;
		box-sizing: border-box;
	}

	.filter-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.filter-row {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-bottom: 32rpx;
	}

	.filter-item {
		flex: 1;
		min-width: 200rpx;
	}

	.filter-label {
		font-size: 28rpx;
		color: #2e7d32;
		margin-bottom: 16rpx;
		display: block;
	}

	.picker-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 24rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #2e7d32;
	}

	.picker-arrow {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-left: 16rpx;
	}

	.filter-buttons {
		display: flex;
		gap: 24rpx;
	}

	.filter-btn {
		flex: 1;
		text-align: center;
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		padding: 24rpx;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3);
	}

	.filter-btn.reset-btn {
		background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
		color: #666;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.action-buttons {
		display: flex;
		gap: 24rpx;
		margin-bottom: 40rpx;
	}

	.action-btn {
		flex: 1;
		text-align: center;
		padding: 28rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	}

	.send-btn {
		background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
		color: #fff;
	}

	.return-btn {
		background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
		color: #fff;
	}

	.btn-text {
		letter-spacing: 2rpx;
	}

	.list-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
		max-height: 60vh;
	}

	.list-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-text {
		font-size: 32rpx;
	}

	.total-count {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.list-content {
		max-height: calc(60vh - 120rpx);
		overflow-y: auto;
	}

	.list-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f0f0f0;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.list-item:active {
		background: #f8fff8;
		transform: translateX(8rpx);
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.flow-type-badge {
		display: flex;
		align-items: center;
		padding: 8rpx 24rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.flow-type-badge.send-type {
		background: #e3f2fd;
		color: #1976d2;
		border: 2rpx solid #90caf9;
	}

	.flow-type-badge.return-type {
		background: #e8f5e9;
		color: #388e3c;
		border: 2rpx solid #a5d6a7;
	}

	.flow-type-icon {
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	.flow-type-text {
		font-size: 24rpx;
	}

	.create-time {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.item-details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #555;
	}

	.detail-item.full-width {
		grid-column: 1 / -1;
	}

	.detail-label {
		color: #6a9c6a;
		margin-right: 12rpx;
		font-size: 24rpx;
	}

	.detail-value {
		color: #2e7d32;
		font-weight: 500;
	}

	.detail-value.highlight {
		color: #f57c00;
		font-weight: 600;
	}

	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 16rpx;
	}

	.footer-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.status-badge {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status-badge.effective {
		background: #e8f5e9;
		color: #2e7d32;
		border: 2rpx solid #c8e6c9;
	}

	.status-badge.ineffective {
		background: #ffebee;
		color: #c62828;
		border: 2rpx solid #ffcdd2;
	}

	.create-user {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.edit-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 16rpx;
		background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
		border-radius: 20rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.edit-icon {
		font-size: 24rpx;
	}

	.edit-text {
		font-size: 24rpx;
	}

	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}
</style>

