<template>
	<view class="content_box">
		<view class="search-input flex_center">
			<u-search searchIconSize="50" searchIconColor="#FFFFFF" placeholderColor='#FFFFFF' color="#FFFFFF"
				:showAction="false" :placeholder="placeholder" v-model="searchValue" @clickIcon="onSearch" @search="onSearch" @clear="onSearch" />
		</view>
		<view class="options">
			<u-radio-group v-model="currentAddressId" placement="column" iconPlacement="right">
				<u-radio :customStyle="{padding: '22rpx 40rpx'}" :size="40" :iconSize="32" :labelSize="32"
					:labelColor="currentAddressId === item.id ? '#2E75E6' : '#262626'"
					v-for="(item, index) in datas" :key="index" :label="item.name" :name="item.id"
					@change="onSelect(item.id)">
				</u-radio>
			</u-radio-group>
		</view>
		<!-- 底部按钮 -->
		<view class="operation-btn flex_sb">
			<button class="backBtn common_btn" @click="onNavBack">返回</button>
			<button class="submitBtn common_btn" @click="onConfirm">确认</button>
		</view>
	</view>
</template>

<script>
	import { searchTransferAddress } from '../../api/apiList'
	export default {
		data() {
			return {
				datas: [], //候选项列表
				placeholder: "请输入搜索地址", //默认提示	
				searchValue: "", //搜索值
				currentAddressId: '', // 当前地址ID

				pageNum: 1, //页码
				pageSize: 20, //每页条数
				loadMore: true, //加载更多
			}
		},
		onLoad(options) {
			const { title, id } = JSON.parse(options.data)
			this.setNavTitle(title)
			this.currentAddressId = id
			this.initData()
		},
		onReachBottom() {
			if (this.loadMore) {
				this.initData();
				this.loadMore = false
			}
		},
		methods: {
			//设置页面头部标题
			setNavTitle(title) {
				uni.setNavigationBarTitle({ title })
			},
			//初始化数据
			initData() {
				const { pageNum, pageSize } = this
				const reqData = {
					args: { pageNum, pageSize }
				}
				if(this.searchValue){
					reqData.args.restrictions = [{
						"field": 'name',
						"type": "LK", //EQ精准匹配，LK模糊匹配
						"value": this.searchValue
					}]
				}
				searchTransferAddress(reqData).then(res => {
					const datas = res.data.data.datas
					if (datas.length) {
						const newData = this.datas.concat(datas)
						this.datas = [...newData]
						this.pageNum += 1
						this.loadMore = true
					}
				})
			},
			onSelect(id) {
				this.currentAddressId = id
			},
			//确认选择
			onConfirm() {
				const app = getApp()
				const { currentAddressId, datas } = this
				if (!currentAddressId) {
					uni.showToast({
						title: `请选择地址`,
						icon: 'none',
						duration: 1500
					})
					return
				}
				const info = datas.find(item => item.id === currentAddressId)
				app.globalData.transferAddress = info
				this.onNavBack()
			},

			// 搜索功能
			onSearch() {
				this.pageNum = 1
				this.datas = []
				this.initData()
			},

			//返回上一级页面
			onNavBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.content_box {
		.search-input {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 999;
			height: 128rpx;
			background: linear-gradient(90deg, #2E75E6 0%, #5E58EE 100%);

			/deep/.u-search__content {
				height: 80rpx;
				margin: 24rpx;
				background-color: rgba(240, 240, 240, .5) !important;

				.u-search__content__input {
					letter-spacing: 4rpx;
					background-color: transparent !important;
				}
				
				.uicon-close{
					font-size: 28rpx !important;
				}
			}
		}

		.u-radio {
			background-color: #fff;
		}
		.options{
			margin: 130rpx 0 15vh;
		}
		.operation-btn{
			position: fixed;
			bottom: 0;
		}
	}
</style>
