<template>
  <uv-popup ref="popup" mode="bottom" custom-style="height: 580rpx;">
    <view class="pickerTitle">
      <view @tap="pickerCancel" style="color: #888;padding: 0 30rpx;">取消</view>
      <!--  @change="handleSearch" -->
      <uv-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="handleSearch" @clickIcon="handleSearch" />
      <view @tap="pickerConfirm" style="color: #007aff;padding: 0 30rpx;">确定</view>
    </view>
    <picker-view :value="pickerIndex" @change="onPickerChange">
      <picker-view-column>
        <view v-for="(item, index) in filteredOptions" :key="index" class="picker-item">
          {{ item[props.nodeKey] }}
        </view>
      </picker-view-column>
    </picker-view>
  </uv-popup>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
const props = defineProps({
  // 带默认值的数字
  nodeKey: {
    type: String,
    default: "label",        // 默认值
  },
  // 自定义验证函数
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
});

const filteredOptions = computed(() => {
  if (!keyword.value.trim()) {
    return [...props.options];
  }
  
  return props.options.filter(item => 
    item[props.nodeKey].includes(keyword.value)
  );
  // console.log('options 变化:', props.options);
  // return [...props.options]; // 可以添加过滤逻辑
});
const emits = defineEmits(['confirm']);

// 打开弹窗
const popup = ref(null)
const open = () => {
  popup.value.open()
}

const pickerIndex = ref([0]);
const keyword = ref("")

// 选择器值变化
const onPickerChange = (e) => {
  
  pickerIndex.value = e.detail.value;
};
// 处理搜索
const handleSearch = () => {
  // if (!keyword.value) {
  //   filteredOptions.value = [...props.options];
  //   return;
  // }
  // filteredOptions.value = props.options.filter(item =>
  //   item[props.nodeKey].includes(keyword.value)
  // );
};
// 关闭弹窗
const pickerCancel = () => {
  popup.value.close()
}
// 确定弹窗
const pickerConfirm = () => {
  const selectedIndex = pickerIndex.value[0];
  emits('confirm', filteredOptions.value[selectedIndex]);
  popup.value.close()
}

// 显式暴露方法给父组件
defineExpose({
  open,
});



</script>

<style scoped>
.pickerTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  border-bottom: 1rpx solid #e5e5e5;

  view {
    padding: 0 28rpx;
    font-size: 34rpx;
  }
}

picker-view {
  height: 100%;
  /* 让 picker-view 填充父容器 */
}

.picker-item {
  line-height: var(--picker-view-column-indicator-height);
  text-align: center;
}
</style>