<template>
	<view v-if="data" @click="goDetails" class="stationItem">
		<!-- 上半部分 -->
		<view class="stationItem_top">
			<view class="stationItem_top_title">{{data.name}}</view>
			<view class="flex ac">
				<view class=" stationItem_top_label_container oneflex flex">
					<view v-for="(item,index) in  data.tags" :key="index" :style="{background:item.color}"
						class="stationItem_top_label"> {{item.label}}</view>
				</view>
				<view class="stationItem_distance flex">
					<uni-icons style="margin-right: 10rpx;" type="paperplane-filled" color="#121836"
						size="15"></uni-icons>
					{{data.distance}}KM
				</view>
			</view>
		</view>
		<!-- 下半部分 -->
		<view  class="stationItem_bottom">
			<view   class="is_stop_row flex ac">
				<image style="width: 35rpx;height:40rpx;" src="../../static/stop.png"></image>
				{{data.parkFee}}
			</view>
			<view class=" flex ">
				<view class="stationItem_bottom_label_container oneflex flex">
					<view class="stationItem_bottom_label flex ac">
						<view  class="stationItem_bottom_label_logo flex ac jc">快</view>
						<text>{{data.fastChargingIdleRatio}}</text>
					</view>
					<view class="stationItem_bottom_label flex ac">
						<view style="border: 2rpx solid #36658DFF;color: #36658DFF;" class="stationItem_bottom_label_logo flex ac jc">慢</view>
						<text>{{data.slowChargingIdleRatio}}</text> 
					</view>
					<view class="stationItem_bottom_label flex ac">
						<view style="border: 2rpx solid #F67A22FF;color: #F67A22FF;" class="stationItem_bottom_label_logo flex ac jc">其他</view>
						<text class="flex">{{data.otherIdleRatio}}  </text>
					</view>
				</view>
				<view class="stationItem_bottom_price">￥{{ tool.getnum(data.unitPrice,3) }}/度</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "stationItem",
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		},
		created() {
			// console.log(this.data.tags, 'data.tags')
		},
		methods: {
			goDetails() {  
				let {stationLng,stationLat,id,tags} =  this.data;
				let location = uni.getStorageSync('location') || {
					longitude: 116.38,
					latitude: 39.90,
				} ; 
				uni.navigateTo({
					url: `/ChargingStation/pages/index/index?data=${JSON.stringify({
						stationLng:location.longitude ,
						stationLat:location.latitude,id,tags})}`
				});
			}
		}
	}
</script>

<style scoped>
	@import 'index.css';
</style>