<template>
	<view class="page-list">
		<!-- 头部过滤区域 -->
		<view class="filter-header">
			<view class="filter-row">
				<!-- 单位工程下拉选择 -->
				<view class="project-select-btn">
					<u-input style="color: #333;" v-model="unitWorkName" :clearable="false" type="select"
						placeholder="请选择单位工程"  @click="handleShowUnitWorkSelect" />
				</view>
				<!-- 刷新按钮 -->
				<view class="refresh-btn" @click="handleRefresh">
					<u-icon name="reload" :size="36" :class="{ rotating: loading }"></u-icon>
				</view>
			</view>
			<!-- 关键字搜索 -->
			<u-search v-model="keyword" :show-action="false" shape="round" bg-color="#f5f6f8" />
		</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 filteredList" :key="item.id || index" class="list-item"
					@click="handleItemClick(item)">
					<text class="item-index">{{ index + 1 }}</text>
					<text class="item-title">{{ item.PointBatchCode || '--' }}</text>
					<u-icon name="arrow-right" :size="28" color="#ccc"></u-icon>
				</view>

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

		<!-- 单位工程选择弹窗 -->
		<nbd-select v-model="showUnitWorkSelect" :show-search="true" title="请选择单位工程" :list="unitWorkList"
			label-key="BaseInfoName"  v-model:model="selectedUnitWork" value-key="BaseInfoId" @confirm="handleUnitWorkConfirm" />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		reqProjectWorkArea
	} from '@/api/base.js'
	import {
		reqGetNotEndPointBatch
	} from '@/api/hj.js'
	import {
		useUserStore
	} from '@/store'
	import {
		storeToRefs
	} from 'pinia'

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

	const keyword = ref('')

	// ===== 单位工程选择 =====
	const showUnitWorkSelect = ref(false)
	const selectedUnitWork = ref(null)
	const unitWorkName = computed(() => selectedUnitWork.value?.BaseInfoName || '')
	const unitWorkList = ref([])

	const handleShowUnitWorkSelect = () => {
		reqProjectWorkArea(currentProject.value.ProjectId).then(res => {
			unitWorkList.value = res.data || []
			showUnitWorkSelect.value = true
		})
	}

	const handleUnitWorkConfirm = (item) => {
		selectedUnitWork.value = item
		showUnitWorkSelect.value = false
		handleRefresh()
	}

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

	// 关键字过滤
	const filteredList = computed(() => {
		if (!keyword.value) return listData.value
		const kw = keyword.value.toLowerCase()
		return listData.value.filter(item =>
			String(item.PointBatchCode || '').toLowerCase().includes(kw)
		)
	})

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

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

	const handleRefresh = () => {
		listData.value = []
		fetchData()
	}

	const handleItemClick = (item) => {
		uni.navigateTo({
			url: `/pipe/diankou/port_list?id=${item.PointBatchId}&code=${item.PointBatchCode}`
		})
	}

</script>
