<script lang="ts" setup>
import { getOperatoringListAPI } from '@/api/warehouse'

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['back', 'change'])
const selectValue = ref<any>('')
const filteredList = ref<any[]>([])// 过滤后的结果
const Orginlist = ref<any>([])
const siteValue = ref<any>('')
function goBack() {
  emits('back')
}

function handleItemClick(item: any) {
  emits('change', item)
}

// 获取列表
async function getOperatoringList() {
  try {
    const res: any = await getOperatoringListAPI()
    console.log(res)
    if (res) {
      Orginlist.value = res
      filteredList.value = [...Orginlist.value]
    }
  }
  catch (error) {
    console.error(error)
  }
}

// 🔧 防抖函数
function debounce<T extends (...args: any[]) => any>(
  func: T,
  wait: number,
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout | null = null
  return (...args: Parameters<T>) => {
    if (timeout)
      clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

// 🔍 执行搜索逻辑
function doSearch(keyword: string) {
  const kw = keyword.trim()
  if (!kw) {
    filteredList.value = [...Orginlist.value]
    return
  }

  const lowerKeyword = kw.toLowerCase()
  filteredList.value = Orginlist.value.filter(item =>
    item.siteName.toLowerCase().includes(lowerKeyword),
  )
}

// 🕒 防抖后的搜索函数（300ms 延迟）
const debouncedSearch = debounce(doSearch, 300)

// 👀 监听输入变化
watch(selectValue, (newVal) => {
  debouncedSearch(newVal)
})

watch(() => props.value, (val) => {
  siteValue.value = val
})

onMounted(() => {
  getOperatoringList()
})
</script>

<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="nav_bar">
      <uv-icon name="arrow-left" color="#010407" size="24" style="margin-right: 50rpx;" @click="goBack" />
      <uv-input
        v-model="selectValue"
        placeholder="请选择站点"
        border="none"
      >
        <template #suffix>
          <uv-icon name="search" color="#010407" size="22" />
        </template>
      </uv-input>
    </view>
    <!-- 分割栏 -->
    <view class="division" />
    <!-- 列表 -->
    <scroll-view scroll-y class="list_bar">
      <view
        v-for="(item, index) in filteredList"
        :key="index"
        class="list_item"
        @click="handleItemClick(item)"
      >
        <view class="icon">
          P
        </view>
        <view class="info_bar">
          <view class="title">
            {{ item.siteName }}
          </view>
          <view class="address">
            {{ item.siteName }}
          </view>
        </view>
        <view
          v-if="siteValue === item.siteName"
          class="select_icon"
        >
          <uv-icon name="checkmark" color="#ffffff" size="14" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .nav_bar {
    width: calc(100% - 40rpx);
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .division {
    width: 100%;
    height: 30rpx;
    background-color: #f2f2f2;
  }

  .list_bar {
    height: calc(100vh - 160rpx);
    overflow-y: auto;

    .list_item {
      position: relative;
      left: 20rpx;
      width: calc(100% - 40rpx);
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      border-bottom: 3rpx solid #ececec;
      padding: 20rpx 0;

      .icon {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e46169;
        color: white;
        font-weight: bold;
        font-size: 30rpx;
        border-radius: 15rpx;
      }

      .select_icon {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background-color: #0e82ff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .info_bar {
        width: calc(100% - 130rpx);
        margin: 0 15rpx;

        .title {
          font-size: 30rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .address {
          font-size: 28rpx;
          color: #b9b9b9;
        }
      }
    }
  }
}
</style>
