<template>
	<view class="station_body">
		<view  class="station_header">
			<view class="station_input_container">
				<uni-easyinput @confirm="seach" prefixIcon="search" trim="all" v-model="page.params.siteName" placeholder="请输入内容"></uni-easyinput>
			</view>
		</view>
		<view class="station_list_container oneflex">
			<scroll-view @refresherrefresh='refresherrefresh' :refresher-enabled='true'
				:refresher-triggered='refresherTriggered'   style="height: 100%; "
				scroll-y="true" @scrolltolower='scrolltolower'>
				 <stationItem @stationClick='stationClick' class="stationItem" :item='item' v-for="item in list"></stationItem>
				 <uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view> 
		</view>
	</view>
</template>

<script>
	import stationApi from '@/api/station.js'
	import stationItem from '@/components/stationItem/stationItem.vue'
	export default {
		components:{
			stationItem
		},
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				list:[],
				location: uni.getStorageSync('location'),
				page:{ 
					  "pageSize": 10,
					  "currentPage": 1,
					  "params": {
					    "siteName":"", // 油站名称
					    "longitude":"36.82", // 经度-必填
					    "latitude":"20.36" // 纬度-必填
					  },
					  "columns": [] 
				},
				refresherTriggered: false,
				loadingType: 'more', //加载更多状态
			}
		},
		created() {},
		onShow() {
			this.show();
			
		},
		onReachBottom() {
			console.log('触底')
		},
		methods: {
			async getPosition() {
				await this.tool.userLocationChenk().then(res => {}).catch(err => {});
				await this.tool.getLocation().then(res => {
					this.location = uni.getStorageSync('location');
					this.page.params = Object.assign(this.page.params,{
						"longitude": this.location.longitude||"36.82", // 经度-必填
						"latitude": this.location.latitude||"20.36" // 纬度-必填
					})
				}).catch(err => {
					this.location = null
				});
			},
			stationClick(e){ 
				console.log(e)
				uni.navigateTo({
					url:`/Product/pages/list?item=${encodeURIComponent(JSON.stringify(e))}`
				})
			},
			async show(){
				await this.getPosition();
				this.getStationlist();
				
			},
			scrolltolower(){
				if(this.loadingType=='nomore') return
				this.page.currentPage+=1; 
				this.getStationlist()
			},
			refresherrefresh(){
				this.refresherTriggered = true;
				this.seach()
			},
			seach(){
				this.loadingType=='more';
				this.page.currentPage=1;
				this.getStationlist()
			},
			getStationlist(){
				stationApi.nearbySiteByPage(this.page).then(res=>{
					if(res.code==20000){ 
						this.loadingType  = res.data.list.length<this.page.pageSize?'nomore':'more';
						if (this.page.currentPage !== 1) { 
							this.list = this.list.concat(res.data.list);
						} else {
							this.list = res.data.list 
						}
					}
				}).finally(()=>{
					this.refresherTriggered = false
				})
			}
		}
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	//  .stationItem :last-child {
	// 	margin-bottom: 30rpx !important;
	// }
	::v-deep .is-input-border {
		border: none !important;
		border-radius: 25rpx !important;
		background-color: #F7F7F7 !important;
	}
	@import 'index.scss';
</style>