<template>
  <uni-popup ref="popup" type="bottom">
    <view class="list-wrapper">
      <view class="search-input">
        <input
          focus
          v-model="searchText"
          placeholder="请输入银行名称"
          @input="filerBank"
        />
      </view>
      <view class="list-mian">
        <view
          class="list-item"
          v-for="v in filerBank()"
          :key="v[key]"
          @tap="choice(v)"
        >
          {{ v[value] }}
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  key: {
    type: String,
  },
  value: {
    type: String,
  },
  list: {
    type: Array,
  },
});
const emits = defineEmits(["choiceValue"]);
const popup = ref();
const open = () => {
  popup.value.open();
};
const searchText = ref("");
const filerBank = () => {
  return props.list.filter((v) => v[props.value].includes(searchText.value));
};
const choice = (val) => {
  emits("choiceValue", val);
  popup.value.close();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.list-wrapper {
  display: flex;
  flex-direction: column;
  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;
  max-height: 1000rpx;
  padding: 30rpx;
  .search-input {
    input {
      border-bottom: 1px solid #ccc;
      text-indent: 1rem;
      padding: 10rpx 0;
    }
  }
  .list-mian {
    flex: 1;
    overflow-y: scroll;
    margin-top: 20rpx;
    .list-item {
      margin: 10rpx 0;
      padding: 10rpx;
      font-size: 28rpx;
    }
  }
}
</style>
