<template>
    <view class="container">
        <!-- 搜索框 -->
        <view class="search-area">
            <u-search v-model="searchText" placeholder="请输入仓库名称" :show-action="false" :clearabled="true"
                @change="onSearch" height="40"></u-search>
        </view>

        <!-- 仓库列表 -->
        <view class="warehouse-list">
            <view v-for="(item, index) in filteredWarehouses" :key="index" class="warehouse-item"
                hover-class="warehouse-item-hover" @click="selectWarehouse(item)">
                <text>{{ index + 1 }}.{{ item.name }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索文本
const searchText = ref('')

// 仓库列表数据
const warehouses = ref([
    { id: 1, name: '河南仓' },
    { id: 2, name: '河北仓' },
    { id: 3, name: '山东仓' }
])

// 过滤后的仓库列表
const filteredWarehouses = computed(() => {
    if (!searchText.value) return warehouses.value
    return warehouses.value.filter(item =>
        item.name.toLowerCase().includes(searchText.value.toLowerCase())
    )
})

// 搜索处理
const onSearch = () => {
    // 实现搜索逻辑
}

// 选择仓库
const selectWarehouse = (item) => {
    // 使用事件总线传递数据
    uni.$emit('updateWarehouse', item.name)

    // 返回上一页
    uni.navigateBack()
}
</script>

<style scoped>
.warehouse-list {
    margin-top: 12px;
}

.warehouse-item {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 1px;
    font-size: 14px;
}
</style>