<template>
  <div class="workbench">
    <!-- 时间筛选 -->
    <div class="filter-bar">
      <el-radio-group v-model="period" size="small" @change="loadStats">
        <el-radio-button label="day">{{ $t('common.today') }}</el-radio-button>
        <el-radio-button label="week">{{ $t('common.thisWeek') }}</el-radio-button>
        <el-radio-button label="month">{{ $t('common.thisMonth') }}</el-radio-button>
        <el-radio-button label="year">{{ $t('common.thisYear') }}</el-radio-button>
        <el-radio-button label="custom">{{ $t('common.customDate') }}</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-if="period === 'custom'"
        v-model="dateRange"
        type="daterange"
        range-separator="-"
        :start-placeholder="$t('common.startDate')"
        :end-placeholder="$t('common.endDate')"
        value-format="YYYY-MM-DD"
        size="small"
        style="margin-left: 12px"
        @change="loadStats"
      />
    </div>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card" v-for="card in cards" :key="card.label">
        <div class="stat-icon" :style="{ background: card.bg }">
          <el-icon :size="22" :color="card.color"><component :is="card.icon" /></el-icon>
        </div>
        <div class="stat-info">
          <div class="stat-value">{{ card.value }}</div>
          <div class="stat-label">{{ card.label }}</div>
        </div>
      </div>
    </div>

    <!-- 趋势图 -->
    <el-card class="trend-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>{{ $t('chart.title') }}</span>
          <div class="legend">
            <span class="legend-item"><i class="dot" style="background:#5B8FF9" />{{ $t('chart.submit') }}</span>
            <span class="legend-item"><i class="dot" style="background:#5AD8A6" />{{ $t('chart.complete') }}</span>
          </div>
        </div>
      </template>
      <v-chart class="chart" :option="chartOption" autoresize />
    </el-card>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { Tickets, Check, Bell, Warning } from "@element-plus/icons-vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
} from "echarts/components";
import { useI18n } from "vue-i18n";
import { getWorkbench } from "@/service/modular/hospital";

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent]);

const { t: $t } = useI18n();

const period = ref("month");
const dateRange = ref([]);

const stats = ref({
  totalOrders: 0,
  completedOrders: 0,
  pendingOrders: 0,
  highPriorityOrders: 0,
  trendData: [],
});

const cards = computed(() => [
  {
    label: $t('stat.total'),
    value: stats.value.totalOrders,
    icon: Tickets,
    color: "#5B8FF9",
    bg: "rgba(91,143,249,0.12)",
  },
  {
    label: $t('stat.completed'),
    value: stats.value.completedOrders,
    icon: Check,
    color: "#5AD8A6",
    bg: "rgba(90,216,166,0.12)",
  },
  {
    label: $t('stat.pending'),
    value: stats.value.pendingOrders,
    icon: Bell,
    color: "#F6BD16",
    bg: "rgba(246,189,22,0.12)",
  },
  {
    label: $t('stat.highPriority'),
    value: stats.value.highPriorityOrders,
    icon: Warning,
    color: "#F4664A",
    bg: "rgba(244,102,74,0.12)",
  },
]);

const chartOption = computed(() => {
  const data = stats.value.trendData || [];
  const dates = data.map((d) => d.date);
  const submit = data.map((d) => d.submitCount);
  const complete = data.map((d) => d.completeCount);
  return {
    grid: { left: 30, right: 20, top: 30, bottom: 30 },
    tooltip: { trigger: "axis" },
    xAxis: { type: "category", data: dates, boundaryGap: false, axisLine: { lineStyle: { color: "#e4e7ed" } } },
    yAxis: { type: "value", axisLine: { show: false }, splitLine: { lineStyle: { color: "#f0f2f5" } } },
    series: [
      {
        name: $t('chart.submit'),
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        data: submit,
        lineStyle: { color: "#5B8FF9", width: 2 },
        itemStyle: { color: "#5B8FF9" },
        areaStyle: { color: "rgba(91,143,249,0.08)" },
      },
      {
        name: $t('chart.complete'),
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        data: complete,
        lineStyle: { color: "#5AD8A6", width: 2 },
        itemStyle: { color: "#5AD8A6" },
        areaStyle: { color: "rgba(90,216,166,0.08)" },
      },
    ],
  };
});

const loadStats = async () => {
  const params = { period: period.value };
  if (period.value === "custom" && dateRange.value?.length === 2) {
    params.start = dateRange.value[0];
    params.end = dateRange.value[1];
  }
  try {
    const data = await getWorkbench(params);
    stats.value = data || stats.value;
  } catch (_) {
    /* request 层已提示 */
  }
};

onMounted(loadStats);
</script>

<style scoped lang="scss">
.workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-bar {
  background: #fff;
  padding: 12px 16px;
  border-radius: 6px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;

  .stat-card {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;

    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stat-info {
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }
      .stat-label {
        font-size: 13px;
        color: #909399;
        margin-top: 4px;
      }
    }
  }
}

.trend-card {
  :deep(.el-card__header) {
    padding: 12px 16px;
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .legend {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: #606266;
      .legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        .dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }
      }
    }
  }
  .chart {
    height: 340px;
  }
}
</style>
