<template>
  <view class="search-container">
    <!-- 输入框 -->
    <view class="inputBox">
    	<input
    	  class="search-input"
    	  v-model="searchText"
    	  @input="handleInput"
    	  @focus="showDropdown = true"
    	  style="text-align: right;"
    	  :disabled="isClick"
    	  placeholder="请选择开户行"
    	/>
		<text @click="openDropdown" class="iconfont icon-youjiantou iconStyle"></text>
    	
    </view>
    <!-- 下拉框 -->
    <view v-if="showDropdown" class="dropdown">
		<view class="cancle" @click="showDropdown = false">
			取消
		</view>
      <scroll-view scroll-y class="dropdown-list" :style="{ maxHeight: dropdownMaxHeight }">
        <view
          v-for="(item, index) in displayedList"
          :key="index"
          class="dropdown-item"
          @click="handleSelect(item)"
        >
          {{ item.label }}
        </view>
        <!-- 无数据提示 -->
        <view v-if="displayedList.length === 0" class="empty">无匹配结果</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 后端返回的全部数据（格式：[{ label: '名称', value: 'id' }, ...]）
    allData: {
      type: Array,
      default: () => [],
    },
	isClick: {
	  type: Boolean,
	  default: false,
	},
	nowBank: {
	  type: String,
	  default: '',
	},
  },
  data() {
    return {
      searchText: '',      // 输入框内容
      showDropdown: false, // 控制下拉显示
      displayedList: [],   // 当前展示的数据
      dropdownMaxHeight: '500rpx', // 下拉框最大高度
    };
  },
  methods: {
	  openDropdown(){
		  if(this.isClick) return
		  this.showDropdown = true
	  },
    // 输入处理（含防抖）
    handleInput() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.filterData();
      }, 300);
    },
    // 过滤数据
    filterData() {
      const keyword = this.searchText.trim().toLowerCase();
      if (!keyword) {
        // 无关键词时显示前10条
        this.displayedList = this.allData.slice(0, 10);
      } else {
        // 有关键词时过滤全部数据
        this.displayedList = this.allData.filter(item =>
          item.label.toLowerCase().includes(keyword)
        );
      }
    },
    // 选择项
    handleSelect(item) {
      this.searchText = item.label;
      this.showDropdown = false;
      this.$emit('select', item); // 向父组件传递选中项
	   
    },
  },
  mounted() {
	  if(this.allData[0].show){
		    this.searchText = this.allData[0].label;
	  }
	  if(this.nowBank&&this.allData.filter(item=>item.label==this.nowBank).length>0) this.searchText = this.nowBank
    // 初始展示前10条
    this.displayedList = this.allData.slice(0, 8);
	
  },
};
</script>


<style lang="scss" scoped>
.search-container {
  position: relative;
  width: 100%; /* 按需调整宽度 */
  box-sizing: border-box;
  padding-right: 0rpx;
}
.inputBox{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.search-input {
  width: 100%;
  font-size: 28rpx;
}

.dropdown {
  position: absolute;
  width: 100%;
  margin-top: 10rpx;
  background: #ffffff;
  // border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
  .cancle{
	  height: 60rpx;
	  box-sizing: border-box;
	  padding-right: 30rpx;
	  background-color: rgba(235, 239, 247, .8);
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
  }
}

.dropdown-list {
  width: 100%;
}

.dropdown-item {
  padding: 24rpx 20rpx;
  font-size: 28rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.empty {
  padding: 24rpx;
  color: #999;
  text-align: center;
}
</style>