<template>
	<view class="trace-container">
		<!-- 扫码或输入 -->
		<view class="search-section">
			<view class="search-card">
				<view class="card-title">
					<text class="title-dot"></text>
					<text class="title-text">钢卷溯源</text>
				</view>
				
				<!-- 扫码按钮 -->
				<view class="scan-btn" @click="handleScan">
					<text class="scan-icon">📷</text>
					<text class="scan-text">扫描二维码</text>
				</view>
				
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">或</text>
					<view class="divider-line"></view>
				</view>
				
				<!-- 输入框 -->
				<view class="input-group">
					<view class="input-item">
						<text class="input-label">入场钢卷号</text>
						<input 
							v-model="searchForm.enterCoilNo" 
							placeholder="请输入入场钢卷号" 
							class="input-field"
						/>
					</view>
					<view class="input-item">
						<text class="input-label-optional">当前钢卷号（可选）</text>
						<input 
							v-model="searchForm.currentCoilNo" 
							placeholder="可输入当前钢卷号筛选" 
							class="input-field"
						/>
					</view>
				</view>
				
				<!-- 查询按钮 -->
				<button class="query-btn" @click="handleQuery" :disabled="loading">
					{{ loading ? '查询中...' : '查询溯源' }}
				</button>
			</view>
		</view>
		
		<!-- 溯源结果 -->
		<view class="result-section" v-if="traceResult">
			<!-- 二维码信息 -->
			<view class="result-card">
				<view class="card-title">
					<text class="title-dot"></text>
					<text class="title-text">二维码信息</text>
				</view>
				<view class="qrcode-info">
					<view class="info-row">
						<text class="info-label">主序列号：</text>
						<text class="info-value">{{ (traceResult.qrcode && traceResult.qrcode.serialNumber) || '-' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">创建时间：</text>
						<text class="info-value">{{ (traceResult.qrcode && traceResult.qrcode.createTime) || '-' }}</text>
					</view>
					<view class="info-row" v-if="traceResult.all_qrcodes && traceResult.all_qrcodes.length > 1">
						<text class="info-label">相关二维码：</text>
						<text class="info-value">{{ traceResult.all_qrcodes.length }} 个</text>
					</view>
				</view>
			</view>
			
			<!-- 操作步骤 -->
			<view class="result-card" v-if="traceResult.steps && traceResult.steps.length > 0">
				<view class="card-title">
					<text class="title-dot"></text>
					<text class="title-text">操作步骤</text>
				</view>
				<view class="steps-timeline">
					<view 
						class="step-item" 
						v-for="(step, index) in traceResult.steps" 
						:key="index"
					>
						<view class="step-marker">
							<view class="step-number">{{ step.display_step || step.step }}</view>
							<view class="step-line" v-if="index < traceResult.steps.length - 1"></view>
						</view>
						<view class="step-content">
							<view class="step-header">
								<text class="step-action">{{ step.action }}</text>
								<text class="step-operation" v-if="step.operation">{{ step.operation }}</text>
							</view>
							<view class="step-details">
								<view class="detail-row" v-if="step.current_coil_no">
									<text class="detail-label">当前钢卷号：</text>
									<text class="detail-value">{{ step.current_coil_no }}</text>
								</view>
								<view class="detail-row" v-if="step.old_current_coil_no">
									<text class="detail-label">原钢卷号：</text>
									<text class="detail-value">{{ step.old_current_coil_no }}</text>
								</view>
								<view class="detail-row" v-if="step.new_current_coil_no">
									<text class="detail-label">新钢卷号：</text>
									<text class="detail-value">{{ step.new_current_coil_no }}</text>
								</view>
								<view class="detail-row" v-if="step.new_current_coil_nos">
									<text class="detail-label">分卷列表：</text>
									<view class="detail-value">
										<view class="coil-tags">
											<text 
												class="coil-tag coil-tag-split" 
												v-for="coilNo in step.new_current_coil_nos.split(',')" 
												:key="coilNo"
											>
												{{ coilNo.trim() }}
											</text>
										</view>
									</view>
								</view>
								<view class="detail-row" v-if="step.parent_coil_nos">
									<text class="detail-label">合卷来源：</text>
									<view class="detail-value">
										<view class="coil-tags">
											<text 
												class="coil-tag coil-tag-merge" 
												v-for="coilNo in step.parent_coil_nos.split(',')" 
												:key="coilNo"
											>
												{{ coilNo.trim() }}
											</text>
										</view>
									</view>
								</view>
								<view class="detail-row" v-if="step.child_coils && step.child_coils.length > 0">
									<text class="detail-label">子钢卷：</text>
									<view class="detail-value">
										<view class="coil-tags">
											<text 
												class="coil-tag coil-tag-child" 
												v-for="coilNo in step.child_coils" 
												:key="coilNo"
											>
												{{ coilNo }}
											</text>
										</view>
									</view>
								</view>
								<view class="detail-row" v-if="step.qrcode_serial">
									<text class="detail-label">二维码序列：</text>
									<text class="detail-value">{{ step.qrcode_serial }}</text>
								</view>
								<view class="detail-row" v-if="step.operator">
									<text class="detail-label">操作者：</text>
									<text class="detail-value">{{ step.operator }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 钢卷分支图 -->
			<view class="result-card" v-if="traceResult.records && traceResult.records.length > 0">
				<view class="card-title">
					<text class="title-dot"></text>
					<text class="title-text">钢卷分支图</text>
				</view>
				<view class="branch-view">
					<view 
						class="branch-item" 
						v-for="(record, index) in groupedRecords" 
						:key="index"
					>
						<view class="branch-header">
							<view class="branch-type" :class="['branch-' + record.type, 'operation-' + record.groupColor]">
								{{ record.title }}
							</view>
							<text class="branch-count">{{ record.coils.length }} 个钢卷</text>
						</view>
						<view class="branch-coils">
							<view 
								class="coil-card" 
								v-for="coil in record.coils" 
								:key="coil.coilId"
							>
								<view class="coil-header">
									<text class="coil-no">{{ coil.currentCoilNo }}</text>
									<view class="coil-status" :class="'status-' + coil.dataType">
										{{ coil.dataType === 1 ? '当前' : '历史' }}
									</view>
								</view>
								<view class="coil-info">
									<text class="coil-detail">入场号：{{ coil.enterCoilNo }}</text>
									<text class="coil-detail" v-if="coil.team">班组：{{ coil.team }}</text>
									<text class="coil-detail" v-if="coil.warehouse">
										库区：{{ coil.warehouse.warehouseName }}
									</text>
									<text class="coil-detail">{{ coil.createTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
	</view>
	
			<!-- 无记录提示 -->
			<view class="empty-tip" v-if="!traceResult.records || traceResult.records.length === 0">
				<text>未找到相关钢卷记录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getGenerateRecord } from '@/api/wms/code.js'
import { getMaterialCoilTrace, getMaterialCoil } from '@/api/wms/coil.js'

	export default {
		data() {
			return {
			searchForm: {
				enterCoilNo: '',
				currentCoilNo: ''
			},
			traceResult: null,
			loading: false
		}
	},
	
	computed: {
		// 按时间线和分支关系分组钢卷记录
		groupedRecords() {
			if (!this.traceResult || !this.traceResult.records) {
				return [];
			}
			
			const groups = [];
			
			// 按创建时间排序所有记录
			const sortedRecords = [...this.traceResult.records].sort((a, b) => 
				new Date(a.createTime) - new Date(b.createTime)
			);
			
			// 按数据类型分组，但保持时间顺序
			const currentCoils = sortedRecords.filter(record => record.dataType === 1);
			const historyCoils = sortedRecords.filter(record => record.dataType === 0);
			
			// 当前数据分组
			if (currentCoils.length > 0) {
				// 进一步按操作类型细分当前数据
				const currentByOperation = this.groupByOperation(currentCoils);
				groups.push(...currentByOperation);
			}
			
			// 历史数据分组
			if (historyCoils.length > 0) {
				// 进一步按操作类型细分历史数据
				const historyByOperation = this.groupByOperation(historyCoils, true);
				groups.push(...historyByOperation);
			}
			
			return groups;
		}
	},
	
	methods: {
		// 按操作类型分组
		groupByOperation(records, isHistory = false) {
			const operationGroups = {};
			
			for (const record of records) {
				let operationType = '原始数据';
				let groupColor = 'default';
				
				if (record.hasMergeSplit === 1) {
					operationType = '分卷结果';
					groupColor = 'split';
				} else if (record.hasMergeSplit === 2) {
					operationType = '合卷结果';
					groupColor = 'merge';
				}
				
				const groupKey = operationType;
				if (!operationGroups[groupKey]) {
					operationGroups[groupKey] = {
						operationType: operationType,
						groupColor: groupColor,
						coils: []
					};
				}
				operationGroups[groupKey].coils.push(record);
			}
			
			// 转换为数组
			const groups = [];
			for (const key in operationGroups) {
				const group = operationGroups[key];
				groups.push({
					type: isHistory ? 'history' : 'current',
					operationType: group.operationType,
					groupColor: group.groupColor,
					title: `${group.operationType}${isHistory ? '（历史）' : '（当前）'}`,
					coils: group.coils
				});
			}
			
			return groups;
		},
		
		// 扫码
		handleScan() {
			uni.scanCode({
				success: async (res) => {
					console.log('扫码结果：', res.result);
					try {
						const qrcodeId = res.result;
						
						// 1. 获取二维码详情
						const qrcodeRes = await getGenerateRecord(qrcodeId);
						if (qrcodeRes.code !== 200) {
							throw new Error('未找到二维码记录');
						}
						
						// 2. 解析content获取coil_id
						const qrcodeRecord = qrcodeRes.data;
						const content = JSON.parse(qrcodeRecord.content);
						const coilId = content.coil_id;
						
						if (!coilId || coilId === 'null' || coilId === 'undefined') {
							throw new Error('二维码中未包含有效的钢卷ID');
						}
						
						// 3. 查询钢卷详情获取enterCoilNo
						const coilRes = await getMaterialCoil(coilId);
						if (coilRes.code !== 200 || !coilRes.data) {
							throw new Error('未找到钢卷信息');
						}
						
						const coilData = coilRes.data;
						this.searchForm.enterCoilNo = coilData.enterCoilNo;
						this.searchForm.currentCoilNo = '';
						
						// 4. 自动查询溯源
						this.handleQuery();
					} catch (err) {
						console.error('扫码处理失败：', err);
						uni.showToast({
							title: err.message || '扫码信息解析失败',
							icon: 'none',
							duration: 2000
						});
					}
				},
				fail: (err) => {
					console.error('扫码失败：', err);
					uni.showToast({
						title: '扫码失败，请重试',
						icon: 'none'
					});
				}
			});
		},
		
		// 查询溯源
		handleQuery() {
			// 验证
			if (!this.searchForm.enterCoilNo) {
				uni.showToast({ 
					title: '请输入或扫描入场钢卷号', 
					icon: 'none' 
				});
				return;
			}
			
			this.loading = true;
			
			getMaterialCoilTrace(
				this.searchForm.enterCoilNo, 
				this.searchForm.currentCoilNo || undefined
			).then(res => {
				if (res.code === 200) {
					this.traceResult = res.data;
					console.log('溯源结果：', this.traceResult);
					
					if (!this.traceResult.records || this.traceResult.records.length === 0) {
						uni.showToast({
							title: '未找到相关记录',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '查询成功',
							icon: 'success'
						});
					}
				} else {
					uni.showToast({
						title: res.msg || '查询失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				console.error('查询失败：', err);
				uni.showToast({
					title: '查询失败，请重试',
					icon: 'none'
				});
			}).finally(() => {
				this.loading = false;
			});
			}
		}
	}
</script>

<style scoped lang="scss">
.trace-container {
	padding-bottom: 30rpx;
}

/* 搜索区域 */
.search-section {
	margin-bottom: 20rpx;
}

.search-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.card-title {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	
	.title-dot {
		width: 8rpx;
		height: 28rpx;
		background: #5856d6;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}
	
	.title-text {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}
}

/* 扫码按钮 */
.scan-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #5856d6 0%, #4840c4 100%);
	border-radius: 12rpx;
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(88, 86, 214, 0.3);
	
	&:active {
		transform: scale(0.98);
	}
	
	.scan-icon {
		font-size: 40rpx;
	}
	
	.scan-text {
		font-size: 28rpx;
		font-weight: 500;
	}
}

/* 分割线 */
.divider {
	display: flex;
	align-items: center;
	margin: 30rpx 0;
	
	.divider-line {
		flex: 1;
		height: 1rpx;
		background: #e8e8e8;
	}
	
	.divider-text {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #999;
	}
}

/* 输入组 */
.input-group {
	.input-item {
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.input-label,
		.input-label-optional {
			display: block;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 12rpx;
			font-weight: 500;
		}
		
		.input-label::before {
			content: '*';
			color: #ff4d4f;
			margin-right: 6rpx;
		}
		
		.input-field {
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			background: #f8f9fa;
			border: 2rpx solid #e8e8e8;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			
			&:focus {
				background: #fff;
				border-color: #5856d6;
			}
		}
	}
}

/* 查询按钮 */
.query-btn {
	width: 100%;
	height: 88rpx;
	margin-top: 30rpx;
	background: linear-gradient(135deg, #5856d6 0%, #4840c4 100%);
	color: #fff;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: 500;
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(88, 86, 214, 0.3);
	
	&:active {
		transform: scale(0.98);
	}
	
	&[disabled] {
		opacity: 0.6;
	}
}

/* 结果区域 */
.result-section {
	.result-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}
}

/* 二维码信息 */
.qrcode-info {
	.info-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.info-label {
			font-size: 26rpx;
			color: #666;
			min-width: 150rpx;
		}
		
		.info-value {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

/* 步骤时间线 */
.steps-timeline {
	.step-item {
		display: flex;
		gap: 20rpx;
		
		.step-marker {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.step-number {
				width: 60rpx;
				height: 60rpx;
				background: #5856d6;
				color: #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: bold;
				flex-shrink: 0;
			}
			
			.step-line {
				width: 2rpx;
				flex: 1;
				background: #e8e8e8;
				margin: 10rpx 0;
			}
		}
		
		.step-content {
			flex: 1;
			padding-bottom: 30rpx;
			
			.step-header {
				display: flex;
				align-items: center;
				gap: 15rpx;
				margin-bottom: 15rpx;
				
				.step-action {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
				}
				
				.step-operation {
					font-size: 24rpx;
					color: #fff;
					background: #5856d6;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
				}
			}
			
			.step-details {
				background: #f8f9fa;
				border-radius: 10rpx;
				padding: 20rpx;
				
				.detail-row {
					display: flex;
					margin-bottom: 10rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.detail-label {
						font-size: 24rpx;
						color: #666;
						min-width: 140rpx;
					}
					
					.detail-value {
						flex: 1;
						font-size: 24rpx;
						color: #333;
						word-break: break-all;
					}
				}
				
				.coil-tags {
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;
					
					.coil-tag {
						display: inline-block;
						padding: 6rpx 16rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						font-weight: 500;
						
						&.coil-tag-split {
							background: #fff3e0;
							color: #ff9500;
							border: 1rpx solid #ffd591;
						}
						
						&.coil-tag-merge {
							background: #e8f5e8;
							color: #34c759;
							border: 1rpx solid #95de64;
						}
						
						&.coil-tag-child {
							background: #f0f7ff;
							color: #007aff;
							border: 1rpx solid #91d5ff;
						}
					}
				}
			}
		}
	}
}

/* 分支视图 */
.branch-view {
	.branch-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.branch-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 15rpx 20rpx;
			background: #f8f9fa;
			border-radius: 10rpx;
			
			.branch-type {
				font-size: 26rpx;
				font-weight: 600;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
				
				&.branch-current {
					background: #d1f2eb;
					color: #0c6957;
				}
				
				&.branch-history {
					background: #f8d7da;
					color: #721c24;
				}
				
				&.operation-split {
					background: #fff3e0;
					color: #ff9500;
					border: 1rpx solid #ffd591;
				}
				
				&.operation-merge {
					background: #e8f5e8;
					color: #34c759;
					border: 1rpx solid #95de64;
				}
				
				&.operation-default {
					background: #f0f7ff;
					color: #007aff;
					border: 1rpx solid #91d5ff;
				}
			}
			
			.branch-count {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.branch-coils {
			display: flex;
			flex-wrap: wrap;
			gap: 15rpx;
			
			.coil-card {
				flex: 1;
				min-width: 300rpx;
				background: #fff;
				border: 2rpx solid #e8e8e8;
				border-radius: 12rpx;
				padding: 20rpx;
				
				.coil-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15rpx;
					
					.coil-no {
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
					}
					
					.coil-status {
						font-size: 20rpx;
						padding: 4rpx 12rpx;
						border-radius: 12rpx;
						
						&.status-1 {
							background: #d1f2eb;
							color: #0c6957;
						}
						
						&.status-0 {
							background: #f8d7da;
							color: #721c24;
						}
					}
				}
				
				.coil-info {
					.coil-detail {
						display: block;
						font-size: 22rpx;
						color: #666;
						margin-bottom: 8rpx;
						line-height: 1.4;
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
}

/* 空提示 */
.empty-tip {
	text-align: center;
	padding: 80rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style>
