<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>
					<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>
					<text class="card__value">{{ form.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="card">
				<view class="card__row">
					<text class="card__label">坡口角度</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ form.GrooveAngle ?? '--' }}</text>
						<text class="card__unit">°</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">组对间隙</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ form.FitupGap ?? '--' }}</text>
						<text class="card__unit">mm</text>
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">错边量</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ form.Misalignment ?? '--' }}</text>
						<text class="card__unit">mm</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 坡口类型选择器 -->
		<u-popup v-model="showGroovePicker" mode="bottom" border-radius="16">
			<view class="picker-panel">
				<view class="picker-panel__header">
					<text class="picker-panel__cancel" @click="showGroovePicker = false">取消</text>
					<text class="picker-panel__title">选择坡口类型</text>
					<text class="picker-panel__confirm" @click="showGroovePicker = false">确定</text>
				</view>
				<scroll-view class="picker-panel__list" scroll-y>
					<view class="picker-option" v-for="(item, idx) in grooveTypeOptions" :key="idx"
						:class="{ 'picker-option--active': pickerSelected === idx }"
						@click="selectGrooveType(idx)">
						<view class="picker-option__main">
							<text class="picker-option__label">{{ item.BaseInfoName }}</text>
							<text class="picker-option__code">{{ item.BaseInfoCode }}</text>
						</view>
						<u-icon v-if="pickerSelected === idx" name="checkmark" :size="28" color="#2979ff" />
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</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 } from '@/api/hj'

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

	const showGroovePicker = ref(false)
	const pickerSelected = ref(-1)
	const grooveTypeOptions = ref([])

	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 = (idx) => {
		pickerSelected.value = idx
		const item = grooveTypeOptions.value[idx]
		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
			}
		} catch (err) {
			console.error('加载焊口数据失败:', err)
			uni.showToast({ title: '加载失败', icon: 'none' })
		} finally {
			uni.hideLoading()
		}
	}
</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;
		}
	}

	// ===== 信息卡片 =====
	.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;
			}

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

		&__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;
			text-align: right;

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

		&__value-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 8rpx;

			&--clickable {
				min-height: 48rpx;
			}
		}

		&__unit {
			font-size: 24rpx;
			color: $text-secondary;
			flex-shrink: 0;
		}
	}

	// ===== 坡口类型选择器弹窗 =====
	.picker-panel {
		padding-bottom: env(safe-area-inset-bottom);

		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			border-bottom: 1rpx solid $border;
		}

		&__cancel,
		&__confirm {
			font-size: 26rpx;
			color: $text-secondary;
			padding: 8rpx;

			&:active {
				opacity: 0.6;
			}
		}

		&__confirm {
			color: $primary;
			font-weight: 600;
		}

		&__title {
			font-size: 28rpx;
			font-weight: 600;
			color: $text;
		}

		&__list {
			max-height: 560rpx;
		}
	}

	.picker-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
		transition: background 0.2s;

		&:active {
			background: #f8f9fa;
		}

		&--active {
			background: $primary-light;
		}

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

		&__label {
			font-size: 28rpx;
			font-weight: 500;
			color: $text;
			display: block;
		}

		&__code {
			font-size: 22rpx;
			color: $text-secondary;
			margin-top: 4rpx;
			display: block;
			font-family: monospace;
		}
	}
</style>
