<template>
  <view>
    <view @tap.stop="open">11111</view>
    <nut-popup v-model:visible="show" position="bottom" round="true">
      <view style="height: 1031rpx">
        <view class="uiwu-picker-search">
          <view class="uiwu-picker-search-btn uiwu-flex uiwu-flex-space">
            <text @tap.stop="show = false">取消</text>
            <text @tap.stop="determine">确定</text>
          </view>
          <view class="uiwu-picker-search-input uiwu-flex uiwu-flex-align">
            <input v-model="inputText.value" type="text" :placeholder="placeholder" confirm-type="search" @confirm="confirm_" />
            <view @click.stop="confirm" class="searchButton">搜索</view>
          </view>
          <scroll-view class="scroll-view" scroll-y>
            <!-- <radio-group class="radio-group" @change="change">
              <view class="radio-group-item uiwu-flex uiwu-flex-space" v-for="(item, index) in listData.value" :key="index">
                <text>{{ item.bank_name }}</text>
                <radio :value="item.bank_name" color="#687CFF" />
              </view>
            </radio-group> -->
          </scroll-view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup>
import './picker-search.scss'
import { ref, expose } from 'vue'
// import { searchBankName } from '@/api/app'

const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入银行名称',
  },
})

// 定义响应式变量
const show = ref(true)
const listData = ref([])
const currentBankName = ref('')
const inputText = ref('')

// 搜索方法
const confirm = () => {
  // searchBankName({ bank_name: inputText.value.trim() }).then((res) => {
  //   console.log('searchBankName', res)
  //   listData.value = res.data
  // })
}

// 输入确认方法
const confirm_ = ({ detail: { value } }) => {
  console.log('confirm', value)
  // searchBankName({ bank_name: value.trim() }).then((res) => {
  //   console.log('searchBankName', res)
  //   listData.value = res.data
  // })
}

// 单选框切换方法
const change = ({ detail: { value } }) => {
  console.log('change', value)
  currentBankName.value = value
}

// 确定方法
const determine = () => {
  if (currentBankName.value.trim() === '') {
    uni.showToast({
      title: '请选择银行',
      duration: 1500,
      icon: 'error',
    })
    return
  }
  // 触发父组件的事件，传递选择的银行名称
  emit('change', currentBankName.value.trim())
  show.value = false
}

// 打开弹窗
const open = () => {
  show.value = true
}
// expose({ open })
</script>
