<template>
	<view class="my-bg" style="display: flex;flex-direction: column;height: 100vh;">
		<cu-custom class="main-totextbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">附近油站</block>
		</cu-custom>

		<view class="fixed-top-site">
			<view class="cu-bar   search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" confirm-type="search" @input="onInput" @confirm="onSearch"
						@blur="InputBlur" v-model="siteName" :adjust-position="false" type="text" placeholder="加油站名称" />
				</view>
				<view class="action" @tap="toMap">
					<image class="icon shadow-blur round icon-gasstation"
						src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="placeholder-hidden">
			<view class="cu-bar   search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
						placeholder="加油站名称" confirm-type="search" />
				</view>
				<view class="action" @tap="toMap">
					<image class="icon shadow-blur round icon-gasstation"
						src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<!-- 筛选开始 -->
		<scroll-view class="screentop  bg-white" style="flex: 1;">
			<view class="">
				<sl-filter v-if="isFilterData" reflexTitle ref="slFilter" :productCodeList="productCodeList" :areaCodeList="areaCodeList"
					@result="filterRes" :menuList="menuList"></sl-filter>
				<!-- <sl-filter reflexTitle ref="slFilter" @result="filterRes" :menuList="menuList"></sl-filter> -->
			</view>
			<view class="bg-white min-height-50 padding-top" v-if="siteList.length>0">
				<site-item v-for="(item,index) in siteList" :key="item.id" :site-item="item" :first="index==0"
					:listHeight="listHeight" class="cu-list menu-avatar cu-item" @tap="toDetail(item)">
				</site-item>
				<view class="placeholder-hidden">

				</view>
			</view>

			<view class="" v-else>
				<my-empty :contentTitle="contentTitle"></my-empty>
			</view>

		</scroll-view>
		<view class="bg-white">
			<uni-load-more status="more"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import StationItem from '@/components/site-item/site-item.vue'
	import oilSiteApi from '@/api/oil-site.js'
	import slFilter from '@/components/sl-filter/sl-filter.vue'
	export default {
		components: {
			StationItem,
			slFilter
		},

		data() {
			return {
				getSiteListTimer:null,
				filterData: {
					// oilProductCode: '0#'
				},
				isFilterData:false,
				contentTitle: '您当前位置附近没有油站，可以点击左上角-距离-选择其他省市进行查看。',
				loadStatus: 'load',
				listHeight: 160,
				areaCodeList: [],
				siteName: '',
				menuList: [{
						title: '距离',
						isMutiple: false,
						key: 'distance',
						detailList: [{
								title: "全部",
								value: ''
							},
							{
								title: "20Km",
								value: 20
							},
							{
								title: "30Km",
								value: 30
							},
							{
								title: "50Km",
								value: 50
							},
							{
								title: "省市",
								value: 10
							}
						]
					},
					{
						title: '油品',
						key: 'oilProductCode',
						isMutiple: false,
						detailList: [{
								title: "全部",
								value: ""
							},
							{
								title: "0#",
								value: "0#"
							},
							{
								title: "-10#",
								value: "-10#"
							},
							{
								title: "-20#",
								value: "-20#"
							},
							{
								title: "-35#",
								value: "-35#"
							},
							{
								title: "LNG",
								value: "LNG"
							}
						]
					},
					// {
					// 		title: '油品',
					// 		key: 'oilProductCode',
					// 		isMutiple: false,
					// 		detailList: {全部:[{
					// 			title: "全部",
					// 			value: ""
					// 		}],
					// 		柴油:[{
					// 			title: "0#",
					// 			value: "0#"
					// 		},
					// 		{
					// 			title: "-10#",
					// 			value: "-10#"
					// 		},
					// 		{
					// 			title: "-20#",
					// 			value: "-20#"
					// 		},
					// 		{
					// 			title: "-35#",
					// 			value: "-35#"
					// 		}],
					// 		天然气:[{
					// 			title: "LNG",
					// 			value: "LNG"
					// 		}]}
					// 	},
					{
						title: '距离优先',
						isMutiple: false,
						key: 'comprehensiveSort',
						detailList: [{
								title: "距离优先",
								value: 1
							},
							{
								title: "价格优先",
								value: 2
							}
						]
					},
				],
				// menuList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData') : [
				// 	{
				// 		title: '渠道',
				// 		isMutiple: false,
				// 		key: 'channelCode',
				// 		detailList: [{
				// 			title: "全部",
				// 			value: ""
				// 		}]
				// 	},
				// 	{
				// 		title: '距离',
				// 		isMutiple: false,
				// 		key: 'distance',
				// 		detailList: [{
				// 				title: "默认",
				// 				value: 20
				// 			},
				// 			{
				// 				title: "20Km",
				// 				value: 20
				// 			},
				// 			{
				// 				title: "30Km",
				// 				value: 30
				// 			},
				// 			{
				// 				title: "50Km",
				// 				value: 50
				// 			}
				// 		]
				// 	},
				// 	{
				// 		title: '0#轻柴油',
				// 		key: 'oilProductCode',
				// 		isMutiple: false,
				// 		detailList: [{
				// 			title: "全部",
				// 			value: ""
				// 		}]
				// 	},
				// 	{
				// 		title: '品牌',
				// 		key: 'siteBrand',
				// 		isSort: true,
				// 		isMutiple: false,
				// 		detailList: [{
				// 			title: "全部",
				// 			value: ""
				// 		}]
				// 	}
				// ],
				siteList: [],
				InputBottom: 0,
				show: false,
				currentPage: 1,
				isLoadMore: false, //是否加载中
			}
		},
		watch: {
			loadStatus: {
				deep: true,
				immediate: true,
				handler: function(val, oldVal) {
					if (val.status == 'load') {
						setTimeout(() => {
							this.getSiteList()
						}, 100)
					} else {
						uni.showToast({
							title: '到底啦',
							icon: 'none'
						})
					}
				}
			},
		},
		onShow() { 
			this.tools.userLocationChenk().then(res => { 
				this.refreshLocation();
			}).catch(err => {});
		},
		onLoad() { 
			// this.refreshLocation()
			if (!uni.getStorageSync('filterData')) {
				this.getFilterData()
			} else {
				this.isFilterData=true
			}
			this.getSiteList()
		},

		onPullDownRefresh() {
			this.filterRes(this.filterData)
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 600);
		},
		onReachBottom() {
			if (this.loadStatus == 'load') {
				setTimeout(() => {
					this.getSiteList()
				}, 100)
			} else {
				uni.showToast({
					title: '到底啦',
					icon: 'none'
				})
			}
		},
		methods: {
			filterRes(val) {
				this.filterData = val
				this.currentPage = 1
				this.siteList = []
				this.getSiteList()
			},
			getFilterData() {
				let menuList = [{
						title: '渠道',
						isMutiple: false,
						key: 'channelCode',
						detailList: [{
							title: "全部",
							value: ""
						}]
					},
					{
						title: '0#轻柴油',
						key: 'oilProductCode',
						isMutiple: false,
						detailList: [{
							title: "全部",
							value: ""
						}]
					},
					{
						title: '品牌',
						key: 'siteBrand',
						isSort: true,
						isMutiple: false,
						detailList: [{
							title: "全部",
							value: ""
						}]
					}
				]
				oilSiteApi.getCheckInfo().then(res => {
					if (res.code == 20000) {
						uni.setStorageSync('productCodeList', res.data.productCodeList)
						uni.setStorageSync('areaCodeList', res.data.areaCodeList)
						this.areaCodeList = uni.getStorageSync('areaCodeList')
							let channelCodes = []
							res.data.channelCodes.map(item => {
								channelCodes.push({
									title: item.name,
									value: item.id
								})
							})
							let productCodes = []
							res.data.productCodes.map(item => {
								productCodes.push({
									title: item.name,
									value: item.id
								})
							})
							let siteBrands = []
							res.data.siteBrands.map(item => {
								siteBrands.push({
									title: item.name,
									value: item.id
								})
							})
							menuList[0].detailList = menuList[0].detailList.concat(channelCodes)
							menuList[1].detailList = menuList[1].detailList.concat(productCodes)
							menuList[2].detailList = menuList[2].detailList.concat(siteBrands)
							uni.setStorageSync('filterData', this.menuList);
						if (uni.getStorageSync('areaCodeList')) {
							this.areaCodeList = uni.getStorageSync('areaCodeList')
						} else {
							this.areaCodeList = res.data.areaCodeList
						}
						// this.$forceUpdate();
					}
					this.isFilterData = true
				})
			},
			onSelected(e) {
				// console.log(e)
			},
			refreshLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.setStorageSync('location', res)
					}
				});
			},

			getSiteList() { 
				let data1 = {
					currentPage: this.currentPage,
					pageSize: 10,
					params: { //类型：Object  必有字段  备注：// 筛选对象
					clientBelong:'ZHONGPIN',
					longitude: 117.157817, //  必有字段  备注：// 当前位置经度
					latitude: 31.802472, //  必有字段  备注：// 当前位置维度
						sort: "juli", //类型：String  必有字段  备注：// 智能排序 ( price：价格最低 juli：距离最近 ) 默认距离排序
						siteName: this.siteName,
						...uni.getStorageSync('location'),
						// ...this.filterData
						siteBrand: this.siteName ? '' : this.filterData.siteBrand, //   备注：// 石油品牌 ( 1-中国石油 2-中国石化 3-壳牌 4-民营 5-中海油 6-京博 7-中化石油 8-其他 )
						channelCode: this.siteName ? '' : this.filterData.channelCode, //   备注：// 渠道编码 ( OIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
						oilProductCode: this.siteName ? '' : this.filterData.oilProductCode, //   备注：// 油号选择 ( 0# 92# 92#)
						provinceCode: this.filterData.provinceCode,
						cityCode: this.filterData.cityCode,
						areaCode: this.filterData.areaCode,
						distance: this.filterData.distance,
						zpDisable:'ENABLE',
						comprehensiveSort: this.filterData.comprehensiveSort ? this.filterData.comprehensiveSort : 1
					}

				}
				if (!uni.getStorageSync('Authorization')) {
					oilSiteApi.readOnlySites(data1).then(res => {
						if (res.code == 20000) {
							this.siteList = this.siteList.concat(res.data.list)
							if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.loadStatus = 'nomore'
							} else {
								this.currentPage++
								this.loadStatus = 'load'
							}
						}
					})
				} else {
					oilSiteApi.getSiteLists(data1).then(res => {
						if (res.code == 20000) { 
							this.siteList = this.siteList.concat(res.data.list)
							if (res.data.list.length < 10) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.loadStatus = 'nomore'
							} else {
								this.currentPage++
								this.loadStatus = 'load'
							}
						}
					})
				}

			},
			toDetail(item) {
				let itemS = encodeURIComponent(JSON.stringify(item))
				if (uni.getStorageSync('user')) {
					uni.navigateTo({
						url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}`,
						fail: (err) => {
							// console.log(err)
						},
						success: () => {
							// console.log('err')
						}
					})
				} else {
					uni.showModal({
						title: '请您登录',
						content: "登录小星加油才可以加油 |˛˙꒳​˙)♡",
						confirmText: '去登陆',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '../../../BagAuth/pages/login/login'
								})
							}
						}
					})
				}
			},
			nameSelect(value, item) {
				this.title2 = item.text
				// console.log(item)
			},
			typeSelect(value, item) {
				// console.log(item)
				this.title1 = item.text
			},
			optionSelect(value, item) {
				// console.log(item)
				this.title3 = item.text
			},
			toMap() {
				uni.navigateTo({
					url: '/BagStation/pages/stationMap/stationMap',
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
				// console.log(e.detail)
				// console.log(this.InputBottom)
			},
			InputBlur(e) {
				this.InputBottom = 0
				// console.log(this.InputBottom)
				// console.log(e.detail)


			},
			onInput() {
				// setTimeout(() => {
				// 	this.currentPage = 1
				// 	this.siteList = []
				// 	this.getSiteList()
				// }, 100)
				clearTimeout(this.getSiteListTimer);
				this.getSiteListTimer = setTimeout(()=>{
					this.currentPage = 1
					this.siteList = []
					this.getSiteList()
				},500);
			},
			onSearch() {
				// this.currentPage = 1
				// this.siteList = []
				// this.getSiteList()
				clearTimeout(this.getSiteListTimer);
				this.getSiteListTimer = setTimeout(()=>{
					this.currentPage = 1
					this.siteList = []
					this.getSiteList()
				},500);
			}
		}
	}
</script>

<style scoped>
	.icon-gasstation {
		width: 1.2rem;
		height: 1.2rem;
	}

	.placeholder-hidden {
		/* min-height: 95upx; */
		opacity: 0;
	}

	.fixed-top-site {
		/* top: 120rpx; */
		z-index: 4;
		/* position: fixed; */
		width: 750upx;
	}

	.min-height-50 {
		min-height: 50vh;
	}
</style>
