<template>
	<view class="detail-page">
		<!-- 焊口主标识 -->
		<view class="joint-hero">
			<text class="joint-hero__code">{{ form.WeldJointCode || '焊口编码' }}</text>
			<view class="joint-hero__meta">
				<view class="joint-hero__pill">
					<text class="pill-label">管线编码</text>
					<text class="pill-value">{{ form.PipelineCode || '--' }}</text>
				</view>
				<view class="joint-hero__pill">
					<text class="pill-label">项目编号</text>
					<text class="pill-value">{{ form.ProjectName || form.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="card">
				<view class="card__row" :class="{ 'card__row--warn': !form.GrooveTypeName }"
					@click="showGroovePicker = true">
					<text class="card__label"><text class="required">*</text>坡口类型名称</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !form.GrooveTypeName }">
							{{ form.GrooveTypeName || '请选择坡口类型' }}
						</text>
						<u-icon name="arrow-down" :size="24" color="#bbb" />
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">坡口类型编码</text>
					<text class="card__value">{{ form.GrooveTypeCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">坡口加工类型</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.GrooveProcessType" type="digit" placeholder="请输入" />
					</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">
						<input class="card__input" v-model="form.GrooveAngle" type="digit" placeholder="请输入" />
						<text class="card__unit">°</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">组对间隙</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.FitupGap" type="digit" placeholder="请输入" />
						<text class="card__unit">mm</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">错边量</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.Misalignment" type="digit" placeholder="请输入" />
						<text class="card__unit">mm</text>
					</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">
					<textarea class="remark-input" v-model="remark" placeholder="请输入备注信息（选填）" :maxlength="200" auto-height />
				</view>
			</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="attachUrl" typeName="MakeRight" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-bar">
			<view class="btn-primary-gradient" @click="handleSubmit">
				<text class="btn-primary-gradient__text">提交</text>
			</view>
		</view>

		<!-- 坡口类型选择器 -->
		<nbd-select v-model="showGroovePicker" title="选择坡口类型" :list="grooveTypeOptions" label-key="BaseInfoName"
			value-key="BaseInfoCode" @confirm="selectGrooveType" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { reqPreWeldJointByWeldJointId, reqGetGrooveTypeList, reqSaveFitupCheck } from '@/api/hj'


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

const showGroovePicker = ref(false)
const grooveTypeOptions = ref([])
const attachUrl = ref('')
const remark = ref('')
const photoRef = ref(null)

const form = ref({
	WeldJointId: '',
	WeldJointCode: '',
	PipelineId: '',
	PipelineCode: '',
	ProjectId: '',
	GrooveTypeId: '',
	GrooveTypeCode: '',
	GrooveTypeName: '',
	GrooveProcessType: '',
	GrooveAngle: '',
	FitupGap: '',
	Misalignment: ''
})

const fetchGrooveTypes = async () => {
	try {
		const res = await reqGetGrooveTypeList()
		if (res.code === 1 && res.data) {
			grooveTypeOptions.value = res.data
		}
	} catch (err) {
		console.error('获取坡口类型列表失败:', err)
	}
}
const selectGrooveType = (item) => {
	form.value.GrooveTypeId = item.BaseInfoId
	form.value.GrooveTypeCode = item.BaseInfoCode
	form.value.GrooveTypeName = item.BaseInfoName
	showGroovePicker.value = false
}

onMounted(() => {
	fetchGrooveTypes()
})

onLoad((opt) => {
	if (opt?.id) {
		loadData(opt.id)
	}
	if (currentProject.value?.ProjectId) {
		form.value.ProjectId = currentProject.value.ProjectId
	}
})

const loadData = async (id) => {
	try {
		uni.showLoading({ title: '加载中...', mask: true })
		const res = await reqPreWeldJointByWeldJointId(id)
		if (res.code === 1 && res.data) {
			form.value = res.data
			attachUrl.value = res.data.FitupAttachUrl1 || ""
		}
	} catch (err) {
		console.error('加载焊口数据失败:', err)
		uni.showToast({ title: '加载失败', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

const handleSubmit = () => {
	if (!form.value.GrooveTypeName) {
		uni.showToast({ title: '请选择坡口类型', icon: 'none' })
		return
	}
	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 checkTime = new Date().toISOString()

				const params = {
						FitupCheckId: form.value.FitupCheckId || '',
						ProjectId: form.value?.ProjectId,
						WeldJointId: form.value.WeldJointId,
						PipelineCode: form.value.PipelineCode || '',
						WeldJointCode: form.value.WeldJointCode || '',
						GrooveTypeId: form.value.GrooveTypeId,
						GrooveTypeCode: form.value.GrooveTypeCode || '',
						GrooveTypeName: form.value.GrooveTypeName || '',
						GrooveProcessType: form.value.GrooveProcessType || '',
						GrooveAngle: Number(form.value.GrooveAngle) || 0,
						FitupGap: Number(form.value.FitupGap) || 0,
						Misalignment: Number(form.value.Misalignment) || 0,
						CheckPerson: userInfo.value?.PersonId || '',
						CheckPersonName: userInfo.value?.PersonName || '',
						CheckTime: checkTime,
						FitupAttachUrl1: attachUrl.value || form.value.FitupAttachUrl1 || '',
						Remark: remark.value || ''
					}
				console.log('提交参数:', params)
				await reqSaveFitupCheck(params)
				uni.showToast({ title: '提交成功', icon: 'none' })
				setTimeout(() => { uni.navigateBack() }, 1500)
			}
		}
	})
}
</script>

<style lang="scss" scoped>
// 继承全局变量（定义在 uni.scss）
$primary: $app-primary;
$primary-light: $app-primary-light;
$primary-mid: $app-primary-mid;
$primary-dark: $app-primary-dark;
$text: $app-text;
$text-secondary: $app-text-secondary;
$border: $app-border;
$radius: $app-radius;
// 页面专属
$bg: #f0f2f5;
$card-bg: #ffffff;
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

.detail-page {
	background: $bg;
}

// ===== 焊口主标识 =====
.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;
		}
	}
}

// ===== 卡片页面覆盖（继承 page.scss 公共 .card 样式）=====
.card__row {
	&:active {
		background: #fafbfc;
	}

	&--warn .card__label::before {
		background: #ef4444;
	}
}

.card__value {
	text-align: right;

	&--placeholder {
		color: #b0bec5;
		font-weight: 400;
	}
}

.card__value-wrap {
	justify-content: flex-end;
}

.card__input {
	text-align: right;
	padding: 0;

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

// ===== 备注 =====
.remark-input {
	width: 100%;
	font-size: 26rpx;
	color: $text;
	min-height: 120rpx;
	padding: 8rpx 0;
	line-height: 1.6;

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

// ===== 提交栏 =====
.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($bg, 0) 0%, $bg 20%);
}

</style>
