<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch, reactive } from 'vue';
import { Search, Upload, Check, FolderAdd, Document } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import request from '@/utils/request';
import { getOverview } from '@/api/home/dashboard';
import type { OverviewVO } from '@/api/home/dashboard/types';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';

const { t } = useI18n();

// 总览数据
const overviewData = ref<OverviewVO>({
  total: 0,
  submitted: 0,
  toSubmit: 0,
  lateToSubmit: 0,
  lateSubmitted: 0
});

// 获取总览数据
const getOverviewData = async () => {
  try {
    const res = await getOverview();
    if (res.code === 200 && res.data) {
      overviewData.value = res.data;
    }
  } catch (error) {
    console.error(t('home.dashboard.message.getOverviewFailed'), error);
  }
};

// 计算占比
const calculatePercentage = (value: number, total: number): string => {
  if (total === 0) return '0.0%';
  return ((value / total) * 100).toFixed(1) + '%';
};

// 待办统计
const todoCount = ref({
  toSubmit: 0,
  toAudit: 0,
  toFiling: 0,
  toQc: 0
});

// 获取待办统计
const getTodoCount = async () => {
  try {
    const res = await request({
      url: '/home/dashboard/countTodo',
      method: 'get'
    });
    if (res.code === 200 && res.data) {
      todoCount.value = res.data;
    }
  } catch (error) {
    console.error(t('home.dashboard.message.getTodoCountFailed'), error);
  }
};

// 项目列表相关
const loading = ref(false);
const projectList = ref<any[]>([]);
const total = ref(0);
const queryParams = reactive({
  content: '',
  pageNum: 1,
  pageSize: 10
});

// 获取项目列表
const getProjectList = async () => {
  try {
    loading.value = true;
    const res = await request({
      url: '/home/dashboard/list',
      method: 'get',
      params: queryParams
    });

    if (res.code === 200) {
      projectList.value = res.rows || [];
      total.value = res.total || 0;
    } else {
      ElMessage.error(res.msg || t('home.dashboard.message.getProjectListFailed'));
    }
  } catch (error) {
    console.error(t('home.dashboard.message.getProjectListFailed'), error);
    ElMessage.error(t('home.dashboard.message.getProjectListFailed'));
  } finally {
    loading.value = false;
  }
};

// 搜索项目
const handleSearch = () => {
  queryParams.pageNum = 1;
  getProjectList();
};

// 重置搜索
const resetSearch = () => {
  queryParams.content = '';
  handleSearch();
};

// 处理分页变化
const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val;
  getProjectList();
};

// 处理每页条数变化
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val;
  queryParams.pageNum = 1;
  getProjectList();
};

// 格式化时间显示
const formatTime = (timeStr: string, dateOnly = false) => {
  if (!timeStr) return '-';
  try {
    const options: Intl.DateTimeFormatOptions = dateOnly
      ? {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        }
      : {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        };

    const formatted = new Date(timeStr).toLocaleString('zh-CN', options);
    return formatted.replace(/\//g, '-');
  } catch (e) {
    return timeStr; // 如果解析失败，返回原始字符串
  }
};

// 获取进度条状态
const getProgressStatus = (percentage: number) => {
  if (percentage === null || percentage === undefined) return '';
  if (percentage < 30) return 'exception';
  if (percentage < 70) return 'warning';
  return 'success';
};

// 查看项目详情
const viewProjectDetail = (row: any) => {
  // TODO: 实现跳转到项目详情页
  // 这里可以添加路由跳转逻辑，例如：
  // router.push({
  //   path: '/project/detail',
  //   query: { id: row.id }
  // });
};

// Echarts 实例
const pieChartRef = ref<HTMLElement>();
const barChartRef = ref<HTMLElement>();
const lineChartRef = ref<HTMLElement>();
let pieChart: echarts.ECharts | null = null;
let barChart: echarts.ECharts | null = null;
let lineChart: echarts.ECharts | null = null;

// 初始化饼图 - 项目状态分布
const initPieChart = () => {
  if (!pieChartRef.value) return;

  pieChart = echarts.init(pieChartRef.value);

  const option: EChartsOption = {
    title: {
      text: t('home.dashboard.charts.projectStatus.title'),
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 16,
        fontWeight: 600
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: t('home.dashboard.charts.projectStatus.name'),
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: overviewData.value.submitted, name: t('home.dashboard.charts.projectStatus.submitted'), itemStyle: { color: '#67c23a' } },
          { value: overviewData.value.toSubmit, name: t('home.dashboard.charts.projectStatus.toSubmit'), itemStyle: { color: '#409eff' } },
          { value: overviewData.value.lateToSubmit, name: t('home.dashboard.charts.projectStatus.lateToSubmit'), itemStyle: { color: '#f56c6c' } },
          { value: overviewData.value.lateSubmitted, name: t('home.dashboard.charts.projectStatus.lateSubmitted'), itemStyle: { color: '#e6a23c' } }
        ]
      }
    ]
  };

  pieChart.setOption(option);
};

// 初始化柱状图 - 待办任务统计
const initBarChart = () => {
  if (!barChartRef.value) return;

  barChart = echarts.init(barChartRef.value);

  const option: EChartsOption = {
    title: {
      text: t('home.dashboard.charts.todoStats.title'),
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 16,
        fontWeight: 600
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '60px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [
        t('home.dashboard.charts.todoStats.toSubmit'),
        t('home.dashboard.charts.todoStats.toAudit'),
        t('home.dashboard.charts.todoStats.toFiling'),
        t('home.dashboard.charts.todoStats.toQc')
      ],
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    yAxis: {
      type: 'value',
      name: t('home.dashboard.charts.todoStats.quantity')
    },
    series: [
      {
        name: t('home.dashboard.charts.todoStats.name'),
        type: 'bar',
        barWidth: '50%',
        data: [
          { value: todoCount.value.toSubmit, itemStyle: { color: '#409eff' } },
          { value: todoCount.value.toAudit, itemStyle: { color: '#e6a23c' } },
          { value: todoCount.value.toFiling, itemStyle: { color: '#67c23a' } },
          { value: todoCount.value.toQc, itemStyle: { color: '#909399' } }
        ],
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  };

  barChart.setOption(option);
};

// 初始化雷达图 - 项目完成度分析
const initLineChart = () => {
  if (!lineChartRef.value) return;

  lineChart = echarts.init(lineChartRef.value);

  // 计算各项指标的完成度（基于现有数据）
  const total = overviewData.value.total || 1; // 避免除以0
  const submittedRate = ((overviewData.value.submitted / total) * 100).toFixed(1);
  const toSubmitRate = ((overviewData.value.toSubmit / total) * 100).toFixed(1);
  const onTimeRate = (((overviewData.value.submitted - overviewData.value.lateSubmitted) / total) * 100).toFixed(1);

  // 计算待办完成度（假设总待办为所有待办之和）
  const totalTodo = todoCount.value.toSubmit + todoCount.value.toAudit + todoCount.value.toFiling + todoCount.value.toQc || 1;
  const todoProgress = ((todoCount.value.toSubmit / totalTodo) * 100).toFixed(1);

  const option: EChartsOption = {
    title: {
      text: t('home.dashboard.charts.completion.title'),
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 16,
        fontWeight: 600
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [t('home.dashboard.charts.completion.name')],
      top: 40
    },
    radar: {
      indicator: [
        { name: t('home.dashboard.charts.completion.submissionRate'), max: 100 },
        { name: t('home.dashboard.charts.completion.onTimeRate'), max: 100 },
        { name: t('home.dashboard.charts.completion.todoProcessRate'), max: 100 },
        { name: t('home.dashboard.charts.completion.projectProgress'), max: 100 },
        { name: t('home.dashboard.charts.completion.qualityRate'), max: 100 }
      ],
      center: ['50%', '60%'],
      radius: '60%',
      splitNumber: 4,
      axisName: {
        color: '#606266',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#dcdfe6'
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(64, 158, 255, 0.05)', 'rgba(64, 158, 255, 0.1)']
        }
      }
    },
    series: [
      {
        name: t('home.dashboard.charts.completion.name'),
        type: 'radar',
        data: [
          {
            value: [
              parseFloat(submittedRate),
              parseFloat(onTimeRate),
              100 - parseFloat(todoProgress),
              parseFloat(submittedRate),
              parseFloat(onTimeRate)
            ],
            name: t('home.dashboard.charts.completion.name'),
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
              ])
            },
            itemStyle: {
              color: '#409eff'
            },
            lineStyle: {
              color: '#409eff',
              width: 2
            }
          }
        ]
      }
    ]
  };

  lineChart.setOption(option);
};

// 更新图表数据
const updateCharts = () => {
  if (pieChart) {
    pieChart.setOption({
      series: [
        {
          data: [
            { value: overviewData.value.submitted, name: t('home.dashboard.charts.projectStatus.submitted') },
            { value: overviewData.value.toSubmit, name: t('home.dashboard.charts.projectStatus.toSubmit') },
            { value: overviewData.value.lateToSubmit, name: t('home.dashboard.charts.projectStatus.lateToSubmit') },
            { value: overviewData.value.lateSubmitted, name: t('home.dashboard.charts.projectStatus.lateSubmitted') }
          ]
        }
      ]
    });
  }

  if (barChart) {
    barChart.setOption({
      series: [
        {
          data: [
            { value: todoCount.value.toSubmit, itemStyle: { color: '#409eff' } },
            { value: todoCount.value.toAudit, itemStyle: { color: '#e6a23c' } },
            { value: todoCount.value.toFiling, itemStyle: { color: '#67c23a' } },
            { value: todoCount.value.toQc, itemStyle: { color: '#909399' } }
          ]
        }
      ]
    });
  }

  if (lineChart) {
    const total = overviewData.value.total || 1;
    const submittedRate = ((overviewData.value.submitted / total) * 100).toFixed(1);
    const toSubmitRate = ((overviewData.value.toSubmit / total) * 100).toFixed(1);
    const onTimeRate = (((overviewData.value.submitted - overviewData.value.lateSubmitted) / total) * 100).toFixed(1);

    const totalTodo = todoCount.value.toSubmit + todoCount.value.toAudit + todoCount.value.toFiling + todoCount.value.toQc || 1;
    const todoProgress = ((todoCount.value.toSubmit / totalTodo) * 100).toFixed(1);

    lineChart.setOption({
      series: [
        {
          data: [
            {
              value: [
                parseFloat(submittedRate),
                parseFloat(onTimeRate),
                100 - parseFloat(todoProgress),
                parseFloat(submittedRate),
                parseFloat(onTimeRate)
              ]
            }
          ]
        }
      ]
    });
  }
};

// 监听窗口大小变化
const handleResize = () => {
  pieChart?.resize();
  barChart?.resize();
  lineChart?.resize();
};

onMounted(async () => {
  await getOverviewData();
  await getTodoCount();
  await getProjectList();

  // 等待 DOM 更新后初始化图表
  await nextTick();
  initPieChart();
  initBarChart();
  initLineChart();

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 销毁图表实例
  pieChart?.dispose();
  barChart?.dispose();
  lineChart?.dispose();

  // 移除事件监听
  window.removeEventListener('resize', handleResize);
});

// 监听数据变化，更新图表
watch([overviewData, todoCount], () => {
  updateCharts();
}, { deep: true });
</script>

<template>
  <div class="workbench-container">

    <!-- 待办统计卡片 -->
    <div class="todo-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="todo-card todo-submit">
            <div class="todo-content">
              <div class="todo-icon">
                <el-icon size="32"><Upload /></el-icon>
              </div>
              <div class="todo-info">
                <div class="todo-count">{{ todoCount.toSubmit }}</div>
                <div class="todo-label">{{ t('home.dashboard.todoCards.toSubmit') }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="todo-card todo-audit">
            <div class="todo-content">
              <div class="todo-icon">
                <el-icon size="32"><Check /></el-icon>
              </div>
              <div class="todo-info">
                <div class="todo-count">{{ todoCount.toAudit }}</div>
                <div class="todo-label">{{ t('home.dashboard.todoCards.toAudit') }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="todo-card todo-filing">
            <div class="todo-content">
              <div class="todo-icon">
                <el-icon size="32"><FolderAdd /></el-icon>
              </div>
              <div class="todo-info">
                <div class="todo-count">{{ todoCount.toFiling }}</div>
                <div class="todo-label">{{ t('home.dashboard.todoCards.toFiling') }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="todo-card todo-qc">
            <div class="todo-content">
              <div class="todo-icon">
                <el-icon size="32"><Document /></el-icon>
              </div>
              <div class="todo-info">
                <div class="todo-count">{{ todoCount.toQc }}</div>
                <div class="todo-label">{{ t('home.dashboard.todoCards.toQc') }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 总览数据 -->
    <div class="overview-section" v-hasPermi="['home:dashboard:index']">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('home.dashboard.overview.title') }}</span>
          </div>
        </template>
        <div class="overview-content">
          <div class="overview-item">
            <div class="overview-value">{{ overviewData.submitted }}</div>
            <div class="overview-percentage">{{ calculatePercentage(overviewData.submitted, overviewData.total) }}</div>
            <div class="overview-label">{{ t('home.dashboard.overview.submitted') }}</div>
          </div>
          <div class="overview-item">
            <div class="overview-value">{{ overviewData.toSubmit }}</div>
            <div class="overview-percentage">{{ calculatePercentage(overviewData.toSubmit, overviewData.total) }}</div>
            <div class="overview-label">{{ t('home.dashboard.overview.toSubmit') }}</div>
          </div>
          <div class="overview-item">
            <div class="overview-value">{{ overviewData.lateToSubmit }}</div>
            <div class="overview-percentage">{{ calculatePercentage(overviewData.lateToSubmit, overviewData.total) }}</div>
            <div class="overview-label">{{ t('home.dashboard.overview.lateToSubmit') }}</div>
          </div>
          <div class="overview-item">
            <div class="overview-value">{{ overviewData.lateSubmitted }}</div>
            <div class="overview-percentage">{{ calculatePercentage(overviewData.lateSubmitted, overviewData.total) }}</div>
            <div class="overview-label">{{ t('home.dashboard.overview.lateSubmitted') }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据图表 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="chart-card">
            <div ref="pieChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="chart-card">
            <div ref="barChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="chart-card">
            <div ref="lineChartRef" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 项目列表 -->
    <div class="project-list">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('home.dashboard.projectList.title') }}</span>
          </div>
        </template>

        <!-- 搜索栏 -->
        <div class="search-container">
          <el-input
            v-model="queryParams.content"
            :placeholder="t('home.dashboard.projectList.search.placeholder')"
            style="width: 300px"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button :icon="Search" @click="handleSearch" />
            </template>
          </el-input>
          <el-button @click="resetSearch">{{ t('home.dashboard.projectList.search.reset') }}</el-button>
        </div>

        <!-- 项目表格 -->
        <el-table v-loading="loading" :data="projectList" border style="width: 100%; margin-top: 15px">
          <el-table-column prop="id" :label="t('home.dashboard.projectList.table.id')" width="80" align="center" />
          <el-table-column prop="code" :label="t('home.dashboard.projectList.table.code')" min-width="150" />
          <el-table-column prop="name" :label="t('home.dashboard.projectList.table.name')" min-width="180" show-overflow-tooltip />

          <!-- 项目进度相关 -->
          <el-table-column prop="onTimeSubmissionRate" :label="t('home.dashboard.projectList.table.onTimeSubmissionRate')" min-width="130" align="center">
            <template #default="{ row }">
              {{
                row.onTimeSubmissionRate !== null && row.onTimeSubmissionRate !== undefined && typeof row.onTimeSubmissionRate === 'number'
                  ? row.onTimeSubmissionRate.toFixed(2) + '%'
                  : '-'
              }}
            </template>
          </el-table-column>

          <el-table-column prop="lateSubmissionCount" :label="t('home.dashboard.projectList.table.lateSubmissionCount')" min-width="110" align="center" />

          <el-table-column prop="submissionProgress" :label="t('home.dashboard.projectList.table.submissionProgress')" min-width="150">
            <template #default="{ row }">
              <el-progress :percentage="row.submissionProgress || 0" :show-text="false" :status="getProgressStatus(row.submissionProgress)" />
              <span style="margin-left: 10px">{{ row.submissionProgress !== null ? row.submissionProgress + '%' : '-' }}</span>
            </template>
          </el-table-column>

          <!-- 项目负责人 -->
          <el-table-column prop="pdGpd" :label="t('home.dashboard.projectList.table.pdGpd')" min-width="150" show-overflow-tooltip />
          <el-table-column prop="pmGpm" :label="t('home.dashboard.projectList.table.pmGpm')" min-width="150" show-overflow-tooltip />
          <el-table-column prop="ctaGcta" :label="t('home.dashboard.projectList.table.ctaGcta')" min-width="150" show-overflow-tooltip />

          <!-- 时间信息 -->
          <el-table-column prop="createTime" :label="t('home.dashboard.projectList.table.createTime')" min-width="160" align="center">
            <template #default="{ row }">
              {{ formatTime(row.createTime) }}
            </template>
          </el-table-column>

          <el-table-column prop="updateTime" :label="t('home.dashboard.projectList.table.updateTime')" min-width="160" align="center">
            <template #default="{ row }">
              {{ formatTime(row.updateTime) }}
            </template>
          </el-table-column>

          <el-table-column prop="startTime" :label="t('home.dashboard.projectList.table.startTime')" min-width="120" align="center">
            <template #default="{ row }">
              {{ formatTime(row.startTime, true) }}
            </template>
          </el-table-column>

          <el-table-column prop="endTime" :label="t('home.dashboard.projectList.table.endTime')" min-width="120" align="center">
            <template #default="{ row }">
              {{ formatTime(row.endTime, true) }}
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.workbench-container {
  padding: 20px;

  .overview-section {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .overview-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 20px 0;

      .overview-item {
        text-align: center;
        flex: 1;

        .overview-value {
          font-size: 32px;
          font-weight: 700;
          color: #303133;
          line-height: 1.2;
        }

        .overview-percentage {
          font-size: 18px;
          color: #606266;
          margin-top: 8px;
          font-weight: 500;
        }

        .overview-label {
          font-size: 14px;
          color: #909399;
          margin-top: 8px;
        }

        &:not(:last-child) {
          border-right: 1px solid #ebeef5;
        }
      }
    }
  }

  .todo-cards {
    margin-bottom: 20px;

    .todo-card {
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
      }

      .todo-content {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .todo-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
        }

        .todo-info {
          .todo-count {
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2;
          }

          .todo-label {
            font-size: 14px;
            color: #909399;
            margin-top: 5px;
          }
        }
      }

      &.todo-submit {
        .todo-icon {
          background-color: rgba(64, 158, 255, 0.1);
          color: #409eff;
        }
        .todo-count {
          color: #409eff;
        }
      }

      &.todo-audit {
        .todo-icon {
          background-color: rgba(230, 162, 60, 0.1);
          color: #e6a23c;
        }
        .todo-count {
          color: #e6a23c;
        }
      }

      &.todo-filing {
        .todo-icon {
          background-color: rgba(103, 194, 58, 0.1);
          color: #67c23a;
        }
        .todo-count {
          color: #67c23a;
        }
      }

      &.todo-qc {
        .todo-icon {
          background-color: rgba(144, 147, 153, 0.1);
          color: #909399;
        }
        .todo-count {
          color: #909399;
        }
      }
    }
  }

  .project-list {
    margin-top: 20px;
  }

  .project-list {
    .search-container {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }

    :deep(.el-table) {
      .cell {
        white-space: nowrap;
      }
    }
  }

  .charts-section {
    margin-bottom: 20px;

    .chart-card {
      height: 100%;

      :deep(.el-card__body) {
        padding: 10px;
      }

      .chart-container {
        width: 100%;
        height: 350px;
      }
    }
  }
}
</style>
