<template>
	<view class="fixed">
		<view class="signal" v-if="!online">
			<view class="bar red" v-for="i in 5"></view>
			<view class="bar-no">
				<u-icon name="close"></u-icon>
			</view>
		</view>
		<view class="signal" v-else-if="Number(value) > 0 && Number(value) <= 16">
			<view v-for="(_, i) in 4" :class="['bar', Number(value) > (8 * i) ? 'orange' : '']" />
			<view :class="['bar', Number(value) > 30 ? 'green' : '']" />
		</view>
		<view class="signal" v-else>
			<view v-for="(_, i) in 4" :class="['bar', Number(value) > (8 * i) ? 'green' : '']" />
			<view :class="['bar', Number(value) > 30 ? 'green' : '']" />
		</view>
		<text>({{ value }})</text>
	</view>
</template>

<script>
	export default {
		name: "Signal",
		props: {
			// 在线状态
			online: {
				type: Boolean,
				default: false,
				required: true
			},
			// 信号强度
			value: {
				type: [String, Number],
				default: 0,
				required: true
			},
			// 运营商
			isp: {
				type: String,
				default: "",
			},
			// 显示数值
			showValue: {
				type: Boolean,
				default: true,
			},
			fontColor: {
				type: String,
				default: "#333",
			}
		},
		data() {
			return {
				barno: true,
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	// 信号
	.signal {
		position: relative;
		display: flex;
		align-items: flex-end;
		height: 17px;

		.bar {
			width: 2px;
			background-color: #999;
			border-radius: 2px;
			margin-right: 2px;
		}

		.bar:nth-child(1) {
			height: 4px;
		}

		.bar:nth-child(2) {
			height: 7px;

		}

		.bar:nth-child(3) {
			height: 10px;

		}

		.bar:nth-child(4) {
			height: 13px;

		}

		.bar:nth-child(5) {
			height: 16px;

		}

		.bar.red {
			background-color: #e60012;
		}

		.bar.orange {
			background-color: #ffa200;
		}

		.bar.green {
			background-color: #39ac4f;
		}

		.bar-no {
			position: absolute;
			left: -2px;
			bottom: 3px;

			::v-deep.u-icon__icon {
				font-weight: bold;
				font-size: 18rpx !important;
			}
		}
	}
</style>