
<style lang="scss" scoped>
	.signal-gps-grid-list-ctn{
		position: relative;
		width: 60rpx;
		margin-left: 12rpx;
	}
	.signal-gps-grid-list{
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 6rpx;
	}
	.signal-gps-grid{
		width: 6rpx;
		height: 24rpx;
		background-color: #BADED6;
		margin-right: 4rpx;
		&:last-child{
			margin-right: 0;
		}
	}
</style>

<template>
	<view class="signal-gps-grid-list-ctn">
		<view class="signal-gps-grid-list">
			<view class="signal-gps-grid" v-for="(item,index) in 5" :key="index"></view>
		</view>
		<view class="signal-gps-grid-list">
			<view class="signal-gps-grid" v-for="(item,index) in getValueInterval" style="background-color:#11BF96;" :key="index"></view>
		</view>
	</view>
</template>

<script>
	/*
	* 信号组件
	* value: 80以上5格，60以上4格，40以上3格，20以上2格，0以上1格，0无信号
	* 例:<signal value="80"></signal>
	*/
	export default{
		data(){
			return {}
		},
		props:{
			// 信号值0-100
			value:{
				type: [String, Number],
				default: 0
			}
		},
		computed:{
			getValueInterval(){
				let value = parseInt(this.value);
				if (value >=80) {
					return 5;
				} else if(value >=60 && value < 80){
					return 4;
				} else if(value >=40 && value < 60){
					return 3;
				} else if(value >=20 && value < 40){
					return 2;
				}else if(value >0 && value < 20){
					return 1;
				} else{
					return 0;
				}
				 
			}
		}
	}
</script>

