<template>
	<view>
		<uni-popup ref="publicPopup" @maskClick="closeEd()">
			<view class="store-body">
				<view >
					<view style="height: 20rpx"></view>
					<view class="search">
						<input type="text" v-model="params.bankName" placeholder="请搜索银行名称" />
						<view @click.stop="searchHandle()">搜索</view>
					</view>
				</view>
				
				<scroll-view style="height: 800rpx;" scroll-y="true" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
					<view class="jee-list hide-border">
						<view class="jee-list-item " v-for="(item, index) in data.dataList" @click.stop="onClick(item, index)" :key="index">
							<view class="jee-list-left">{{ item.bank_alias }}</view>
							<view class="jee-list-right">
								<image v-if="index == data.index" src="@/static/img/select-radio.svg" mode=""></image>
								<image v-else src="@/static/img/un-raido.svg" />
							</view>
						</view>
						<jeepayListNull :list="data.dataList"></jeepayListNull>
					</view>
					<view class="tip-text" v-if="data.dataList.length >0">{{ data.tipText }}</view>
				</scroll-view>
			</view>
		</uni-popup>		
	</view>
</template>
<script setup>
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull.vue'
import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import useBackPress from '@/hooks/useBackPress.js'
import { $bankCode } from '@/http/apiManager.js'

const emit = defineEmits(['bankInfo'])

const props = defineProps({
	ifCode: ''
})

const data = reactive({
	dataList: [],
	index: -1,
	tipText: '上拉加载更多',
	isLoad: false // 是否为上拉加载
})

const publicPopup = ref(null);

// 请求参数
let params = {
	settAccountType: '',
	bankName: '',
	pageSize: 50,
	pageNumber: 1,
}

const closeEd = () => {
	publicPopup.value.close()
	// #ifdef H5 || APP-PLUS
	 inactive()
	// #endif
}

// #ifdef H5 || APP-PLUS
const { active, inactive } = useBackPress(closeEd)  // onBackPress 阻断返回
// #endif

const openHandle = type => {
	// #ifdef H5 || APP-PLUS
		active()
	// #endif
	params.settAccountType = type
	publicPopup.value.open('bottom')
	// 每次一打开，请求参数重置params
	params.pageNumber = 1
	getList() // 请求列表数据
}

defineExpose({ openHandle })

const getList = () => {
	data.tipText = '加载中';

	$bankCode(props.ifCode ,params).then(({ bizData }) => {

		data.titlePage = Math.ceil(bizData.total / params.pageSize); // 总页数

		data.titlePage == params.pageNumber && data.titlePage != 1 ? (data.tipText = '暂无更多') : false;

		if (bizData.records) data.tipText = '暂无更多';

		if (data.isLoad) {
			data.dataList.push(...bizData.records);
		} else {
			data.dataList = bizData.records;
		}

	})
}

// 搜索按钮
const searchHandle = () => {
	params.pageNumber = 1
	data.isLoad = false
	getList() 
}

// 滚动到顶部 下拉刷新
const scrolltoupper = () => {
	data.isLoad = false
	params.pageNumber = 1
	getList()
}

// 滚动到底部  上拉加载
const scrolltolower = () => {
	params.pageNumber++;
	if (params.pageNumber > data.titlePage) {
		params.pageNumber = params.pageNumber;
		return data.isLoad = false
	}
	data.isLoad = true;
	getList()
}

// 选择完毕后，将所有的信息抛出 由父组件接收
const onClick = (info, index) => {
	data.index = index
	emit('bankInfo', info)
	closeEd()
}
</script>

<style scoped lang="scss">
.store-body {
	background-color: #fff;
	height: 900rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}
.active {
	background-color: #5476f1;
}
.search {
	height: 80rpx;
	background: #f5f6f7;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	border-radius: $uni-border-radius-base;
	margin: 0 20rpx;
	padding: 0 20rpx;
	input {
		width: 80%;
	}
	view {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 5rpx;
		color: #175be6;
		background: #fff;
	}
}
.jee-list {
	image {
		width: 40rpx;
		height: 40rpx;
	}
	.jee-list-item {
		&::after {
			width: calc(100% - 70rpx);
		}
	}
}
.tip-text {
	margin: 31rpx 54rpx;
	color: #ccc;
	text-align: center;
}
.btns {
	padding: 0 30rpx 120rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	& > view {
		padding: 24rpx 0;
		text-align: center;
		border-radius: $uni-border-radius-base;
		font-size: 30rpx;
	}
	.cancel {
		width: 270rpx;
		color: #808080;
		margin-right: 30rpx;
		box-shadow: #c5c7cc 0px 0px 1px;
	}
	.confirm {
		flex-grow: 1;
		background: #3981FF;
		color: #fff;
	}
}
</style>
