<template>
	<view class="card traffic-card">
		<view class="card-header flex-row-sb mb-lg">
			<view class="title">本月流量</view>
			<view class="usage-percent">
				<text class="title">{{ usedFlowPercent }}</text>
				<text class="caption">%</text>
			</view>
		</view>
		<view class="progress-section mb-lg">
			<view class="progress-apple">
				<view class="progress-fill" :style="{width: usedFlowPercent + '%'}"></view>
			</view>
		</view>
		<view class="traffic-stats flex-row-sb">
			<view class="stat-item flex-col-center">
				<view class="caption mb-xs">已使用</view>
				<view class="stat-value-container">
					<text class="stat-value">{{ formatDataSize(deviceInfo.totalBytesCnt) }}</text>
					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
				</view>
			</view>
			<view class="stat-item flex-col-center">
				<view class="caption mb-xs">总流量</view>
				<view class="stat-value-container">
					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize) }}</text>
					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
				</view>
			</view>
			<view class="stat-item flex-col-center">
				<view class="caption mb-xs">剩余</view>
				<view class="stat-value-container">
					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize - deviceInfo.totalBytesCnt) }}</text>
					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';

	const props = defineProps({
		deviceInfo: { type: Object, default: () => ({}) },
		isDevice: { type: Boolean, default: true }
	});

	const usedFlowPercent = computed(() => {
		if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
			return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
		}
		return '0';
	});

	const formatDataSize = (size) => {
		if (!size) return '0';
		const num = parseFloat(size);
		if (num < 0.01) return '0';
		return num.toFixed(2);
	};
</script>

<style scoped lang="scss">
	.traffic-card {
		.usage-percent {
			display: flex;
			align-items: baseline;
			gap: 4rpx;
			.title { font-size: 35rpx; font-weight: 700; margin-right: 5rpx; }
		}
		.traffic-stats {
			background: var(--gray-100);
			border-radius: var(--radius-small);
			padding: 20rpx;
			margin-top: 16rpx;
			.stat-item { flex: 1; }
		}
	}
</style>
