<template>
	<view>
		<view class="titelc">
			<u-row gutter="10" justify="space-between">
				<u-col span="3">
					<view class="d-layout bg-purple" @click="toSelCity">
						<u-icon name="map"></u-icon><text style="margin-left: 20rpx;">{{selectCity.cityNm}}</text>
					</view>
				</u-col>
				<u-col span="9">
					<view class="d-layout bg-purple-light">
						<u-search placeholder="输入银行名" v-model="searchName" :show-action="false" shape="shape"
							@search="queryBank"></u-search>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-gap height="5" bg-color="#C6C6C6"></u-gap>
		<u-row gutter="10" justify="space-between" v-if="bankList.length">
			<u-cell-group>
				<u-cell v-for="(item,index) in bankList" :title="item.bankName" :arrow="false"
					@click="selectBank(item)"></u-cell>
			</u-cell-group>
		</u-row>
		<view class="" v-if='!bankList.length&&selectCity.cityNm=="请选择"' style="padding:250px 20px 20px"
			@click="toSelCity">
			<u-button type="primary" :plain="true" text="请先点击查看开户城市"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		bank_code
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				showCityPick: false,
				pickerShow: false,
				selectCity: {
					cityNm: "请选择",
				},
				curCity: null,
				searchName: "",
				params: {
					province: true,
					city: true,
					area: false
				},
				bankList: []
			}
		},
		methods: {
			toSelCity() {
				var that = this
				this.$u.route('pages/index/sel-city/sel-city')
				uni.$once("queryAreas", function(data) {
					if (JSON.stringify(data) !== "{}") {
						that.selectCity = data
					}
				})
			},

			queryBank() {
				bank_code({
					city_code: this.selectCity.city_code,
					open_bank_name: this.searchName
				}).then(res => {
					if (res.code !== 200) {
						this.$u.toast(res.msg)
						return
					}
					this.bankList = res.data
				})
			},

			selectBank(data) {
				// data["city_code"] = this.curCity.cityCd
				const bankdata = {
					...data,
					stand_by_bank_province: this.selectCity.stand_by_bank_province,
					stand_by_bank_city: this.selectCity.stand_by_bank_city
				}
				uni.$emit("querBank", bankdata)
				this.$u.route({
					type: 'navigateBack',
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.titelc {
		height: 80rpx;
		margin-right: 30rpx;
		padding-bottom: 100rpx;
	}

	.d-layout {
		height: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;
		text-align: center;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>