<template>
	<view class="page-detail">
		<!-- 信息表单 -->
		<view class="info-group">
			<view class="info-item">
				<text class="info-label">包装编号</text>
				<text class="info-value">{{ form.PackagingCode || '保存后显示' }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">货物类型</text>
				<text class="info-value">{{ form.TypeName || '预制组件' }}</text>
			</view>
			<view class="info-item">
				<text class="info-label"><text class="required">*</text>预制工作包</text>
				<u-input v-model="form.StackingPosition" placeholder="工作包 XX+ 工作包 XX" />
			</view>
			<view class="info-item">
				<text class="info-label"><text class="required">*</text>包装分类</text>
				<u-input v-model="form.CategoryName" :clearable="false" type="select" placeholder="请选择" @click="handleShowCategory" />
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<u-button class="btn-submit" size="medium" type="primary" @click="handleSave">保存</u-button>
		</view>

		<!-- 包装分类选择弹窗 -->
		<nbd-select v-model="showCategory" v-model:model="selectedCategory" title="选择包装分类" :list="categoryList" label-key="label" value-key="value"
			@confirm="handleCategoryConfirm" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useUserStore
	} from '@/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reqPackagingNumberByProjectId,
		reqPackagingManage,
		reqSavePackaging
	} from '@/api/hj.js'

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

	// ===== 表单数据 =====
	const form = ref({
		PackagingCode: '',
		TypeName: '预制组件',
		TypeInt: 10,
		CategoryName: '',
		CategoryInt: '',
		StackingPosition: ''
	})

	// ===== 弹窗 =====
	const showCategory = ref(false)
	const categoryList = ref([])
	const selectedCategory = ref({ label: '', value: '' })

	// ===== 选择事件 =====
	const handleShowCategory = () => {
		// 同步当前选中的值
		if (form.value.CategoryName) {
			selectedCategory.value = {
				label: form.value.CategoryName,
				value: form.value.CategoryInt
			}
		}
		showCategory.value = true
	}

	const handleCategoryConfirm = (item) => {
		form.value.CategoryName = item.label
		form.value.CategoryInt = item.value
		selectedCategory.value = item
		showCategory.value = false
	}

	// ===== 获取包装分类 =====
	const getCategoryList = async () => {
		try {
			const res = await reqPackagingManage()
			categoryList.value = Object.entries(res.data || {}).map(([label, value]) => ({ label, value }))
			// 设置默认值为第一个
			if (categoryList.value.length > 0 && !form.value.CategoryName) {
				form.value.CategoryName = categoryList.value[0].label
				form.value.CategoryInt = categoryList.value[0].value
			}
		} catch (error) {
			console.error('获取包装分类失败:', error)
		}
	}

	// ===== 保存 =====
	const handleSave = async () => {
		if (!form.value.StackingPosition) {
			uni.showToast({
				title: '请输入预制工作包',
				icon: 'none'
			})
			return
		}
		if (!form.value.CategoryInt) {
			uni.showToast({
				title: '请选择包装分类',
				icon: 'none'
			})
			return
		}

		try {
			const res = await reqSavePackaging({
				projectId: currentProject.value?.ProjectId,
				PackagingCode: form.value.PackagingCode,
				CategoryInt: form.value.CategoryInt,
				TypeInt: form.value.TypeInt,
				StackingPosition: form.value.StackingPosition,
				State: 0
			})

			if (res.code === 1 || res.data) {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pipe/packaging/detail?id'+res.data.id
					})
				}, 1500)
			}
		} catch (error) {
			console.error('保存失败:', error)
			uni.showToast({
				title: '保存失败，请重试',
				icon: 'none'
			})
		}
	}

	// ===== 获取包装编号 =====
	const getPackagingNo = async () => {
		try {
			const res = await reqPackagingNumberByProjectId(currentProject.value?.ProjectId)
			form.value.PackagingCode = res.data
		} catch (error) {
			console.error('获取包装编号失败:', error)
		}
	}

	// ===== 生命周期 =====
	onShow(() => {
		getPackagingNo()
		getCategoryList()
	})
</script>
