<template>
	<!-- <view :style="{paddingTop:`${titleStyle.top}px`}" class="page_body"> --> 
	<view class="ChargingStation_container" style="height: 100%;overflow: hidden;">
		<view :style="{height:`${titleStyle.height}px`}" class="ChargingStation_title">
			<text> 星云闪充</text>
		</view>
		<!-- 列表 -->
		<view style="overflow: hidden;" class="ChargingStation_list_container flex column">
			<!-- 搜索框 -->
			<view class="ChargingStation_list_header">
				<!-- 输入框 -->
				<view class="flex">
					<view class="ChargingStation_list_header_input oneflex">
						<uni-icons class="ChargingStation_list_header_input_icon" type="search" size="20"></uni-icons>
						<input :disabled="true" @confirm="seach"  @tap="focus" v-model="pageData.address" placeholder="搜索" type="text">
						<!-- <uni-icons v-if="pageData.stationName!==''" @click="pageData.stationName = '';getList() "
							type="clear" size="20"></uni-icons> -->
					</view>
				</view>
				<!-- 选项 -->
				<view class="ChargingStation_list_option_list flex around">
					<view @click="pageData.equipmentTypes =  []"  :class=" `ChargingStation_list_option_list_item flex jc ac` + (!pageData.equipmentTypes.length ?' select_ChargingStation_list_option_list_item':'')  ">
						全部
					</view>
					<view @click="pageData.equipmentTypes = [item.value]" v-for="(item,index) in options " :key="index"
						:class=" `ChargingStation_list_option_list_item flex jc ac` + (pageData.equipmentTypes.includes(item.value) ?' select_ChargingStation_list_option_list_item':'')  ">
						{{item.label}}
					</view>
				</view>
			</view>
			<!-- 地图 -->
			<view class="ChargingStation_list">
				<charging-station-map ref="ChargingStationMap" :pageData.sync='pageData'  ></charging-station-map>
			</view>
		</view>
	</view>  
</template>

<script>
	import {
		page
	} from './AntiCorruptionLayer.js'
	import station from '@/api/station.js'
	import ChargingStationMap from "@/components/ChargingStationMap/ChargingStationMap.vue"
	export default {
		components: {
			ChargingStationMap
		},
		data() {
			return { 
				pageData: {
					equipmentTypes: [],
					ranger: 2000,
					stationLng:'',
					stationLat:'',
					address:''
				},
				titleStyle: {},
				options: [ {
					label: '快充',
					value: 1
				}, {
					label: '慢充',
					value: 2
				}]
			}
		},
		created() {
			this.init()
		},
		watch: {
			'pageData.equipmentTypes'(e) { 
				this.$refs.ChargingStationMap.getList(0)
			}
		}, 
		onShow() {
			this.$refs.ChargingStationMap.getPosition()
		},
		methods: { 
			focus(){
				let { latitude,longitude} = this.$refs.ChargingStationMap.location;
				uni.navigateTo({
					url:'/ChargingStation/pages/chooseLocation/index?type='+`start/${latitude},${longitude}`
				})
			},
			onshow(){
				this.$refs.ChargingStationMap.onshow();
				this.$refs.ChargingStationMap.getPosition();
			},
			refresherrefresh() {
				this.seach()
			},
			seach() { 
			}, 
			async init() {
				let that = this;
				this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度    
				uni.$on('UpdateAddress',(e)=>{
					that.pageData.address = `${e.title}${e.address}` 
					let { lat,lng} = e.location; 
					that.$refs.ChargingStationMap.moveToLocation(lng,lat);
				});
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
	@import '../index/index.scss';
</style>