<template>
	<view>
		<uni-popup ref="backPopupRef" type="bottom" >
			<view class="bank-body">
				
				<scroll-view class="bank-list" scroll-y="true">
					<view class="item" v-for="(item, index) in props.bankList" @click="selectHandle(index)">{{ item[props.field] }}</view>
				</scroll-view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup> 
import { ref, reactive, watch } from 'vue'	

const props = defineProps({
	bankList: {type: Array, default: () => []},
	field: { type: String, default: 'bank_branch_name' }, // 默认渲染的字段
})

const backPopupRef = ref()

// 开启与关闭弹窗 供父组件调用
const open = () => backPopupRef.value.open()
const close = () => backPopupRef.value.close()

const emit = defineEmits(['bankBranchInfo'])

// 向父组件传递已选信息
const selectHandle = index => {
	emit('bankBranckInfo', props.bankList[index])
	close()
}

defineExpose({ open, close })

</script>

<style scoped lang="scss"> 
.bank-body {
	width: 100%;
	height: 70vh;
	background-color: #fff;
	border-top-right-radius: 20rpx;
	border-top-left-radius: 20rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	position: relative;
}
.search {
	width: calc(100% - 80rpx);
	position: absolute;
	top: 20rpx;
	left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 10rpx;
	padding: 5rpx 10rpx;
	input {
		flex-grow: 1;
		margin-right: 20rpx;
	}
	.btn {
		padding: 10rpx 30rpx;
		text-align: center;
		color:#fff;
		background: #0041c4;
	}
}

.bank-list {
	padding-top: 80rpx;
	overflow: scroll;
	height: 90%;
	.item {
		padding: 10rpx 0;
	}
}
</style>