<template>
	<view>
		<view style="position: sticky;top: 0;background-color: #FE9039;">
			<view class="search-container">
				<!-- 搜索框 -->
				<view class="search-container-bar">
					<!-- :cancelText="keyBoardPopup ? '取消' : '搜索'" -->
					<uni-search-bar ref="searchBar" style="flex:1;margin-left: 20rpx;" radius="100"
						v-model="associativeText" :focus="focus" :placeholder="hotWorld" clearButton="auto"
						cancelButton="none" @clear="clear" />
					<view v-if="stringIsNotEmpty(associativeText) && associativeText!=page.key" @click="search"
						style="margin-right: 10px;font-size: 13px; color: #FED6B5;">搜索</view>
				</view>
			</view>
			<view class="search-body">
				<view
					style="font-size: 26rpx;padding-left: 50rpx;padding-right: 40rpx;padding-top: 10rpx;padding-bottom: 20rpx;color: #FED6B5;">
					输入关键字筛选提货点
				</view>
			</view>
		</view>


		<loading-state ref="pageView" @request="request">
			<!-- 搜索联想 -->
			<view style="display: flex;flex-direction: column;background: #FFFFFF; 
				border-top-left-radius: 30px;border-top-right-radius: 30px; padding:10px 20px;margin-top: 10px;box-sizing: border-box;padding-bottom: 0px;"
				v-for="(item,index) in dataList" :key="index">
				<!-- 
				<view
					style="display: flex;flex-direction: row;width: 100%;box-sizing: border-box;width: 100%;margin-top:10rpx ;align-items: center;">
					<image src="../static/address_name.png" style="width: 50rpx;height: 50rpx;flex-shrink: 0;">
					</image>
					<text
						style="font-size: 31.5rpx;margin-left: 18rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}}
					</text>
				</view>

				<text
					style="font-size: 24rpx;color: #999999;margin-top: 6rpx;box-sizing: border-box;width: 100%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">营业时间：{{item.businessHours}}</text>

				<view style="display: flex;flex-direction: row;margin-top: 22rpx;">
					<image v-if="false"
						style="width: 120rpx;height: 120rpx;border-radius: 20rpx;flex-shrink: 0;background-color: #fafafa;">
					</image>
					<view style="display: flex;flex: 1;flex-direction: column;margin-left: 20rpx;margin-top: 10rpx;">
						<view style="display: flex;flex-direction: row;">
							<image src="../static/address_location.png"
								style="width: 16px;height: 16px;flex-shrink: 0;margin-right: 3px;">
							</image>
							<view style="color: #666666;font-size: 29.5rpx;">{{item.address}}
							</view>
						</view>
						<view style="display: flex;flex-direction: row;margin-top: 22rpx;">
							<image src="../static/address_phone.png"
								style="width: 16px;height: 16px;margin-right: 3px;flex-shrink: 0;">
							</image>
							<view style="color: #5259D7;font-size: 29.5rpx;">{{item.phone}}</view>
						</view>
					</view>
				</view>


				<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid;">
					<view style="flex: 1;"></view>

					<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;"
						@click.stop="phone(item.phone)">
						<image src="../static/address_phone2.png" style="width: 18px;height: 18px;"></image>
						<view style="font-size: 13px;margin-left: 6px;">电话</view>
					</view>
					<view class="btn" style="flex-shrink: 0;font-size: 30rpx;color: #191919;"
						@click.stop="confirm(item)">
						<image src="../static/address_confirm.png" style="width: 18px;height: 18px;"></image>
						<view style="font-size: 13px;margin-left: 6px;">确定</view>
					</view>
				</view> -->

				<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: 333;">{{item.name}}</text>

				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
					<image src="https://supervise.yxtsoft.com/lpk/image/date.png" style="width: 20px;height: 20px;">
					</image>
					<text style="margin-left: 5px;font-size: 12px; color: #999;">营业时间：{{item.businessHours}}</text>
				</view>

				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
					<image src="https://supervise.yxtsoft.com/lpk/image/location.png" style="width: 20px;height: 20px;">
					</image>
					<text style="margin-left: 5px;font-size: 12px; color: #999;flex: 1;">门店地址：{{item.address}}</text>
					<image src="https://supervise.yxtsoft.com/lpk/image/navigation.png"
						style="width: 20px;height: 20px; margin-right: 20px;"></image>
				</view>
				
				<view style="display: flex;flex-direction: row;margin-top: 38rpx;border-top: 1rpx #f1f2f3 solid; justify-content: space-between;
				padding-left: 30px;padding-right:30px;">
				
					<view class="btn" @click.stop="phone(item.phone)">
						<image src="https://supervise.yxtsoft.com/lpk/image/phone.png" style="width: 20px;height: 20px;">
						</image>
						<text style="margin-left: 5px;font-size: 14px; color: #666;">电话咨询</text>
					</view>
					
					<view class="btn" @click.stop="confirm(item)">
						<image src="https://supervise.yxtsoft.com/lpk/image/user.png" style="width: 20px;height: 20px;">
						</image>
						<text style="margin-left: 5px;font-size: 14px; color: #666;">预约自提</text>
					</view>
					
				</view> 

			</view>

		</loading-state>
		<view style="height: 20px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					key: ''
				},
				associativeText: '',
				hotWorld: '请输入', //	搜索热词，如果没有输入即回车，则搜索热词，但是不会加入搜索记录
				focus: true, //	是否自动聚焦
				dataList: []
			}
		},
		created() {
			// 首次请求
			this.request()

			// #ifdef APP-PLUS
			uni.onKeyboardHeightChange((res) => {
				this.keyBoardPopup = res.height !== 0;
			})
			// #endif
		},
		methods: {
			search() {
				this.page.key = this.associativeText
				this.request()
			},
			phone(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
			},
			confirm(item) {
				uni.$emit('address', item)
				uni.navigateBack()
			},
			request() {
				this.$nextTick(() => {
					this.$refs.pageView.setLoadState(0)
				})
				let _this = this
				_this.$api.address({
					'name': this.page.key
				}).then((resp) => {
					_this.dataList = resp
					if (resp.length == 0) {
						_this.$nextTick(() => {
							_this.$refs.pageView.setLoadState(100)
						})
					} else {
						_this.$nextTick(() => {
							_this.$refs.pageView.setLoadState(2)
						})
					}
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			clear(res) {
				this.page.key = ''
				this.request()
			}
		}
	}
</script>


<style lang="scss">
	uni-page-body,
	page {
		background: #f3f4f6;
	}

	.btn {
		margin-top: 10px;
		border: 1px solid #FEA561;
		border-radius: 20px;
		display: flex;flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		margin-bottom: 10px;
	}

	.search-body {
		background-color: #FE9039;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	@mixin uni-flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}

	$search-bar-height: 52px;
	$word-container_header-height: 72rpx;

	.search-container {
		height: $search-bar-height;
		@include uni-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		background: white;

		@at-root {
			#{&}-bar {
				@include uni-flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				background: #FE9039;
			}
		}
	}
</style>