<template>
	<view class="siteInspection-wrap">
		<!-- 搜索框 -->
		<view class="search-con">
			<u-search placeholder="查找全部门店" v-model="queryValue" @custom="searchHandle(1)" @search="searchHandle(1)" bg-color="#fff" :action-style="{background: '#2979ff',color: '#fff', borderRadius: '6upx',padding: '6upx 0', fontSize: '26upx'}"></u-search>
		</view>
		<!-- 定位 -->
		<view class="location-con">
			<text class="location-tit">当前位置：</text>
			<view class="location-main" @click="getLocation">
				<text class="location-addr">{{location}}</text>
				<u-icon name="map" color="#2979ff" size="34" class="location-icon"></u-icon>
			</view>
		</view>
		<!-- 附近的门店 -->
		<view class="store-con">
			<text class="store-tit">附近的门店：</text>
			<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
				<!-- 列表数据 -->
				<view class="list-con">
					<view class="list-item" v-for="(item,index) in listdata" :key="index" @click="chooseStore(item)">
						<view class="item-main">
							<u-icon name="home-fill" size="34" color="#2979ff" class="company-icon"></u-icon>
							{{item.name}}
						</view>
						<u-icon name="rewind-right-fill" size="34" color="#2979ff" class="company-icon"></u-icon>
					</view>
				</view>
				<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
				<view class="loadmore">
					<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				queryValue: '',
				location: '',
				noDataText: '未查找到附近门店',  //  列表请求状态提示语
				status: 'loadmore',  //  加载中状态
				// status: 'loading',  //  加载中状态
				listdata: [
					{name: '常青二路店'},
					{name: '兰州通达街店'},
					{name: '科技西路店'},
					{name: '常青二路店'},
				],  //  列表数据
				pageNo: 1,  //  当前页码
				pageSize: 10,  //  每页条数
				total: 0,  //  数据总条数
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			// 初始化
			init(){
				this.getLocation()
			},
			// 获取当前位置
			getLocation(){
				const _this = this
				uni.getLocation({
				    type: 'gcj02',
					geocode: true,
				    success: function (res) {
						console.log(res)
						_this.location = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum +'靠近' + res.address.poiName
						console.log(_this.location, '城市编码 ', res.address.cityCode)
				    }
				})
			},
			//  
			searchHandle(pageNo){
				// this.status = "loading"
				pageNo ? this.pageNo = pageNo : null
				// searchSuppliers({
				// 	pageNo: this.pageNo,
				// 	pageSize: this.pageSize,
				// 	queryWord: this.queryValue
				// }).then(res => {
				// 	if (res.status == 200) {
				// 		if(this.pageNo>1){
				// 			this.listdata = this.listdata.concat(res.data.list || [])
				// 		}else{
				// 			this.listdata = res.data.list || []
				// 		}
				// 		this.total = res.data.count || 0
				// 		this.listdata.length == 0 && this.queryValue != '' ? this.noDataText = '没有搜索到相关结果' : this.noDataText = '暂无数据'
				// 	} else {
				// 		this.noDataText = res.message
				// 		this.listdata = []
				// 		this.total = 0
				// 	}
				// 	this.status = "loadmore"
				// })
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listdata.length < this.total){
					this.pageNo += 1
					this.searchHandle()
				}else{
					this.status = "nomore"
				}
			},
			//  选择门店
			chooseStore(item){
				uni.navigateTo({
					url:"/pages/signIn/signIn"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.siteInspection-wrap{
		background-color: #f8f8f8;
		.search-con{
			padding: 30upx 30upx;
		}
		// 定位
		.location-con{
			padding: 0 30upx;
			.location-main{
				margin-top: 14upx;
				padding: 20upx;
				border-radius: 12upx;
				background-color: #fff;
				.location-addr{
					font-size: 24upx;
				}
				.location-icon{
					padding-left: 10upx;
					vertical-align: bottom;
				}
			}
		}
		// 附近的门店
		.store-con{
			.store-tit{
				display: block;
				padding: 30upx 30upx 20upx;
			}
			//  列表
			.scroll-con{
				height: calc(100vh - 215px);
				width: 100%;
				overflow: auto;
				.list-con{
					padding: 0 30upx;
					.list-item{
						background-color: #fff;
						border-radius: 16upx;
						padding: 20upx 30upx 18upx;
						margin-bottom: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.item-main{
							font-size: 15px;
							color: rgb(48, 49, 51);
							.company-icon{
								margin-right: 6upx;
							}
						}
					}
				}
			}
		}
	}
</style>
