<template>
	<view class="card voice-card">
		<view class="card-header flex-row-sb mb-lg">
			<view class="title">通话使用</view>
			<view class="date-range-selector" @tap="$emit('openDatePicker')">
				<text>{{ dateRangeText }}</text>
				<text class="ml-10">▼</text>
			</view>
		</view>
		<view class="voice-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">{{ voiceStats.totalVoice }}</text>
					<text class="stat-unit">分钟</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">{{ voiceStats.usedVoice }}</text>
					<text class="stat-unit">分钟</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">{{ voiceStats.remainingVoice }}</text>
					<text class="stat-unit">分钟</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		voiceStats: { type: Object, default: () => ({ totalVoice: 0, usedVoice: 0, remainingVoice: 0 }) },
		dateRangeText: { type: String, default: '' }
	});

	defineEmits(['openDatePicker']);
</script>

<style scoped lang="scss">
	.voice-card {
		.date-range-selector {
			display: flex;
			align-items: center;
			padding: 8rpx 20rpx;
			background: var(--gray-100);
			border-radius: var(--radius-small);
			cursor: pointer;
			font-size: 22rpx;
			color: var(--text-primary);
			max-width: 360rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:active { opacity: 0.7; }
		}
		.voice-stats {
			background: var(--gray-100);
			border-radius: var(--radius-small);
			padding: 20rpx;
			.stat-item { flex: 1; }
		}
	}
	.ml-10 { margin-left: 10rpx; }
</style>
