<template>
	<view class="page-list">
		<!-- 操作按钮区域 -->
		<view class="action-bar">
			<view class="action-btn primary" @click="handleAutoPoint">
				<u-icon name="checkmark" :size="28" color="#fff"></u-icon>
				<text>自动点口</text>
			</view>
			<view class="action-btn danger" @click="handleForceClose">
				<u-icon name="close" :size="28" color="#fff"></u-icon>
				<text>强制关闭</text>
			</view>
			<view class="action-btn warning" @click="handleAdjust">
				<u-icon name="edit-pen" :size="28" color="#fff"></u-icon>
				<text>点口调整</text>
			</view>
		</view>

		<!-- 批号信息 -->
		<view class="batch-info">
			<view class="batch-info-left">
				<text class="batch-label">批号</text>
				<text class="batch-value">{{ PointBatchCode || '--' }}</text>
			</view>
			<view class="batch-refresh" @click="handleRefresh">
				<u-icon name="reload" :size="36" :class="{ rotating: loading }"></u-icon>
			</view>
		</view>

		<!-- 列表内容 -->
		<view class="list-scroll">
			<!-- 加载中 -->
			<view v-if="loading" class="loading-box">
				<u-loading mode="circle" size="40"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>
			<!-- 数据列表 -->
			<view v-else class="list-wrap">
				<view v-for="(item, index) in listData" :key="item.id || index" class="card-item">
					<view class="card-header">
						<text class="card-code">{{ item.PipelineCode || '--' }}</text>
						<view class="status-tag" :class="item.PointState == '1' ? 'done' : 'pending'">
							{{ item.PointState == '1' ? '已点' : '未点' }}
						</view>
					</view>
					<view class="card-body">
						<view class="card-row">
							<text class="row-label">焊口代号</text>
							<text class="row-value">{{ item.WeldJointCode || '--' }}</text>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<u-empty v-if="listData.length === 0" mode="list" text="暂无数据"></u-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { reqGetPointBatchDetail } from '@/api/hj.js'

	// ===== 参数 =====
	const pointBatchId = ref('')
	const PointBatchCode = ref('')

	// ===== 列表数据 =====
	const listData = ref([])
	const loading = ref(false)

	// 加载数据
	const fetchData = async () => {
		if (loading.value) return
		loading.value = true

		try {
			const res = await reqGetPointBatchDetail(pointBatchId.value)
			listData.value = res.data || []
		} catch (error) {
			console.error('加载数据失败:', error)
			uni.showToast({ title: '加载失败，请重试', icon: 'none' })
		} finally {
			loading.value = false
		}
	}

	const handleRefresh = () => {
		fetchData()
	}

	// 自动点口
	const handleAutoPoint = async () => {
		// TODO: 调用自动点口 API
		uni.showToast({ title: '自动点口成功', icon: 'none' })
		fetchData()
	}

	// 强制关闭批
	const handleForceClose = async () => {
		// TODO: 调用强制关闭批 API
		uni.showToast({ title: '强制关闭批成功', icon: 'none' })
		fetchData()
	}

	// 点口调整
	const handleAdjust = () => {
		// TODO: 跳转到点口调整页面
		uni.showToast({ title: '功能开发中', icon: 'none' })
	}

	// ===== 生命周期 =====
	onLoad((opt) => {
		pointBatchId.value = opt.id
		PointBatchCode.value = opt.code
		fetchData()
	})
</script>

<style lang="scss" scoped>
/* 操作按钮区域 */
.action-bar {
	display: flex;
	gap: 20rpx;
	padding: 24rpx;
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
	height: 72rpx;
	border-radius: 12rpx;
	font-size: 26rpx;
	font-weight: 500;
	color: #fff;
	transition: all 0.2s;

	&:active {
		opacity: 0.85;
		transform: scale(0.98);
	}

	&.primary {
		background: linear-gradient(135deg, #4a7df5 0%, #356bdb 100%);
		box-shadow: 0 4rpx 12rpx rgba(74, 125, 245, 0.3);
	}

	&.danger {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
	}

	&.warning {
		background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%);
		box-shadow: 0 4rpx 12rpx rgba(255, 167, 38, 0.3);
	}
}

/* 批号信息 */
.batch-info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	background: #fff;
	margin-top: 2rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.batch-info-left {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
}

.batch-label {
	font-size: 28rpx;
	color: #666;
	line-height: 1.4;
}

.batch-value {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}

.batch-refresh {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f5f6f8;
	transition: all 0.2s;

	&:active {
		background: #e8e9eb;
		transform: scale(0.95);
	}
}

.rotating {
	animation: rotate 1s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 列表区域 */
.list-scroll {
	flex: 1;
	overflow-y: auto;
	background: #f5f6f8;
}

.list-wrap {
	padding: 24rpx;
}

/* 卡片样式 */
.card-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	transition: transform 0.15s, box-shadow 0.15s;

	&:active {
		transform: scale(0.99);
		box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	&:last-child {
		margin-bottom: 0;
	}
}

.card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.card-code {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	flex: 1;
	word-break: break-all;
	margin-right: 16rpx;
}

/* 状态标签 */
.status-tag {
	display: inline-flex;
	align-items: center;
	padding: 8rpx 20rpx;
	border-radius: 24rpx;
	font-size: 24rpx;
	font-weight: 500;
	flex-shrink: 0;
	white-space: nowrap;

	&.done {
		background: rgba(76, 175, 80, 0.1);
		color: #4caf50;
	}

	&.pending {
		background: rgba(153, 153, 153, 0.1);
		color: #999;
	}
}

.card-body {
	padding-top: 20rpx;
}

.card-row {
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}

.row-label {
	width: 160rpx;
	font-size: 26rpx;
	color: #999;
	flex-shrink: 0;
}

.row-value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

/* 加载状态 */
.loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
}

.loading-text {
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #999;
}
</style>
