<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="search_header p30">
				<view style="margin: 30rpx 0 0">
					<up-swiper :list="list1" height="320rpx" keyName="imageUrl" indicator></up-swiper>
				</view>
			</view>
			<view style="height: 35rpx"></view>
			<view class="p30" style="width: 100%">
				<search :top="false" @search="searchChange" />
			</view>
			<view style="height: 25rpx"></view>
			<view style="padding: 0 30rpx">
				<view class="order_list" style="position: sticky; top: 0; left: 0">
					<view class="order_list_header">
						<view class="order_list_header_view" @click="tabChange(1)">
							<view>距我最近</view>
							<view v-if="query.orderByType == 1" class="order_list_header_view_dian"></view>
						</view>
						<view class="order_list_header_view" @click="tabChange(2)">
							<view>空闲最多</view>
							<view v-if="query.orderByType == 2" class="order_list_header_view_dian"></view>
						</view>
					</view>
					<image class="filter-btn" src="/static/icon/icon-filter.png" @click="filterBtn"></image>
				</view>
			</view>

			<view style="margin-bottom: 30rpx; padding: 0 30rpx" v-for="(item, index) in dataList" :key="index">
				<orderList toNav :info="item"></orderList>
			</view>
		</z-paging>
		<view style="height: 180rpx"></view>
		<u-popup 
			:show="popupShow" 
			mode="top" 
			:safeAreaInsetBottom="false"
			@close="popupClose" 
			@open="popupOpen"
		>
			<view class="filter-area">
				<view class="filter-label">充电方式</view>
				<view class="filter-value">
					<view 
						class="filter-value-item" 
						v-for="(item, index) in filterData.chargeWay" 
						:key="index"
						:class="{'filter-value-item-active': item.value === query.chargeWay}"
						@click="clickChargeWay(item)"
					>
						{{ item.label }}
					</view>
				</view>
				<view class="filter-label">停车费</view>
				<view class="filter-value">
					<view 
						class="filter-value-item" 
						v-for="(item, index) in filterData.serviceInfo" 
						:key="index"
						:class="{'filter-value-item-active': item.value === query.serviceInfo}"
						@click="clickServiceInfo(item)"
					>
						{{ item.label }}
					</view>
				</view>
				<view class="filter-label">终端功率（kw）</view>
				<view class="filter-value">
					<SlideFilter 
						style="width: 100%;padding: 0 40rpx;" 
						v-model="query.maxPower" 
						:option="[0, 20, 40, 80, 120, 240, 360, 480, 720, 960]"
						@change="slideFilterChange"
					/>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onPullDownRefresh, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { aroundAreaApi, bannerList } from '@/api/api.js';
import SlideFilter from '@/components/slide-filter/index.vue';
import { useNav } from '@/hooks/useNav.js';
const { nav, navTo } = useNav();

const dataList = ref([]);
const paging = ref(null);
const query = reactive({
	lon: '',
	lat: '',
	orderByType: 1, //1-最近;2-空闲较多
	chargeWay: "",
	serviceInfo: "",
	maxPower: "",
	keyWord: ''
});

const list1 = ref([]);

onLoad(async () => {
	let _res = await bannerList();
	list1.value = _res;
});

onShow(() => {
	uni.hideTabBar();
});

let toKft = (e) => {
	uni.makePhoneCall({
		phoneNumber: '4008005326' //仅为示例
	});
};

const queryList = async () => {
	uni.showLoading({
		title: '加载中...'
	});
	try {
		if (!query.lon && !query.lat) {
			const { longitude: lon, latitude: lat } = await uni.getLocation();
			query.lon = lon;
			query.lat = lat;
		}
	} catch (err) {
		console.log(err);
	}
	console.log(query);
	aroundAreaApi(query)
		.then((res) => {
			console.log(res, 'list');
			paging.value.complete(res);
			uni.hideLoading();
		})
		.catch((res) => {
			paging.value.complete(false);
			uni.hideLoading();
		});
};

let tabChange = (e) => {
	query.orderByType = e;
	paging.value.reload();
};

let isPagingRefNotFound = () => {
	return !paging.value;
};

onPullDownRefresh(() => {
	if (isPagingRefNotFound()) return;
	paging.value.reload().catch(() => {});
});

onPageScroll((e) => {
	if (isPagingRefNotFound()) return;
	paging.value.updatePageScrollTop(e.scrollTop);
	e.scrollTop < 10 && paging.value.doChatRecordLoadMore();
});

onReachBottom(() => {
	if (isPagingRefNotFound()) return;
	paging.value.pageReachBottom();
});

const toOrder = () => {
	uni.switchTab({
		url: '/pages/order/order'
	});
};

let searchChange = (e) => {
	query.keyWord = e;
	paging.value.reload();
};

let showMode = () => {
	uni.showModal({
		title: '提示',
		content: '暂未开放',
		showCancel: false,
		confirmText: '确认',
		success: () => {}
	});
};

const popupShow = ref(false);
const filterData = reactive({
	chargeWay: [
		{ label: "慢充<20kw", value: "1" },
		{ label: "快充20~360kw", value: "2" },
		{ label: "超充≥360kw", value: "3" },
	],
	serviceInfo: [
		{ label: "停车免费", value: "1" },
		{ label: "限时免费", value: "2" },
		{ label: "停车收费", value: "3" },
	]
})

// 筛选电站
const filterBtn = () => {
	popupShow.value = true;
}
const popupClose = () => {
	console.log("popupClose");
	popupShow.value = false;
}
const popupOpen = () => {
	console.log("popupOpen");
}
const clickChargeWay = (item) => {
	if(query.chargeWay == item.value){
		query.chargeWay = ""
	}else{
		query.chargeWay = item.value;
	}
	paging.value.reload();
}
const clickServiceInfo = (item) => {
	if(query.serviceInfo == item.value){
		query.serviceInfo = ""
	}else{
		query.serviceInfo = item.value;
	}
	paging.value.reload();
}
const slideFilterChange = () => {
	console.log("query.maxPower", query.maxPower)
	paging.value.reload();
}
</script>

<style>
page {
	/* background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%); */
	background-color: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.search_header {
	position: relative;
	&_blur {
		width: 100%;
		height: 185rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: #dbe6ff;
		opacity: 0.8;
		filter: blur(50px);
		/* #ifdef MP-ALIPAY */
		z-index: 0;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		z-index: -1;
		/* #endif */
	}

	&_grid {
		// margin: 35rpx 0;
		margin-top: 25rpx;
		border-radius: 15rpx;
		@include flex($space: space-between);
		&_view {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 126rpx;
			font-size: 26rpx;
			// background: #ffffff;
			// border-radius: 24rpx 24rpx 24rpx 24rpx;
			image {
				width: 99rpx;
				height: 99rpx;
				margin-bottom: 10rpx;
			}
		}
	}
}

.order_list {
	box-sizing: border-box;
	view {
		box-sizing: border-box;
	}

	display: flex;
	align-items: center;
	padding: 15rpx;
	margin-bottom: 30rpx;
	font-size: 30rpx;
	// background-color: #fff;
	width: 690rpx;
	border-radius: 15rpx;

	// width: 690rpx;
	// background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
	// box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
	// border-radius: 44rpx 44rpx 0rpx 0rpx;

	&_view {
		padding: 15rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-right: 30rpx;
	}

	&_active {
		background-color: #6FA256;
		color: #fff;
	}

	&_header {
		width: 100%;
		height: 100rpx;
		@include flex;
		font-weight: bold;
		font-size: 36rpx;
		color: #232323;
		// background-color: #ffffff;

		position: sticky;
		top: 360rpx;
		left: 0;

		&_view {
			position: relative;
			margin-right: 50rpx;
			view {
				position: relative;
				z-index: 99;
			}
			&_dian {
				position: absolute !important;
				bottom: 0rpx;
				right: 20rpx;
				width: 66rpx;
				height: 20rpx;
				background-color: #6FA256;
				border-radius: 10rpx;
				z-index: 1 !important;
			}
		}
	}
	.filter-btn {
		width: 72rpx;
		height: 72rpx;
	}
}

button::after {
	all: unset;
}

.filter-area {
	padding: 30rpx 30rpx 56rpx;
	.filter-label {
		font-weight: bold;
		font-size: 36rpx;
		color: #232323;
		margin-bottom: 24rpx;
	}
	.filter-value {
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
		&-item {
			font-weight: bold;
			font-size: 24rpx;
			color: #232323;
			padding: 8rpx 0;
			border-radius: 8rpx;
			border: 2rpx solid #666666;
			width: 220rpx;
			text-align: center;
		}
		&-item-active {
			background: #6FA256;
			color: #FFFFFF;;
			border: 2rpx solid #428A1F;
		}
	}
}
</style>
