<template>
  <div class="report-page">
    <!-- 顶部 -->
    <div class="report-header">
      <h3 class="page-title">📊 CMA管理报表</h3>
      <div class="header-right">
        <el-date-picker
          v-model="reportPeriod"
          type="month"
          placeholder="选择月份"
          value-format="YYYY-MM"
          size="small"
          style="width:140px"
          @change="onPeriodChange"
        />
        <el-button text size="small" :loading="loading" @click="loadAll">刷新</el-button>
        <el-button type="primary" size="small" @click="openDupont">📊 杜邦分析</el-button>
      </div>
    </div>

    <!-- 四个标签页 -->
    <el-tabs v-model="activeTab" type="border-card" class="report-tabs">

      <!-- ════ 报表1：管理利润表 ════ -->
      <el-tab-pane label="💰 管理利润表" name="profit">
        <div v-loading="loading">
          <div class="report-desc">基于管理会计视角的利润结构分析：收入 → 变动成本 → 边际贡献 → 固定成本 → 息税前利润</div>
          <el-table :data="profitItems" border stripe size="small" style="width:100%;margin-top:12px;" :summary-method="profitSummary" show-summary>
            <el-table-column prop="name" label="项目" width="200">
              <template #default="{ row }">
                <span :style="{ fontWeight: row.is_total ? 700 : row.is_subtotal ? 600 : 400 }">{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="本期金额" width="160" align="right">
              <template #default="{ row }">
                <span :style="{ fontWeight: row.is_total ? 700 : 400, color: (row.name?.includes('利润') || row.name?.includes('贡献')) && row.value != null && row.value < 0 ? '#f56c6c' : '#333' }">
                  {{ row.value != null ? '¥ ' + row.value.toLocaleString() : '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="上期金额" width="160" align="right">
              <template #default="{ row }">
                <span style="color:#999;">{{ row.prev_value != null ? '¥ ' + row.prev_value.toLocaleString() : '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="环比变化" width="120" align="right">
              <template #default="{ row }">
                <span v-if="row.change_rate != null" :style="{ color: row.change_rate > 0 ? '#f56c6c' : row.change_rate < 0 ? '#67c23a' : '#999', fontWeight: 600 }">
                  {{ row.change_rate > 0 ? '↑' : '↓' }}{{ Math.abs(row.change_rate).toFixed(1) }}%
                </span>
                <span v-else style="color:#ccc;">-</span>
              </template>
            </el-table-column>
            <el-table-column label="占比" width="100" align="right">
              <template #default="{ row }">
                <span v-if="row.ratio != null" style="color:#666;">{{ row.ratio.toFixed(1) }}%</span>
                <span v-else style="color:#ccc;">-</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- ════ 报表2：预算执行报告 ════ -->
      <el-tab-pane label="📋 预算执行报告" name="budget">
        <div v-loading="loading">
          <div class="report-desc">各KPI预算 vs 实际差异分析。正值=超预算，负值=节约。</div>
          <div class="summary-row" style="margin-top:12px;">
            <div class="stat-card blue"><div class="stat-val">{{ budgetSummary.total }}</div><div class="stat-label">KPI总数</div></div>
            <div class="stat-card green"><div class="stat-val">{{ budgetSummary.with_budget }}</div><div class="stat-label">有预算</div></div>
            <div class="stat-card red"><div class="stat-val">{{ budgetSummary.over_budget }}</div><div class="stat-label">超预算</div></div>
            <div class="stat-card gray"><div class="stat-val">{{ budgetSummary.under_budget }}</div><div class="stat-label">节约</div></div>
            <div class="stat-card yellow"><div class="stat-val">{{ budgetSummary.normal }}</div><div class="stat-label">正常</div></div>
          </div>
          <div style="display:flex;gap:8px;margin:12px 0;">
            <el-select v-model="budgetDim" placeholder="维度" clearable size="small" style="width:120px;" @change="loadBudget">
              <el-option v-for="d in dimensions" :key="d.value" :label="d.label" :value="d.value" />
            </el-select>
            <el-select v-model="budgetLevel" placeholder="状态" clearable size="small" style="width:120px;" @change="loadBudget">
              <el-option label="超预算" value="red" />
              <el-option label="预警" value="yellow" />
              <el-option label="正常" value="normal" />
            </el-select>
          </div>
          <el-table :data="budgetItems" border stripe size="small" style="width:100%;" @sort-change="onBudgetSort">
            <el-table-column prop="kpi_name" label="KPI名称" min-width="150" sortable="custom" />
            <el-table-column prop="dimension" label="维度" width="90">
              <template #default="{ row }">{{ dimLabel(row.dimension) }}</template>
            </el-table-column>
            <el-table-column label="实际值" width="120" align="right" prop="actual_value" sortable="custom">
              <template #default="{ row }">{{ row.actual_value != null ? row.actual_value.toLocaleString() : '-' }}</template>
            </el-table-column>
            <el-table-column label="预算值" width="120" align="right" prop="budget_value" sortable="custom">
              <template #default="{ row }">{{ row.budget_value != null ? row.budget_value.toLocaleString() : '-' }}</template>
            </el-table-column>
            <el-table-column label="差异额" width="120" align="right" prop="deviation_amount" sortable="custom">
              <template #default="{ row }">
                <span :style="{ color: row.deviation_amount > 0 ? '#f56c6c' : row.deviation_amount < 0 ? '#67c23a' : '#999' }">
                  {{ row.deviation_amount != null ? (row.deviation_amount > 0 ? '+' : '') + row.deviation_amount.toLocaleString() : '-' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="差异率" width="100" align="right" prop="deviation_rate" sortable="custom">
              <template #default="{ row }">
                <el-tag v-if="row.deviation_rate != null" :type="row.alert_level === 'red' ? 'danger' : row.alert_level === 'yellow' ? 'warning' : 'success'" size="small">
                  {{ row.deviation_rate > 0 ? '+' : '' }}{{ row.deviation_rate.toFixed(1) }}%
                </el-tag>
                <span v-else style="color:#ccc;">-</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- ════ 报表3：KPI趋势报告 ════ -->
      <el-tab-pane label="📈 KPI趋势报告" name="trends">
        <div v-loading="loading">
          <div class="report-desc">选定KPI的历史趋势分析，含目标线标记。</div>
          <div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;">
            <el-select v-model="trendDim" placeholder="维度" clearable size="small" style="width:120px;" @change="loadTrends">
              <el-option v-for="d in dimensions" :key="d.value" :label="d.label" :value="d.value" />
            </el-select>
            <el-select v-model="trendKpiId" placeholder="选择KPI" clearable filterable size="small" style="width:200px;" @change="loadTrends">
              <el-option v-for="k in kpiOptions" :key="k.id" :label="k.kpi_name" :value="k.id" />
            </el-select>
            <el-select v-model="trendMonths" size="small" style="width:100px;" @change="loadTrends">
              <el-option label="12期" :value="12" />
              <el-option label="24期" :value="24" />
              <el-option label="30期" :value="30" />
            </el-select>
          </div>
          <!-- 趋势图表 -->
          <div v-if="trendData.length > 0" class="trend-grid">
            <el-card v-for="t in trendData" :key="t.kpi_id" class="trend-card-2">
              <template #header>
                <div class="trend-hd">
                  <span class="trend-name">{{ t.kpi_name }}</span>
                  <span class="trend-unit">{{ t.unit }}</span>
                  <span class="trend-stat">
                    均值 {{ t.avg }} | 最高 {{ t.max }} | 最低 {{ t.min }}
                  </span>
                  <span class="trend-dir" :class="t.trend_dir">
                    {{ t.trend_dir === 'up' ? '↑ 上升' : t.trend_dir === 'down' ? '↓ 下降' : '→ 平稳' }}
                  </span>
                </div>
              </template>
              <div :ref="el => setTrendChartRef(t.kpi_id, el)" style="height:180px;"></div>
            </el-card>
          </div>
          <el-empty v-else description="请选择KPI查看趋势" />
        </div>
      </el-tab-pane>

      <!-- ════ 报表4：BSC评分卡 ════ -->
      <el-tab-pane label="🎯 四维度绩效评分卡" name="bsc">
        <div v-loading="loading">
          <div class="report-desc">基于BSC框架的四维度绩效评分，从已发布战略地图构建。</div>
          <div v-if="bscData.overall_score != null" style="margin-top:12px;">
            <!-- 总分 -->
            <div class="bsc-overall">
              <div class="bsc-score-ring" :style="{ borderColor: bscScoreColor(bscData.overall_score) }">
                <span class="bsc-score-val">{{ bscData.overall_score }}</span>
                <span class="bsc-score-label">综合评分</span>
              </div>
              <div class="bsc-map-info" v-if="bscData.map_title">
                基于：{{ bscData.map_title }} | 周期：{{ bscData.period }}
              </div>
            </div>
            <!-- 四维度 -->
            <div class="bsc-dims">
              <div v-for="dim in bscData.dimensions" :key="dim.key" class="bsc-dim-card">
                <div class="bsc-dim-head" :style="{ borderLeft: '4px solid ' + dim.color }">
                  <span class="bsc-dim-icon">{{ dim.icon }}</span>
                  <span class="bsc-dim-name">{{ dim.name }}</span>
                  <span class="bsc-dim-score" :style="{ color: bscScoreColor(dim.score) }">{{ dim.score }}</span>
                </div>
                <div class="bsc-dim-body">
                  <div v-for="obj in dim.objectives" :key="obj.name" class="bsc-obj-row">
                    <div class="bsc-obj-name">{{ obj.name }}</div>
                    <div class="bsc-obj-kpis" v-if="obj.kpis && obj.kpis.length > 0">
                      <div v-for="k in obj.kpis.slice(0, 3)" :key="k.code" class="bsc-kpi-mini">
                        <span class="bsc-kpi-dot" :class="'dot-' + k.level"></span>
                        <span class="bsc-kpi-name">{{ k.name }}</span>
                        <span class="bsc-kpi-score">{{ k.score ?? '-' }}</span>
                      </div>
                      <div v-if="obj.kpis.length > 3" class="bsc-kpi-more">+{{ obj.kpis.length - 3 }} 更多</div>
                    </div>
                    <div v-else class="bsc-obj-empty">暂无KPI数据</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无已发布的战略地图，请先在战略地图中发布" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// ── 状态 ──
const loading = ref(false)
const activeTab = ref('profit')
const reportPeriod = ref('2026-06')

// API 配置
const api = axios.create({ baseURL: '/api/cma', timeout: 30000 })
api.interceptors.request.use((config: any) => {
  const token = localStorage.getItem('cma_token')
  if (token) config.headers.Authorization = `'Bearer ' + token`
  return config
})

// ── 报表1：管理利润表 ──
const profitItems = ref<any[]>([])

function profitSummary(param: any) {
  const sums: string[] = ['合计']
  const last = profitItems.value[profitItems.value.length - 1]
  if (last) {
    sums.push(last.value != null ? '¥ ' + last.value.toLocaleString() : '-')
    sums.push(last.prev_value != null ? '¥ ' + last.prev_value.toLocaleString() : '-')
    sums.push(last.change_rate != null ? (last.change_rate > 0 ? '↑' : '↓') + Math.abs(last.change_rate).toFixed(1) + '%' : '-')
    sums.push(last.ratio != null ? last.ratio.toFixed(1) + '%' : '-')
  } else {
    sums.push('-', '-', '-', '-')
  }
  return sums
}

// ── 报表2：预算执行报告 ──
const budgetSummary = ref({ total: 0, with_budget: 0, over_budget: 0, under_budget: 0, normal: 0 })
const budgetItems = ref<any[]>([])
const budgetDim = ref('')
const budgetLevel = ref('')

// ── 报表3：KPI趋势报告 ──
const trendDim = ref('')
const trendKpiId = ref<number | null>(null)
const trendMonths = ref(24)
const trendData = ref<any[]>([])
const kpiOptions = ref<any[]>([])
const trendChartRefs: Record<string, HTMLElement> = {}

function setTrendChartRef(id: number, el: any) {
  if (el) trendChartRefs['chart-' + id] = el
}

// ── 报表4：BSC评分卡 ──
const bscData = ref<any>({})

// ── 公共 ──
const dimensions = [
  { value: 'finance', label: '财务维度' },
  { value: 'customer', label: '客户维度' },
  { value: 'process', label: '内部流程' },
  { value: 'learning', label: '学习成长' },
]

function dimLabel(d: string): string {
  const map: Record<string, string> = { finance: '财务', customer: '客户', process: '内部流程', learning: '学习成长' }
  return map[d] || d
}

function bscScoreColor(score: number): string {
  if (score >= 80) return 'var(--bsc-process)'
  if (score >= 60) return 'var(--bsc-learning)'
  return '#f56c6c'
}

function onPeriodChange() {
  loadAll()
}

// ── 加载 ──
async function loadProfit() {
  try {
    const r = await api.get('/reports/profit-summary', { params: { period: reportPeriod.value } })
    profitItems.value = (r as any).data?.items || []
  } catch { profitItems.value = [] }
}

async function loadBudget() {
  try {
    const params: any = { period: reportPeriod.value }
    if (budgetDim.value) params.dimension = budgetDim.value
    if (budgetLevel.value) params.alert_level = budgetLevel.value
    const r = await api.get('/reports/budget-execution', { params })
    const d = (r as any).data || {}
    budgetSummary.value = d.summary || {}
    budgetItems.value = d.items || []
  } catch { budgetItems.value = [] }
}

async function loadTrends() {
  try {
    const params: any = { months: trendMonths.value }
    if (trendKpiId.value) params.kpi_id = trendKpiId.value
    else if (trendDim.value) params.dimension = trendDim.value
    const r = await api.get('/reports/kpi-trends', { params })
    trendData.value = (r as any).data?.data || []
    nextTick(() => renderTrendCharts())
  } catch { trendData.value = [] }
}

async function loadBsc() {
  try {
    const r = await api.get('/reports/bsc-scorecard', { params: { period: reportPeriod.value } })
    bscData.value = (r as any).data || {}
  } catch { bscData.value = {} }
}

async function loadKpiOptions() {
  try {
    const r = await api.get('/kpis', { params: { page_size: 100 } })
    kpiOptions.value = (r as any).data?.data || []
  } catch {}
}

function loadAll() {
  loading.value = true
  Promise.all([loadProfit(), loadBudget(), loadTrends(), loadBsc()]).finally(() => { loading.value = false })
}

function openDupont() {
  window.open('/dupont-analysis', '_blank')
}

// ── ECharts 渲染 ──
function renderTrendCharts() {
  import('echarts').then(echarts => {
    trendData.value.forEach((t: any) => {
      const el = trendChartRefs['chart-' + t.kpi_id]
      if (!el) return
      const existing = echarts.getInstanceByDom(el)
      if (existing) existing.dispose()
      const chart = echarts.init(el)
      const dates = t.trend.map((d: any) => d.period)
      const values = t.trend.map((d: any) => d.value)
      const series: any[] = [{
        type: 'line', data: values, smooth: true, lineStyle: { width: 2 },
        areaStyle: { opacity: 0.1 }, symbol: 'circle', symbolSize: 4,
        name: '实际值',
      }]
      // 目标线
      if (t.target_value != null) {
        series.push({
          type: 'line', data: Array(dates.length).fill(t.target_value),
          lineStyle: { type: 'dashed', width: 1, color: '#f56c6c' },
          symbol: 'none', name: '目标值',
        })
      }
      chart.setOption({
        grid: { left: 50, right: 15, top: 10, bottom: 28 },
        xAxis: { type: 'category', data: dates, axisLabel: { fontSize: 10, rotate: 45 } },
        yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
        series,
        tooltip: { trigger: 'axis' },
        legend: { show: true, bottom: 0, icon: 'circle', itemWidth: 8, itemHeight: 8 },
      })
    })
  })
}

// ── 排序 ──
function onBudgetSort(sort: any) {
  if (!sort.prop || !sort.order) return
  const items = [...budgetItems.value]
  items.sort((a: any, b: any) => {
    const av = a[sort.prop] ?? 0
    const bv = b[sort.prop] ?? 0
    return sort.order === 'ascending' ? av - bv : bv - av
  })
  budgetItems.value = items
}

onMounted(() => {
  loadKpiOptions()
  loadAll()
})
</script>

<style scoped>
.report-page { max-width: 1400px; margin: 0 auto; }
.report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header-right { display: flex; gap: 8px; align-items: center; }
.report-tabs { margin-bottom: 20px; }
.report-desc { font-size: 13px; color: #888; padding: 8px 0; }

/* 统计卡片 */
.summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat-card { background: #fff; border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border-top: 3px solid #ccc; }
.stat-card.blue { border-top-color: #409eff; }
.stat-card.red { border-top-color: #f56c6c; }
.stat-card.green { border-top-color: #67c23a; }
.stat-card.yellow { border-top-color: var(--bsc-learning); }
.stat-card.gray { border-top-color: #909399; }
.stat-val { font-size: 22px; font-weight: 700; color: #1a1a2e; }
.stat-label { font-size: 12px; color: #888; margin-top: 2px; }

/* 趋势卡片 */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.trend-card-2 { border-radius: 10px; }
.trend-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trend-name { font-weight: 600; font-size: 14px; flex: 1; }
.trend-unit { color: #999; font-size: 12px; }
.trend-stat { font-size: 11px; color: #999; }
.trend-dir { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.trend-dir.up { background: #fff1f0; color: #cf1322; }
.trend-dir.down { background: #f6ffed; color: #389e0d; }
.trend-dir.stable { background: #f5f5f5; color: #999; }

/* BSC评分卡 */
.bsc-overall { text-align: center; padding: 20px 0; }
.bsc-score-ring {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 50%; border: 6px solid #67c23a;
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.bsc-score-val { font-size: 36px; font-weight: 700; color: #1a1a2e; line-height: 1.1; }
.bsc-score-label { font-size: 12px; color: #999; margin-top: 2px; }
.bsc-map-info { font-size: 12px; color: #999; margin-top: 8px; }
.bsc-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.bsc-dim-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
.bsc-dim-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fafafa; }
.bsc-dim-icon { font-size: 18px; }
.bsc-dim-name { font-weight: 600; font-size: 14px; flex: 1; }
.bsc-dim-score { font-size: 24px; font-weight: 700; }
.bsc-dim-body { padding: 10px 14px; }
.bsc-obj-row { margin-bottom: 10px; }
.bsc-obj-name { font-size: 13px; font-weight: 500; color: #555; margin-bottom: 4px; }
.bsc-obj-kpis { display: flex; flex-direction: column; gap: 3px; }
.bsc-kpi-mini { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 6px; background: #f9f9f9; border-radius: 4px; }
.bsc-kpi-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #67c23a; }
.dot-yellow { background: var(--bsc-learning); }
.dot-red { background: #f56c6c; }
.dot-gray { background: #ddd; }
.bsc-kpi-name { flex: 1; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsc-kpi-score { font-weight: 600; color: #333; }
.bsc-kpi-more { font-size: 11px; color: #409eff; text-align: center; padding: 2px; }
.bsc-obj-empty { font-size: 11px; color: #ccc; text-align: center; padding: 4px; }
</style>
