<template>
	<view class="detail-page">
		<!-- 焊口主标识 -->
		<view class="joint-hero">
			<text class="joint-hero__code">{{ info.WeldJointCode || '--' }}</text>
			<view class="joint-hero__meta">
				<view class="joint-hero__pill">
					<text class="pill-label">管线编码</text>
					<text class="pill-value">{{ info.PipelineCode || '--' }}</text>
				</view>
				<view class="joint-hero__pill">
					<text class="pill-label">项目名称</text>
					<text class="pill-value">{{ info.ProjectName || info.ProjectId || '--' }}</text>
				</view>
			</view>
		</view>

		<!-- 坡口参数 - 测量仪表 -->
		<!-- <view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">坡口参数</text>
			</view>
			<view class="spec-grid">
				<view class="spec-item">
					<view class="spec-item__header">
						<text class="spec-item__label">坡口角度</text>
						<text class="spec-item__value">{{ info.GrooveAngle || '--' }}<text class="spec-item__unit">°</text></text>
					</view>
					<view class="spec-item__bar-track">
						<view class="spec-item__bar-fill" :style="{ width: gaugeWidth(info.GrooveAngle, 0, 90) }"></view>
					</view>
				</view>
				<view class="spec-item">
					<view class="spec-item__header">
						<text class="spec-item__label">组对间隙</text>
						<text class="spec-item__value">{{ info.FitupGap || '--' }}<text class="spec-item__unit">mm</text></text>
					</view>
					<view class="spec-item__bar-track">
						<view class="spec-item__bar-fill fill--amber" :style="{ width: gaugeWidth(info.FitupGap, 0, 10) }"></view>
					</view>
				</view>
				<view class="spec-item">
					<view class="spec-item__header">
						<text class="spec-item__label">错边量</text>
						<text class="spec-item__value">{{ info.Misalignment || '--' }}<text class="spec-item__unit">mm</text></text>
					</view>
					<view class="spec-item__bar-track">
						<view class="spec-item__bar-fill fill--teal" :style="{ width: gaugeWidth(info.Misalignment, 0, 5) }"></view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 坡口类型 -->
		<!-- <view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">坡口信息</text>
			</view>
			<view class="card">
				<view class="card__row">
					<text class="card__label">坡口类型名称</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ info.GrooveTypeName || '--' }}</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">坡口类型编号</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ info.GrooveTypeCode || '--' }}</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">坡口加工类型</text>
					<text class="card__value">{{ info.GrooveProcessType || '--' }}</text>
				</view>
			</view>
		</view> -->

		<!-- 材料校验 -->
		<view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">材料校验</text>
			</view>
			<view class="check-card">
				<view class="check-item">
					<view class="check-item__left">
						<text class="check-item__label">材料编码及炉批号校验</text>
						<text class="check-item__desc">核对实物编码与批次信息</text>
					</view>
					<view class="check-item__action">
						<nbd-check-btn v-model="check.CodeBatch" :passKey="true" :failKey="false" passText="通过" failText="不通过" />
					</view>
				</view>
				<view class="check-item">
					<view class="check-item__left">
						<text class="check-item__label">材料数量校验</text>
						<text class="check-item__desc">核对实物数量与单据一致</text>
					</view>
					<view class="check-item__action">
						<nbd-check-btn v-model="check.Quantity" :passKey="true" :failKey="false" passText="通过" failText="不通过" />
					</view>
				</view>
			</view>
		</view>

		<!-- 备注 -->
		<view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">备注</text>
			</view>
			<view class="remark-card">
				<textarea
					class="remark-input"
					v-model="remark"
					placeholder="请输入备注信息（选填）"
					:maxlength="200"
					auto-height
				/>
				<text class="remark-count">{{ remark.length }}/200</text>
			</view>
		</view>

		<!-- 现场照片 -->
		<view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">照片</text>
			</view>
			<view class="img-box">
				<nbd-photo-upload ref="photoRef" v-model:attachUrl="formAttachUrl" typeName="MaterialSampling" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-bar">
			<view class="submit-btn" @click="handleSubmit">
				<text class="submit-btn__text">提交校验结果</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/store'

	import { reqPreWeldJointByWeldJointId, reqSaveCuttingCheck } from '@/api/hj'


	const userStore = useUserStore()
	const { userInfo, currentProject } = storeToRefs(userStore)

	const info = ref({})
	const remark = ref('')
	const formAttachUrl = ref('')

	const check = ref({
		CodeBatch: true,
		Quantity: true
	})

	// 照片组件引用
	const photoRef = ref(null)

	const handleSubmit = () => {
		uni.showModal({
			title: '确认提交',
			content: '确定提交校验结果吗？',
			success: async (res) => {
				if (res.confirm) {
					if (photoRef.value?.hasPending()) {
						uni.showLoading({ title: '上传照片中...', mask: true })
						await photoRef.value.uploadAll()
						uni.hideLoading()
					}
					const CuttingAttachUrl1 = formAttachUrl.value || info.value.CuttingAttachUrl1 || ''

					const now = new Date()
					const pad = (n) => String(n).padStart(2, '0')
					const checkTime = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`

					const params = {
						ProjectId: currentProject.value?.ProjectId,
						WeldJointId: info.value?.WeldJointId,
						IsMaterialCodeBatchNoAccurate: check.value.CodeBatch,
						IsMaterialQuantityAccurate: check.value.Quantity,
						CheckPerson: userInfo.value?.PersonId,
						CheckTime: checkTime,
						Remark: remark.value,
						CuttingAttachUrl1
					}
					console.log('提交参数:', params)
					await reqSaveCuttingCheck(params)
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => { uni.navigateBack() }, 1500)
				}
			}
		})
	}

	onLoad((opt) => {
		if (opt.id) {
			getInfo(opt.id)
		}
	})

	const getInfo = async (id) => {
		try {
			uni.showLoading({ title: '加载中...', mask: true })
			const res = await reqPreWeldJointByWeldJointId(id)
			if (res.code === 1) {
				info.value = res.data
				formAttachUrl.value = res.data?.CuttingAttachUrl1 || ''
			}
		} catch (error) {
			console.error('获取焊口详情失败:', error)
			uni.showToast({ title: '加载失败', icon: 'none' })
		} finally {
			uni.hideLoading()
		}
	}

	const gaugeWidth = (val, min, max) => {
		if (!val && val !== 0) return '0%'
		const num = parseFloat(val)
		if (isNaN(num)) return '0%'
		const pct = Math.min(Math.max((num - min) / (max - min) * 100, 0), 100)
		return pct + '%'
	}
</script>

<style lang="scss" scoped>
	$primary: #2979ff;
	$primary-light: #e8f0fe;
	$primary-mid: #d0ddff;
	$primary-dark: #1a56cc;
	$bg: #f0f2f5;
	$text: #0f1724;
	$text-secondary: #6b7c93;
	$border: #e8ecf1;
	$card-bg: #ffffff;
	$radius: 16rpx;
	$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

	.detail-page {
		min-height: 100vh;
		background: $bg;
		padding-bottom: 180rpx;
	}

	// ===== 焊口主标识 =====
	.joint-hero {
		position: relative;
		margin: 24rpx;
		padding: 36rpx 32rpx 28rpx;
		background: $card-bg;
		border-radius: $radius;
		box-shadow: $shadow-md;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: linear-gradient(90deg, $primary, #6ba3ff, $primary);
			background-size: 200% 100%;
			animation: shimmer 3s ease-in-out infinite;
		}

		@keyframes shimmer {
			0%, 100% { background-position: 0% 0; }
			50% { background-position: 100% 0; }
		}

		&__code {
			display: block;
			font-size: 52rpx;
			font-weight: 800;
			color: $text;
			line-height: 1.2;
			word-break: break-all;
			font-family: monospace;
			letter-spacing: 2rpx;
			margin-bottom: 28rpx;
			position: relative;
			padding-left: 24rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 6rpx;
				bottom: 6rpx;
				width: 4rpx;
				background: $primary;
				border-radius: 2rpx;
			}
		}

		&__meta {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
		}

		&__pill {
			display: inline-flex;
			width: 100%;
			align-items: center;
			gap: 8rpx;
			background: $primary-light;
			padding: 10rpx 18rpx;
			border-radius: 10rpx;
			border: 1rpx solid $primary-mid;

			.pill-label {
				font-size: 22rpx;
				color: $text-secondary;
				width: 60rpx;
			}

			.pill-value {
				font-size: 24rpx;
				font-weight: 600;
				color: $primary-dark;
				font-family: monospace;
			}
		}
	}

	// ===== 区块标题 =====
	.section {
		margin: 0 24rpx 20rpx;

		&__header {
			display: flex;
			align-items: center;
			gap: 12rpx;
			margin-bottom: 14rpx;
			padding: 0 6rpx;
		}

		&__bar {
			width: 6rpx;
			height: 26rpx;
			background: linear-gradient(180deg, $primary, #6ba3ff);
			border-radius: 3rpx;
			flex-shrink: 0;
		}

		&__title {
			font-size: 28rpx;
			font-weight: 600;
			color: $text;
			letter-spacing: 0.5rpx;
		}
		.img-box{
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
		}
	}

	// ===== 坡口参数仪表 =====
	.spec-grid {
		background: $card-bg;
		border-radius: $radius;
		padding: 8rpx 0;
		box-shadow: $shadow-md;

		.spec-item {
			padding: 24rpx 28rpx;
			border-bottom: 1rpx solid $border;

			&:last-child {
				border-bottom: none;
			}

			&__header {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				margin-bottom: 14rpx;
			}

			&__label {
				font-size: 24rpx;
				color: $text-secondary;
				font-weight: 500;
			}

			&__value {
				font-size: 40rpx;
				font-weight: 700;
				color: $text;
				line-height: 1;
				font-variant-numeric: tabular-nums;
			}

			&__unit {
				font-size: 24rpx;
				font-weight: 400;
				color: $text-secondary;
				margin-left: 6rpx;
			}

			&__bar-track {
				height: 8rpx;
				background: #f0f2f5;
				border-radius: 4rpx;
				overflow: hidden;
				position: relative;
			}

			&__bar-fill {
				height: 100%;
				border-radius: 4rpx;
				background: linear-gradient(90deg, $primary, #6ba3ff);
				transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 12rpx;
					border-radius: 4rpx;
					background: rgba(255, 255, 255, 0.35);
				}

				&.fill--amber {
					background: linear-gradient(90deg, #f59e0b, #fbbf24);
				}

				&.fill--teal {
					background: linear-gradient(90deg, #14b8a6, #2dd4bf);
				}
			}
		}
	}

	// ===== 信息卡片 =====
	.card {
		background: $card-bg;
		border-radius: $radius;
		overflow: hidden;
		box-shadow: $shadow-md;

		&__row {
			display: flex;
			align-items: center;
			padding: 22rpx 28rpx;
			border-bottom: 1rpx solid $border;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: #fafbfc;
			}
		}

		&__label {
			width: 180rpx;
			font-size: 26rpx;
			color: $text-secondary;
			flex-shrink: 0;
			position: relative;
			padding-left: 16rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 16rpx;
				background: $primary-mid;
				border-radius: 2rpx;
			}
		}

		&__value {
			flex: 1;
			font-size: 28rpx;
			color: $text;
			font-weight: 500;
		}

		&__value-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 12rpx;
		}
	}

	// ===== 校验卡片 =====
	.check-card {
		background: $card-bg;
		border-radius: $radius;
		overflow: hidden;
		box-shadow: $shadow-md;
	}

	.check-item {
		display: flex;
		align-items: center;
		padding: 22rpx 28rpx;
		border-bottom: 1rpx solid $border;

		&:last-child {
			border-bottom: none;
		}

		&__left {
			flex: 1;
			min-width: 0;
		}

		&__label {
			font-size: 26rpx;
			font-weight: 500;
			color: $text;
			display: block;
			margin-bottom: 4rpx;
		}

		&__desc {
			font-size: 22rpx;
			color: $text-secondary;
			display: block;
		}

		&__action {
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}

	// ===== 提交栏（悬浮底部） =====
	.submit-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(240, 242, 245, 0) 0%, $bg 20%);
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx;
		background: linear-gradient(135deg, $primary, #5a9aff);
		border-radius: 14rpx;
		box-shadow: 0 6rpx 24rpx rgba($primary, 0.3);
		transition: all 0.25s ease;

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

		&--disabled {
			background: #c5cbd5;
			box-shadow: none;

			&:active {
				opacity: 1;
				transform: none;
			}

			.submit-btn__text {
				color: #94a3b8;
			}
		}

		&__text {
			font-size: 30rpx;
			font-weight: 600;
			color: #ffffff;
			letter-spacing: 2rpx;
		}
	}

	// ===== 备注输入框 =====
	.remark-card {
		background: $card-bg;
		border-radius: $radius;
		padding: 24rpx 28rpx;
		box-shadow: $shadow-md;
		position: relative;

		.remark-input {
			width: 100%;
			min-height: 120rpx;
			font-size: 26rpx;
			color: $text;
			line-height: 1.6;
			padding: 0;
			margin: 0;
			background: transparent;

			&::placeholder {
				color: #b0bec5;
			}
		}

		.remark-count {
			position: absolute;
			bottom: 16rpx;
			right: 24rpx;
			font-size: 22rpx;
			color: $text-secondary;
		}
	}

</style>
