<script lang="ts" setup>
// 导入部分
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { ref, watch, onMounted } from 'vue';
import { Page } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ElSelect, ElOption, ElButton, ElSpace, ElRadioGroup, ElRadioButton } from 'element-plus';

// 类型定义
interface TabOption {
  label: string;
  value: 'station' | 'area' | 'stationManage' | 'stationStaff' | 'areaStaff' | 'headStaff';
}

interface StationOption {
  label: string;
  value: string;
}

interface EvaluationItem {
  id: number;
  dimension: string;
  indicator: string;
  currentScore: number;
  currentValue: string;
  lastValue: string;
  comparison: '进步' | '持平' | '退步';
  maxValue: string;
  standard: string;
}

// 响应式数据
// Tab切换数据
const activeTab = ref<'station' | 'area' | 'stationManage' | 'stationStaff' | 'areaStaff' | 'headStaff'>('station');
const tabOptions: TabOption[] = [
  { label: '油站', value: 'station' },
  { label: '片区', value: 'area' },
  { label: '油站管理', value: 'stationManage' },
  { label: '油站员工', value: 'stationStaff' },
  { label: '片区人员', value: 'areaStaff' },
  { label: '总部人员', value: 'headStaff' },
];

// 搜索相关数据
const periodType = ref<'week' | 'month'>('week');
const dateRange = ref<string[]>([]);
const selectedStation = ref('');
const stationOptions: StationOption[] = [
  { label: '油站1', value: 'station1' },
  { label: '油站2', value: 'station2' },
  { label: '油站3', value: 'station3' },
];

// 图表相关数据
const radarChartRef = ref<EchartsUIType>();
const trendChartRef = ref<EchartsUIType>();
const { renderEcharts: renderRadarEcharts } = useEcharts(radarChartRef);
const { renderEcharts: renderTrendEcharts } = useEcharts(trendChartRef);

// 将十六进制颜色转换为带透明度的rgba颜色
const hexToRgba = (hex: string, opacity: number): string => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};

// 格式化日期为 YYYY-MM-DD 格式
const formatDateToYMD = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 获取当前周的开始和结束日期（周一到周日）
const getCurrentWeekRange = (): string[] => {
  const today = new Date();
  const dayOfWeek = today.getDay() || 7; // 将周日从0改为7
  const startOfWeek = new Date(today);
  startOfWeek.setDate(today.getDate() - dayOfWeek + 1); // 周一
  const endOfWeek = new Date(startOfWeek);
  endOfWeek.setDate(startOfWeek.getDate() + 6); // 周日
  return [formatDateToYMD(startOfWeek), formatDateToYMD(endOfWeek)];
};

// 获取当前月的开始和结束日期
const getCurrentMonthRange = (): string[] => {
  const today = new Date();
  const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
  return [formatDateToYMD(startOfMonth), formatDateToYMD(endOfMonth)];
};

// 更新默认日期范围
const updateDefaultDateRange = () => {
  if (periodType.value === 'week') {
    // 设置为当前周的第一天到最后一天
    dateRange.value = getCurrentWeekRange();
  } else {
    // 设置为当前月的第一天到最后一天
    dateRange.value = getCurrentMonthRange();
  }
};

// 图表和数据配置
// 统一的图表颜色配置 - 确保图表颜色风格一致
const CHART_COLORS = {
  THIS_WEEK: '#5ab1ef', // 本周数据颜色
  LAST_WEEK: '#faad14', // 上周数据颜色
  LAST_MONTH: '#52c41a', // 上月同期数据颜色
  TASK_COMPLETION: '#5ab1ef', // 任务完成率颜色
  TASK_QUALITY: '#52c41a', // 任务质量颜色
  PERFORMANCE_SCORE: '#faad14', // 绩效得分颜色
  AVERAGE_SCORE: '#faad14', // 平均得分颜色
  AUTHORIZATION: '#52c41a', // 授权完成率颜色
  REVIEW_RATE: '#faad14', // 点评完成率颜色
  EFFICIENCY: '#faad14', // 效率颜色
};

// Mock数据配置 - 为不同标签页提供模拟评估数据
const MOCK_DATA_CONFIG: Record<string, EvaluationItem[]> = {
  station: [
    // 油站列表维度：总分，任务数量，任务质量，查阅情况，绩效，逾期
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 95, currentValue: '95.62%', lastValue: '82.67%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 88, currentValue: '120个', lastValue: '105个', comparison: '进步', maxValue: '150个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 92, currentValue: '98.5%', lastValue: '96.2%', comparison: '进步', maxValue: '99.0%', standard: '' },
    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 76, currentValue: '85.0%', lastValue: '80.0%', comparison: '进步', maxValue: '95.0%', standard: '' },
    { id: 5, dimension: '绩效', indicator: '绩效得分', currentScore: 89, currentValue: '89分', lastValue: '85分', comparison: '进步', maxValue: '95分', standard: '' },
    { id: 6, dimension: '逾期', indicator: '逾期率', currentScore: 72, currentValue: '5.2%', lastValue: '8.7%', comparison: '进步', maxValue: '3.0%', standard: '' },
  ],
  area: [
    // 片区列表维度：总分，任务数量，任务质量，查阅情况，绩效
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 92, currentValue: '92.35%', lastValue: '88.42%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 85, currentValue: '850个', lastValue: '780个', comparison: '进步', maxValue: '1000个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 90, currentValue: '97.2%', lastValue: '95.8%', comparison: '进步', maxValue: '99.0%', standard: '' },
    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 78, currentValue: '82.5%', lastValue: '79.0%', comparison: '进步', maxValue: '95.0%', standard: '' },
    { id: 5, dimension: '绩效', indicator: '绩效得分', currentScore: 87, currentValue: '87分', lastValue: '83分', comparison: '进步', maxValue: '95分', standard: '' },
  ],
  stationManage: [
    // 油站管理列表维度：总分，任务数量，任务质量，查阅情况，授权
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 90, currentValue: '90.45%', lastValue: '86.72%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 82, currentValue: '450个', lastValue: '420个', comparison: '进步', maxValue: '500个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 88, currentValue: '96.8%', lastValue: '94.5%', comparison: '进步', maxValue: '99.0%', standard: '' },
    { id: 4, dimension: '查阅情况', indicator: '查阅完成率', currentScore: 74, currentValue: '80.0%', lastValue: '76.5%', comparison: '进步', maxValue: '95.0%', standard: '' },
    { id: 5, dimension: '授权', indicator: '授权完成率', currentScore: 85, currentValue: '92.5%', lastValue: '88.0%', comparison: '进步', maxValue: '98.0%', standard: '' },
  ],
  stationStaff: [
    // 油站员工列表维度：总分，任务数量，任务质量
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 88, currentValue: '88.72%', lastValue: '84.36%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 84, currentValue: '95个', lastValue: '88个', comparison: '进步', maxValue: '120个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 91, currentValue: '97.8%', lastValue: '95.2%', comparison: '进步', maxValue: '99.0%', standard: '' },
  ],
  areaStaff: [
    // 片区人员列表维度：总分，任务数量，任务质量，点评，逾期
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 89, currentValue: '89.25%', lastValue: '85.68%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 86, currentValue: '780个', lastValue: '720个', comparison: '进步', maxValue: '900个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 90, currentValue: '97.0%', lastValue: '94.8%', comparison: '进步', maxValue: '99.0%', standard: '' },
    { id: 4, dimension: '点评', indicator: '点评完成率', currentScore: 79, currentValue: '85.5%', lastValue: '81.2%', comparison: '进步', maxValue: '95.0%', standard: '' },
    { id: 5, dimension: '逾期', indicator: '逾期率', currentScore: 74, currentValue: '6.8%', lastValue: '9.3%', comparison: '进步', maxValue: '3.0%', standard: '' },
  ],
  headStaff: [
    // 总部人员列表维度：总分，任务数量，任务质量，点评
    { id: 1, dimension: '总分', indicator: '总分值', currentScore: 93, currentValue: '93.48%', lastValue: '89.75%', comparison: '进步', maxValue: '95.62%', standard: '' },
    { id: 2, dimension: '任务数量', indicator: '任务完成数', currentScore: 87, currentValue: '420个', lastValue: '390个', comparison: '进步', maxValue: '500个', standard: '' },
    { id: 3, dimension: '任务质量', indicator: '任务达标率', currentScore: 94, currentValue: '98.2%', lastValue: '96.5%', comparison: '进步', maxValue: '99.0%', standard: '' },
    { id: 4, dimension: '点评', indicator: '点评完成率', currentScore: 83, currentValue: '89.0%', lastValue: '84.5%', comparison: '进步', maxValue: '95.0%', standard: '' },
  ],
};

// 雷达图配置 - 定义不同标签页的雷达图维度和数据
const RADAR_CHART_CONFIG: Record<string, { indicator: Array<{ name: string; max: number }>; radarData: number[] }> = {
  station: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [95, 92, 76, 89],
  },
  area: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [92, 90, 78, 87],
  },
  stationManage: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [90, 88, 74, 85],
  },
  stationStaff: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [88, 91, 87, 82],
  },
  areaStaff: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [89, 90, 79, 74],
  },
  headStaff: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [93, 94, 83, 88],
  },
  default: {
    indicator: [
      { name: '优异', max: 100 },
      { name: '良好', max: 100 },
      { name: '一般', max: 100 },
      { name: '差', max: 100 },
    ],
    radarData: [95, 88, 76, 92],
  },
};

// 趋势图配置 - 定义不同标签页的趋势图数据和图例
const TREND_CHART_CONFIG: Record<string, { series: any[]; legendData: string[] }> = {
  station: {
    series: [
      { name: '任务完成率', type: 'line', data: [85, 88, 90, 87, 92, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '任务质量', type: 'line', data: [88, 90, 92, 91, 93, 95], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '绩效得分', type: 'line', data: [82, 84, 86, 85, 88, 89], itemStyle: { color: CHART_COLORS.PERFORMANCE_SCORE } },
    ],
    legendData: ['任务完成率', '任务质量', '绩效得分'],
  },
  area: {
    series: [
      { name: '任务完成率', type: 'line', data: [82, 85, 88, 86, 90, 92], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '任务质量', type: 'line', data: [86, 88, 90, 89, 91, 93], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '平均得分', type: 'line', data: [80, 82, 85, 84, 86, 87], itemStyle: { color: CHART_COLORS.AVERAGE_SCORE } },
    ],
    legendData: ['任务完成率', '任务质量', '平均得分'],
  },
  stationManage: {
    series: [
      { name: '任务完成率', type: 'line', data: [80, 83, 85, 84, 88, 90], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '授权完成率', type: 'line', data: [85, 87, 89, 88, 91, 93], itemStyle: { color: CHART_COLORS.AUTHORIZATION } },
      { name: '平均得分', type: 'line', data: [78, 81, 83, 82, 85, 86], itemStyle: { color: CHART_COLORS.AVERAGE_SCORE } },
    ],
    legendData: ['任务完成率', '授权完成率', '平均得分'],
  },
  stationStaff: {
    series: [
      { name: '任务完成率', type: 'line', data: [78, 81, 83, 82, 86, 88], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '任务质量', type: 'line', data: [88, 90, 92, 91, 94, 95], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '效率', type: 'line', data: [75, 78, 80, 79, 82, 84], itemStyle: { color: CHART_COLORS.EFFICIENCY } },
    ],
    legendData: ['任务完成率', '任务质量', '效率'],
  },
  areaStaff: {
    series: [
      { name: '任务完成率', type: 'line', data: [80, 83, 85, 84, 88, 89], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '任务质量', type: 'line', data: [86, 88, 90, 89, 92, 94], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '点评完成率', type: 'line', data: [75, 78, 80, 79, 82, 84], itemStyle: { color: CHART_COLORS.REVIEW_RATE } },
    ],
    legendData: ['任务完成率', '任务质量', '点评完成率'],
  },
  headStaff: {
    series: [
      { name: '任务完成率', type: 'line', data: [85, 88, 90, 89, 93, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '任务质量', type: 'line', data: [90, 92, 94, 93, 95, 97], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '点评完成率', type: 'line', data: [78, 81, 83, 82, 86, 88], itemStyle: { color: CHART_COLORS.REVIEW_RATE } },
    ],
    legendData: ['任务完成率', '任务质量', '点评完成率'],
  },
  default: {
    series: [
      { name: '任务完成率', type: 'line', data: [85, 88, 90, 87, 92, 95], itemStyle: { color: CHART_COLORS.TASK_COMPLETION } },
      { name: '问题解决率', type: 'line', data: [80, 82, 85, 83, 86, 88], itemStyle: { color: CHART_COLORS.TASK_QUALITY } },
      { name: '效率提升', type: 'line', data: [70, 72, 75, 73, 76, 78], itemStyle: { color: CHART_COLORS.EFFICIENCY } },
    ],
    legendData: ['任务完成率', '问题解决率', '效率提升'],
  },
};

// 数据生成函数
// 根据标签页类型生成不同的mock数据 - 实现数据与视图的解耦
const generateMockData = (tabType: string): EvaluationItem[] => {
  return MOCK_DATA_CONFIG[tabType] || [];
};

// 表格配置
const evaluationColumns: VxeGridProps['columns'] = [
  { title: '维度', width: 100, field: 'dimension' },
  { title: '指标', field: 'indicator' },
  { title: '本周得分', width: 120, field: 'currentScore' },
  { title: '本周数值', width: 120, field: 'currentValue' },
  { title: '上周数值', width: 120, field: 'lastValue' },
  { title: '对比结果', width: 120, field: 'comparison', scopedSlots: { default: 'comparison' } },
  { title: '全网最高数值', width: 150, field: 'maxValue' },
  { title: '评分标准', width: 100, field: 'standard', scopedSlots: { default: 'standard' } },
];

const evaluationGridOptions: VxeGridProps = {
  columns: evaluationColumns,
  size: 'medium',
  height: '400px',
  useSearchForm: false,
  proxyConfig: {
    enabled: true,
    autoLoad: true,
    ajax: {
      query: async () => {
        // 根据当前激活的标签页返回对应的数据
        const mockData = generateMockData(activeTab.value);
        return { items: mockData, total: mockData.length };
      },
    },
  },
  rowConfig: { keyField: 'id' },
  toolbarConfig: {},
  id: 'task-evaluation-report',
};

// 创建表格实例 - 使用封装的表格组件
const [EvaluationTable, {}] = useVbenVxeGrid({
  gridOptions: evaluationGridOptions,
});

// 图表更新函数
// 更新雷达图 - 根据当前激活的标签页动态生成雷达图
const updateRadarChart = () => {
  // 获取当前标签页的雷达图配置，默认使用default配置
  const { indicator, radarData } = RADAR_CHART_CONFIG[activeTab.value] || RADAR_CHART_CONFIG.default;

  renderRadarEcharts({
    radar: {
      indicator,
      radius: '70%',
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: radarData,
            name: '本周',
            itemStyle: { color: CHART_COLORS.THIS_WEEK },
            areaStyle: { color: hexToRgba(CHART_COLORS.THIS_WEEK, 0.3) },
          },
        ],
      },
    ],
    tooltip: {
      trigger: 'item',
    },
  });
};
// 处理标签页点击事件 - 切换当前激活的标签页
const handleTabClick = (tab: string) => {
  activeTab.value = tab.paneName;
};
// 更新趋势图 - 根据当前激活的标签页动态生成趋势图
const updateTrendChart = () => {
  // 获取当前标签页的趋势图配置，默认使用default配置
  const { series, legendData } = TREND_CHART_CONFIG[activeTab.value] || TREND_CHART_CONFIG.default;

  renderTrendEcharts({
    xAxis: {
      type: 'category',
      data: ['11/04', '11/11', '11/18', '11/25', '12/02', '12/09'],
    },
    yAxis: {
      type: 'value',
      name: '得分',
      max: 100,
    },
    series,
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: legendData,
      bottom: 0,
    },
  });
};

// 事件处理函数
// 查询按钮点击事件 - 处理用户查询请求
const handleQuery = () => {
  console.log('查询条件:', {
    tab: activeTab.value,
    station: selectedStation.value,
    periodType: periodType.value,
    dateRange: dateRange.value,
  });
  // TODO: 这里可以添加实际的查询逻辑，调用API获取真实数据
  // refreshGrid(); // 刷新表格数据
  updateRadarChart(); // 更新雷达图
  updateTrendChart(); // 更新趋势图
};

// 指标说明点击事件 - 显示指标说明信息
const handleIndicatorExplain = () => {
  console.log('指标说明');
  // TODO: 这里可以添加指标说明的逻辑，如显示弹窗或跳转到说明页面
};

// 生命周期钩子和监听
// 监听时间类型变化 - 更新默认日期范围
watch(periodType, () => {
  updateDefaultDateRange();
});

// 监听标签页变化 - 重新加载数据和图表
watch(activeTab, () => {
  // refreshGrid(); // 刷新表格数据
  updateRadarChart(); // 更新雷达图
  updateTrendChart(); // 更新趋势图
});

// 组件初始化 - 设置默认数据和图表
onMounted(() => {
  updateDefaultDateRange(); // 初始化默认日期范围
  updateRadarChart(); // 初始化雷达图
  updateTrendChart(); // 更新趋势图
});
</script>

<template>
  <Page :auto-content-height="true">
    <div class="task-evaluation-report">
      <!-- Tab切换区域 - 根据不同标签页展示不同维度的数据 -->
      <div class="tab-container">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane v-for="tab in tabOptions" :key="tab.value" :label="tab.label" :name="tab.value">
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 搜索栏区域 - 提供油站选择和时间范围筛选功能 -->
      <div class="search-container">
        <ElSpace>
          <div class="search-item">
            <label>油站：</label>
            <ElSelect v-model="selectedStation" placeholder="请选择油站" style="width: 150px;">
              <ElOption v-for="station in stationOptions" :key="station.value" :label="station.label" :value="station.value" />
            </ElSelect>
          </div>
          <div class="search-item">
            <label>时间：</label>
            <ElRadioGroup v-model="periodType" size="large">
              <ElRadioButton label="week" value="week">周</ElRadioButton>
              <ElRadioButton label="month" value="month">月</ElRadioButton>
            </ElRadioGroup>
          </div>
          <div class="search-item">
            <label>选择时段：</label>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator=" 至 "
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 300px;"
            />
          </div>
        </ElSpace>
      </div>

      <!-- 操作按钮区域 - 提供查询和指标说明功能 -->
      <div class="button-container">
        <ElSpace>
          <ElButton type="primary" @click="handleQuery">查询</ElButton>
          <ElButton @click="handleIndicatorExplain">指标说明</ElButton>
        </ElSpace>
      </div>

      <!-- 任务评估报告区域 - 包含雷达图和详细数据表格 -->
      <div class="evaluation-container">
        <h3>任务评估报告</h3>
        <div class="evaluation-content">
          <!-- 雷达图区域 - 展示多维度评估指标的综合分析 -->
          <div class="radar-chart">
            <EchartsUI ref="radarChartRef" style="width: 100%; height: 400px;" />
          </div>
          <!-- 数据表格区域 - 展示各项评估指标的详细数值和对比结果 -->
          <div class="evaluation-table">
            <EvaluationTable>
              <!-- 对比结果插槽 - 根据进步/持平/退步显示不同颜色 -->
              <template #comparison="{ row }">
                <span :style="{
                  color: row.comparison === '进步' ? '#52c41a' : 
                         row.comparison === '持平' ? '#faad14' : '#f5222d'
                }">{{ row.comparison }}</span>
              </template>
              <!-- 评分标准插槽 - 提供查看详细评分标准的入口 -->
              <template #standard>
                <el-button type="text" size="small">查看</el-button>
              </template>
            </EvaluationTable>
          </div>
        </div>
      </div>

      <!-- 总体趋势分析区域 - 展示评估指标的历史变化趋势 -->
      <div class="trend-container">
        <h3>总体趋势分析</h3>
        <div class="trend-chart">
          <EchartsUI ref="trendChartRef" style="width: 100%; height: 400px;" />
        </div>
      </div>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.task-evaluation-report {
  min-height: 100vh;
  padding: 16px;
  background-color: #fff;

  .tab-container {
    margin-bottom: 16px;
  }

  .search-container {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 6px;

    .search-item {
      display: flex;
      align-items: center;

      label {
        margin-right: 8px;
        font-weight: 500;
      }
    }
  }

  .button-container {
    margin-bottom: 16px;
  }

  .evaluation-container {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 6px;

    h3 {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
    }

    .evaluation-content {
      display: flex;
      gap: 16px;

      .radar-chart {
        flex: 0.4; /* 雷达图占40%宽度 */
        min-width: 300px;
      }

      .evaluation-table {
        flex: 0.6; /* 列表占60%宽度 */
        min-width: 400px;
      }
    }
  }

  .trend-container {
    padding: 16px;
    background-color: #fff;
    border-radius: 6px;

    h3 {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
    }

    .trend-chart {
      width: 100%;
    }
  }
}
</style>
