<template>
	<div style="padding: 10px;background-color: white;">
		<div class="divRow" style="justify-content: space-between !important;">
			<div style="font-size: 14px;">
				{{data.bikeCode}}
			</div>
			<div>
				<label>状态：</label>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikexuanzhong" :color="color" size="16"/></label>
				<label>正常</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">剩余电量：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeelectricity-full" :color="color" size="16"/></label>
				<label>{{data.dl}}</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">可骑行距离：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" :color="color" size="16"/></label>
				<label>{{data.jl}}</label>
			</div>
			
		</div>
		<div style="margin-top: 30px;margin-bottom: 30px;">
			<label style="margin-right: 15px;"><uni-icons custom-prefix="iconfont" type="icon-ebikejinggao" color="#FF7200" size="12"/></label>
			<label style="font-size: 10px;">安全骑行，遵守交通规则</label>
		</div>
		<div>
			<div @click="$emit('close')">关闭</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	const props=defineProps(["bikecode"]);
	const methods=defineEmits(["close"])
	const color=ref("#61D145");
	const data=ref({
		bikeCode:props.bikecode,
		zt:1,
		dl:"86%",
		jl:"50km"
	})
	
</script>

<style scoped>
	.divRow{
		font-size: 12px;
		color: #000;
		line-height: 25px;
		display: flex;
	}
	
	.lbTitle{
		text-align: right;
		width: 80px;
	}
	
	.lbImg{
		margin-right: 5px;
	}
</style>