<template>
	<view class="statistics">
		<view class="control">
			<view class="control-item" v-for="(item, index) in controlData" :key="index" :class="ctrlCurIndex == index ? 'active' : ''" @click="changeTitle(index)">
				{{ item.title }}
			</view>
		</view>
		<view class="content">
			<view v-if="ctrlCurIndex == 0">
				<view class="stat-box">
					<view>计划：<text class="num">2</text>条 </view>
					<view>实到：<text class="num green">2</text>条 </view>
				</view>
				<uni-card class="card-box" :is-shadow="false" >
					<view class="card-item" v-for="(item, index) in listData" :key="index">
						<view class="title">
							<text>{{ item.title }}</text>
							<uni-tag :inverted="true" :text="item.state" :type="item.state == '正常' ? 'success' : 'warning'" />
						</view>
						<view class="num">线路编号：{{ item.num }}</view>
						<view>巡检时间：{{ item.time }}</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

let ctrlCurIndex = ref(0)
let controlData = reactive([
	{ id: 1, title: '日' },
	{ id: 2, title: '周' },
	{ id: 3, title: '月' },
	{ id: 4, title: '年' },
	{ id: 5, title: '自定义' },
])

// 列表数据
let listData = reactive([
	{ title: '左岸白班机组', state: '正常', num: 'BHT-YX-XJ-L1.2', time: '2025-02-20 8:40' },
	{ title: '左岸主变洞及出线场(上午)', state: '正常', num: 'BHT-YX-XJ-L1.2', time: '2025-02-20 8:40' },
])

// 切换
const changeTitle = (index) => {
	ctrlCurIndex.value = index
}
</script>

<style lang="scss" scoped>
.statistics {
	.control {
		display: flex;
		justify-content: space-around;
		align-items: center;
		.control-item {
			width: 130rpx;
		}
	}
	.stat-box {
		color: #fff;
		margin: 20rpx 20rpx 0;
		padding: 30rpx;
		border-radius: 10rpx;
		background: #ffffff51;
		display: flex;
		justify-content: space-around;
		.num {
			font-size: 60rpx;
			margin: 0 30rpx;
			
		}
		.green {
			color: #38E2B1;
		}
	}
	.card-box {
		margin: -10rpx 20rpx 0!important;
		.card-item {
			border-radius: 10rpx;
			background: #F1F6FD;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #003E8E;
			}
			.num {
				margin: 15rpx 0;
			}
		}
	}
}
</style>