<template>
  <div class="machine-production">
    <!-- 筛选栏 -->
    <el-form :inline="true" :model="filters" class="filter-bar">
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="车间">
        <el-select v-model="filters.workshopId" value-key="value" placeholder="请选择车间" clearable style="min-width:200px">
          <el-option
            v-for="w in options.workshops"
            :key="w.value"
            :label="w.label"
            :value="w.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="机床">
        <el-select
          v-model="filters.machineIds"
          value-key="value"
          placeholder="请选择机床"
          clearable
          filterable
          multiple
          style="min-width:200px"
        >
          <el-option
            v-for="m in options.machines"
            :key="m.value"
            :label="m.label"
            :value="m.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计卡片 -->
    <el-row :gutter="16" class="stat-row">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-label">
              总产量
              <el-tooltip content="选定时间范围内所有机床的总产量。" placement="top">
                <span class="info-icon">ⓘ</span>
              </el-tooltip>
            </div>
            <div class="stat-value">
              {{ summary.totalQuantity != null ? summary.totalQuantity.toLocaleString() : '-' }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-label">
              运行机床数
              <el-tooltip content="选定时间范围内有产量记录的机床数量。" placement="top">
                <span class="info-icon">ⓘ</span>
              </el-tooltip>
            </div>
            <div class="stat-value">
              {{ summary.runningMachineCount != null ? summary.runningMachineCount : '-' }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-label">
              平均单产
              <el-tooltip content="平均每台机床的产量。" placement="top">
                <span class="info-icon">ⓘ</span>
              </el-tooltip>
            </div>
            <div class="stat-value">
              {{ summary.avgPerMachine != null ? summary.avgPerMachine.toFixed(2) : '-' }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-label">
              最高单产机床
              <el-tooltip content="产量最高的机床名称。" placement="top">
                <span class="info-icon">ⓘ</span>
              </el-tooltip>
            </div>
            <div class="stat-value top-machine-name">
              {{ summary.topMachineName || '-' }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表行 -->
    <el-row :gutter="16" class="chart-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div style="display:flex;justify-content:space-between;align-items:center">
              <span class="card-title">机床产量柱状图</span>
              <div style="display:flex;align-items:center;gap:6px">
                <span style="font-size:13px;color:#909399">TOP</span>
                <el-select v-model="barChartTopN" size="small" style="width:80px" @change="initBarChart" filterable allow-create>
                  <el-option :value="10" label="10"/>
                  <el-option :value="20" label="20"/>
                  <el-option :value="50" label="50"/>
                  <el-option :value="100" label="100"/>
                </el-select>
              </div>
            </div>
          </template>
          <div ref="barChartRef" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 明细表格 -->
    <el-card shadow="hover" class="table-card">
      <template #header>
        <span class="card-title">明细排行</span>
      </template>
      <el-table :data="tableData" stripe size="small" v-loading="loading">
        <el-table-column prop="rank" label="排名" width="60" align="center" />
        <el-table-column prop="machineName" label="机床名称" width="120" />
        <el-table-column prop="programName" label="程序名" show-overflow-tooltip>
          <template #default="{ row }">
            <el-link type="primary" :underline="false" @click="goToProgram(row)">{{ row.programName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="totalQuantity" label="产量" width="100" align="center" />
        <el-table-column label="运行时间" width="100" align="center">
          <template #default="{ row }">{{ row.runTime }}h</template>
        </el-table-column>
        <el-table-column prop="dayStatus" label="日状态" width="80" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from '@/utils/request'
import echarts from '@/utils/echarts'
import type { ECharts } from 'echarts/core'
import type { ApiResponse } from '@/types'

/** 机床产量汇总 */
interface MachineProductionSummary {
  totalQuantity: number
  runningMachineCount: number
  avgPerMachine: number
  topMachineName: string
}

/** 机床产量排行条目 */
interface MachineProductionItem {
  rank: number
  machineName: string
  programName: string
  totalQuantity: number
  runTime: number
  dayStatus: string
}

/** 下拉选项 */
interface DropdownOption {
  value: string
  label: string
}

// ---------- 路由 ----------
const router = useRouter()
const route = useRoute()

// ---------- 状态 ----------
const loading = ref(false)
const tableData = ref<MachineProductionItem[]>([])
const summary = ref<Partial<MachineProductionSummary>>({})

const filters = reactive({
  dateRange: [] as string[],
  workshopId: '' as string | number,
  machineIds: [] as string[],
})

const options = reactive({
  workshops: [] as DropdownOption[],
  machines: [] as DropdownOption[],
})

// ---------- ECharts ----------
const barChartRef = ref<HTMLElement>()
let barChart: ECharts | null = null

const barChartTopN = ref(10)

/** 初始化柱状图（按机床聚合，取TOP N） */
function initBarChart() {
  if (!barChartRef.value || !tableData.value.length) return
  if (barChart) barChart.dispose()
  barChart = echarts.init(barChartRef.value)
  // 按机床名聚合产量
  const machineMap = new Map<string, number>()
  tableData.value.forEach(i => machineMap.set(i.machineName, (machineMap.get(i.machineName)||0) + i.totalQuantity))
  const sorted = [...machineMap.entries()].sort((a,b) => b[1] - a[1]).slice(0, barChartTopN.value)
  const names = sorted.map(e => e[0])
  const quantities = sorted.map(e => e[1])
  const total = quantities.reduce((s, v) => s + v, 0)
  barChart.setOption({
    tooltip: {
      trigger: 'axis',
      formatter: (params: { name: string; value: number }[]) => {
        const item = params[0]
        return `${item.name}<br/>产量: ${item.value} 件`
      },
    },
    grid: { left: 50, right: 20, top: 30, bottom: 40 },
    xAxis: {
      type: 'category',
      data: names,
      axisLabel: { fontSize: 12, rotate: names.length > 6 ? 30 : 0 },
    },
    yAxis: { type: 'value', name: '件', axisLabel: { fontSize: 12 } },
    series: [
      {
        type: 'bar',
        data: quantities,
        itemStyle: {
          color: '#409EFF',
          borderRadius: [4, 4, 0, 0],
        },
        barWidth: '50%',
        label: {
          show: true,
          position: 'top',
          formatter: (params: { value: number }) => {
            if (total === 0) return ''
            const pct = ((params.value / total) * 100).toFixed(1)
            return `${params.value}件 (${pct}%)`
          },
          fontSize: 11,
        },
      },
    ],
  })
}

/** 销毁所有图表 */
function disposeCharts() {
  barChart?.dispose()
  barChart = null
}

// ---------- 跨页面联动 ----------
/** 点击程序名跳转到程序产量页面 */
function goToProgram(row: MachineProductionItem) {
  const startDate = filters.dateRange[0] ?? ''
  const endDate = filters.dateRange[1] ?? ''
  router.push({
    path: '/production/program',
    query: {
      startDate,
      endDate,
      programNames: row.programName,
    },
  })
}

// ---------- 数据加载 ----------
/** 格式化日期 */
function fmtDate(d: Date): string {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

/** 加载下拉选项 */
async function loadOptions() {
  try {
    const [wsRes, mcRes] = await Promise.all([
      request.get<{ items: DropdownOption[] }>('/admin/workshop/list'),
      request.get<{ items: DropdownOption[] }>('/admin/machine/list'),
    ])
    options.workshops = wsRes.data?.items ?? []
    options.machines = mcRes.data?.items ?? []
  } catch {
    // 保持容错，无法获取下拉项时不阻塞页面
  }
}

/** 核心加载函数：同时请求汇总和明细 */
async function loadData() {
  loading.value = true
  try {
    const params: Record<string, string | number> = {
      startDate: filters.dateRange[0] ?? '',
      endDate: filters.dateRange[1] ?? '',
      workshopId: filters.workshopId ?? '',
      machineIds: filters.machineIds.join(','),
    }

    const [summaryRes, listRes] = await Promise.all([
      request.get<MachineProductionSummary>(
        '/admin/production/machine/summary',
        { params }
      ),
      request.get<{ items: MachineProductionItem[] }>(
        '/admin/production/machine/list',
        { params }
      ),
    ])

    summary.value = summaryRes.data ?? {}
    tableData.value = listRes.data?.items ?? []

    // 图表刷新
    disposeCharts()
    await nextTick()
    initBarChart()
  } catch {
    // API 不存在时 catch 错误不阻塞
  } finally {
    loading.value = false
  }
}

/** 重置筛选条件并重新加载 */
function resetFilters() {
  const today = new Date()
  const todayStr = fmtDate(today)
  filters.dateRange = [todayStr, todayStr]
  filters.workshopId = ''
  filters.machineIds = []
  loadData()
}

// ---------- 生命周期 ----------
onMounted(async () => {
  // 优先从 URL query 初始化筛选条件（跨页面联动）
  if (route.query.startDate) {
    filters.dateRange = [route.query.startDate as string, (route.query.endDate as string) || (route.query.startDate as string)]
  } else {
    const today = new Date()
    const todayStr = fmtDate(today)
    filters.dateRange = [todayStr, todayStr]
  }
  if (route.query.machineIds) {
    filters.machineIds = (route.query.machineIds as string).split(',').filter(Boolean)
  }

  await loadOptions()
  loadData()
})

onBeforeUnmount(() => {
  disposeCharts()
})
</script>

<style scoped lang="scss">
.machine-production {
  padding: 0;

  .filter-bar {
    margin-bottom: 16px;
  }

  .stat-row {
    margin-bottom: 16px;

    .el-card {
      height: 100%;
    }

    .stat-card {
      text-align: center;
      padding: 10px 0;

      .stat-label {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;

        .info-icon {
          margin-left: 2px;
          font-size: 13px;
          color: #c0c4cc;
          cursor: help;
          vertical-align: middle;

          &:hover {
            color: #409eff;
          }
        }
      }

      .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
      }

      .top-machine-name {
        font-size: 20px;
      }
    }
  }

  .chart-row {
    margin-bottom: 16px;
  }

  .card-title {
    font-size: 15px;
    font-weight: 500;
  }

  .table-card {
    :deep(.el-card__body) {
      padding: 0;
    }
  }
}
</style>
