<template>
	<view>
		<view class="test">
			<u-sticky>
				<view class="headerc">
					<view class="searchc">
						<u-search placeholder="输入地区市名" v-model="serachV" :show-action="false" shape="shape"
							@search="searchCity"></u-search>
					</view>
					<u-gap height="5" bg-color="#C6C6C6"></u-gap>
					<view class="gpsc" v-if="currentList.length">
						<view class="gpsc-str">{{currentSelStr}}</view>
						<view class="gpsc-btn">
							<u-button :ripple="true" :plain="true" type="primary" text="确认"
								:custom-style="{width:'100rpx',height:'60rpx',fontSize:'26rpx'}" @click="confirm">
							</u-button>
						</view>
						<view class="gpsc-btns"></view>
					</view>
				</view>
			</u-sticky>
		</view>
		<view class="hisC">
			<u-cell-group>
				<u-cell v-for="(item,index) in currentList" :title="item.cityNm" @click="select(item)">
				</u-cell>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		areas
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				currentList: [],
				currentSelStr: "请选择",
				currentSel: {},
				serachV: "",
				areaCode: '', //所选城市code
				stand_by_bank_province:'',//备用结算账户银行开户行省代码
				stand_by_bank_city:'',//备用结算账户银行开户行市代码
			}
		},

		onLoad() {},

		watch: {
			'currentSel': {
				handler: function(n, o) {
					this.currentSelStr = (this.currentSel.provice?.cityNm || '') + (this.currentSel.city?.cityNm ||
						'') + (this.currentSel.area?.cityNm || '')
				},
				deep: true
			}
		},

		methods: {
			selCity(city_name, area_level) {
				areas({
					city_name,
					area_level
				}).then(res => {
					if (res.code !== 200) {
						this.$u.toast(res.msg)
						return
					}
					this.currentList = res.data
				})
			},
			select(v) {
				this.currentSelStr = v.cityNm
				this.areaCode = v.cityCd
				this.stand_by_bank_province=v.parentCityCd
				this.stand_by_bank_city=v.cityCd
				// const keys = {
				// 	"1":"provice",
				// 	"2":"city",
				// 	"3":"area"
				// }
				// if(v.areaLevel !== '3'){
				// 	this.selCity(v.cityNm,v.cityCd)
				// 	//查询是否有上级，有上级获取上级
				// 	let isHasParent = (typeof v.parentCityCd !== 'undefined')
				// 	//获取上级
				// 	Vue.set(this.currentSel,keys[v.areaLevel],v)

				// 	if (isHasParent){
				// 		areas({
				// 			cityCd:v.parentCityCd
				// 		}).then(res=>{
				// 			let d = res.data[0]
				// 			Vue.set(this.currentSel,keys[d.areaLevel],d)
				// 		})
				// 	}
				// }else{
				// 	this.currentSel.area = v
				// 	areas({
				// 		cityCd:v.parentCityCd
				// 	}).then(res=>{
				// 		let d = res.data[0]
				// 		Vue.set(this.currentSel,keys[d.areaLevel],d)
				// 		if (typeof d.parentCityCd !== 'undefined'){
				// 			areas({
				// 				cityCd:d.parentCityCd
				// 			}).then(res=>{
				// 				let e = res.data[0]
				// 				Vue.set(this.currentSel,keys[e.areaLevel],e)
				// 			})
				// 		}
				// 	})
				// }
			},
			searchCity() {
				this.selCity(this.serachV, "2")
			},

			confirm() {
				const a = {
					cityNm: this.currentSelStr,
					city_code: this.areaCode,
					stand_by_bank_province:this.stand_by_bank_province,
					stand_by_bank_city:this.stand_by_bank_city
				}
				uni.$emit("queryAreas", a)
				this.$u.route({
					type: 'navigateBack',
				})
			}
		}
	}
</script>

<style lang="scss">
	.headerc {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background: #ffffff;
	}

	.searchc {
		height: 80rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.gpsc {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 30rpx;
		background-color: aliceblue;
		margin-top: 20rpx;

		.gpsc-str {
			float: left;
		}

		.gpsc-btn {
			float: right;
			margin-right: 50rpx;
			margin-top: 10rpx;
		}
	}

	.hisC {
		padding-right: 30rpx;
	}

	.test {
		background-color: red;
	}
</style>