<!-- ChargingStats.vue（充放电统计） -->
<template>
  <div class="charging-stats">
    <!-- 顶部统计卡片和图表区域 -->
    <div class="stats-container">
      <!-- 左侧统计卡片 -->
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-icon">
            <img src="@/assets/images/battery_sum.png" alt="充电次数" />
          </div>
          <div class="stat-content">
            <div class="stat-title">充电总次数</div>
            <div class="stat-value">{{ stats.totalCount }}</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <img src="@/assets/images/battery_health.png" alt="电池健康状态" />
          </div>
          <div class="stat-content">
            <div class="stat-title">电池健康状态</div>
            <div class="stat-value">{{ stats.health }}%</div>
          </div>
        </div>
      </div>
      
      <!-- 右侧图表区域 -->
      <div class="charts-area">
        <!-- 充电时长分析图表 -->
        <charging-duration-chart />
        
        <!-- 充放电量对比图表 -->
        <charging-comparison-chart />
      </div>
    </div>
    
    <!-- 日期筛选区域 -->
    <div class="filter-bar">
      <div class="date-range">
        <span class="date-label">充电记录</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="default"
          class="date-picker"
        />
        <el-button type="primary" class="filter-btn" @click="doFilter">搜索</el-button>
        <el-button class="reset-btn" @click="resetFilter">重置</el-button>
      </div>
    </div>
    
    <!-- 表格区域 -->
    <el-table
      :data="pagedData"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#343744', color: '#96A0B5', fontWeight: 'normal' }"
      class="custom-table"
    >
      <el-table-column prop="index" label="序号" width="60" align="center" />
      <el-table-column prop="carId" label="车辆编号" min-width="180" />
      <el-table-column prop="vin" label="车辆识别码" min-width="120" />
      <el-table-column prop="chargeStatus" label="充电状态" width="100" />
      <el-table-column prop="startTime" label="开始时间" min-width="160" />
      <el-table-column prop="endTime" label="结束时间" min-width="160" />
      <el-table-column prop="chargePile" label="充电桩" width="100" />
      <el-table-column prop="operator" label="充电操作员" width="120" />
    </el-table>
    
    <!-- 分页组件 -->
    <pagination
      v-show="filteredData.length > 0"
      :total="filteredData.length"
      v-model:page="page"
      v-model:limit="pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import Pagination from '@/components/Pagination/index.vue';
import ChargingDurationChart from './charts/ChargingDurationChart.vue';
import ChargingComparisonChart from './charts/ChargingComparisonChart.vue';

// 模拟数据
const stats = { totalCount: 50, health: 85 };
const dateRange = ref(null);
const page = ref(1);
const pageSize = ref(10);

// 模拟表格数据
const allData = [
  {
    index: 1,
    carId: "DONGLIHANUN5695",
    vin: "ANA45332156",
    chargeStatus: "停车充电",
    startTime: "2024-08-17 15:48:30",
    endTime: "2024-08-17 17:48:30",
    chargePile: "T3点位",
    operator: "张三",
  },
  {
    index: 2,
    carId: "DONGLIHANUN5695",
    vin: "ANA45332156",
    chargeStatus: "停车充电",
    startTime: "2024-08-17 15:48:30",
    endTime: "2024-08-17 17:48:30",
    chargePile: "T3点位",
    operator: "张三",
  },
  {
    index: 3,
    carId: "DONGLIHANUN5695",
    vin: "ANA45332156",
    chargeStatus: "停车充电",
    startTime: "2024-08-17 15:48:30",
    endTime: "2024-08-17 17:48:30",
    chargePile: "T3点位",
    operator: "张三",
  },
];

// 筛选后的数据
const filteredData = computed(() => {
  if (!dateRange.value) return allData;
  // 实际项目中应该根据日期范围筛选
  return allData;
});

// 分页后的数据
const pagedData = computed(() => {
  const start = (page.value - 1) * pageSize.value;
  return filteredData.value.slice(start, start + pageSize.value);
});

// 筛选方法
function doFilter() {
  page.value = 1;
}

// 重置筛选
function resetFilter() {
  dateRange.value = null;
  page.value = 1;
}

// 处理分页
function handlePagination({ page: newPage, limit: newLimit }) {
  page.value = newPage;
  pageSize.value = newLimit;
}
</script>

<style scoped lang="scss">
.charging-stats {
  padding: 0;
  color: #fff;
}

/* 顶部统计和图表容器 */
.stats-container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;

}

/* 左侧统计卡片 */
.stats-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 200px;
}

.stat-card {
  background: #343744;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #343744;
  color: #4EA1FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #343744;
  color: #4EA1FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-title {
  color: #96A0B5;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

/* 右侧图表区域 */
.charts-area {
  flex: 1;
  display: flex;
  gap: 16px;
}

/* 筛选区域 */
.filter-bar {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-label {
  font-size: 16px;
  font-weight: 500;
}

.date-picker {
  width: 300px;
}

.filter-btn {
  background: #347AE2;
  border-color: #347AE2;
}

.reset-btn {
  background: #343744;
  border-color: #343744;
  color: #96A0B5;
}

/* 表格样式 */
.custom-table {
  background-color: #292c38 !important;
  color: #ffffff;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  
  // 防止表格闪白
  :deep(.el-loading-mask) {
    background-color: rgba(41, 44, 56, 0.7) !important;
  }
  
  :deep(.el-table__empty-block) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__empty-text) {
    color: #96A0B5 !important;
  }
  
  // 确保整个表格区域背景色
  :deep(.el-table) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__body) {
    background-color: #292c38 !important;
  }
  
  :deep(.el-table__inner-wrapper::before) {
    display: none; /* 隐藏表格顶部的边框线 */
  }
  
  :deep(.el-table__header) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
  }
  
  :deep(.el-table__header-wrapper) {
    th {
      background-color: #343744 !important;
      color: #96A0B5 !important;
      font-weight: normal;
      border-bottom: none; /* 移除th底部边线 */
    }
    
    tr th.el-table__cell:first-child {
      border-top-left-radius: 6px;
      
      .cell {
        border-top-left-radius: 6px;
      }
    }
    
    tr th.el-table__cell:last-child {
      border-top-right-radius: 4px;
      
      .cell {
        border-top-right-radius: 4px;
      }
    }
    
    .el-table__header th.el-table__cell {
      background-color: #343744 !important;
      color: #96A0B5;
    }
    
    tr {
      background-color: #343744 !important;
    }
  }
  
  :deep(.el-table__body-wrapper) {
    td {
      height: 68px !important;
      background-color: #292c38;
      color: #ffffff;
      border-bottom: 1px solid #4C4F5F;
    }
  }
  
  :deep(.el-table__body tr:hover > td) {
    background: #2B3B5A !important;
  }
}

/* 日期选择器样式 */
:deep(.el-date-editor) {
  --el-datepicker-border-color: #343744;
  --el-datepicker-inner-border-color: #343744;
  --el-datepicker-inrange-bg-color: #343744;
  
  .el-input__wrapper {
    background-color: #343744 !important;
    box-shadow: none !important;
  }
  
  .el-input__inner {
    color: #fff !important;
  }
  
  .el-range-separator {
    color: #96A0B5 !important;
  }
}
</style>
