<template>
  <div class="expense-page">
    <!-- 页头 -->
    <div class="expense-header">
      <h3 class="page-title">🧾 费用审核智能体</h3>
      <div class="header-right">
        <el-button size="small" @click="seedRules">预置规则</el-button>
        <el-button size="small" @click="loadAll">刷新</el-button>
        <el-button size="small" @click="activeTab = 'rules'">规则配置</el-button>
        <el-button type="primary" size="small" @click="openSubmitDialog">提交报销单</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <div class="stat-card" @click="filterByStatus('pending')">
        <div class="stat-num warn">{{ stats.counts?.pending ?? 0 }}</div>
        <div class="stat-label">待人工审批</div>
      </div>
      <div class="stat-card" @click="filterByStatus('approved')">
        <div class="stat-num success">{{ stats.counts?.approved ?? 0 }}</div>
        <div class="stat-label">已通过</div>
      </div>
      <div class="stat-card" @click="filterByStatus('returned')">
        <div class="stat-num danger">{{ stats.counts?.returned ?? 0 }}</div>
        <div class="stat-label">自动打回</div>
      </div>
      <div class="stat-card" @click="filterByStatus('rejected')">
        <div class="stat-num gray">{{ stats.counts?.rejected ?? 0 }}</div>
        <div class="stat-label">已拒绝</div>
      </div>
      <div class="stat-card highlight">
        <div class="stat-num">¥{{ fmt(stats.monthly_total) }}</div>
        <div class="stat-label">本月费用总额 ({{ stats.period }})</div>
      </div>
    </div>

    <el-tabs v-model="activeTab">
      <!-- ── 报销单列表 ── -->
      <el-tab-pane label="报销单" name="list">
        <div class="filter-row">
          <el-select v-model="filters.status" placeholder="状态" clearable size="small" style="width:130px;" @change="loadReimbursements">
            <el-option label="待审批" value="pending" />
            <el-option label="已通过" value="approved" />
            <el-option label="已拒绝" value="rejected" />
            <el-option label="已打回" value="returned" />
          </el-select>
          <el-select v-model="filters.expense_type" placeholder="费用类型" clearable size="small" style="width:130px;" @change="loadReimbursements">
            <el-option v-for="(label, key) in EXPENSE_TYPES" :key="key" :label="label" :value="key" />
          </el-select>
          <el-input v-model="filters.keyword" placeholder="单号/事由/申请人" clearable size="small" style="width:220px;" @change="loadReimbursements" />
          <span class="filter-info">共 {{ reimbursements.length }} 条</span>
        </div>

        <el-table :data="reimbursements" border stripe size="small" style="width:100%;margin-top:8px;" v-loading="loadingList">
          <el-table-column prop="reimb_no" label="单号" width="150" />
          <el-table-column prop="applicant" label="申请人" width="90" />
          <el-table-column prop="department" label="部门" width="110" />
          <el-table-column label="费用类型" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="typeTag(row.expense_type)">{{ row.expense_type_label }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="事由" min-width="160" show-overflow-tooltip />
          <el-table-column label="金额" width="110" align="right">
            <template #default="{ row }">
              <span :class="{ 'amount-over': row.check_result === 'fail' }">¥{{ fmt(row.amount) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expense_date" label="费用日期" width="100" />
          <el-table-column label="自动校验" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="row.check_result === 'pass' ? 'success' : 'danger'">
                {{ row.check_result === 'pass' ? '通过' : '超限' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="statusTag(row.status)">{{ statusLabel(row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="230" fixed="right">
            <template #default="{ row }">
              <el-button size="small" link type="primary" @click="openDetail(row)">详情</el-button>
              <template v-if="canReview && ['pending', 'returned'].includes(row.status)">
                <el-button size="small" link type="success" @click="openReview(row, 'approve')">通过</el-button>
                <el-button size="small" link type="danger" @click="openReview(row, 'reject')">拒绝</el-button>
              </template>
              <el-button v-if="['returned', 'rejected'].includes(row.status)" size="small" link type="warning" @click="resubmit(row)">重提</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- ── 超限预警 ── -->
      <el-tab-pane label="超限预警" name="overlimit">
        <el-alert
          type="warning" :closable="false" show-icon
          :title="`共 ${stats.over_limit_count ?? 0} 笔报销单被自动打回，请关注以下超标准支出`"
          style="margin-bottom:8px;"
        />
        <el-table :data="stats.over_limit || []" border stripe size="small" style="width:100%;" v-loading="loadingStats">
          <el-table-column prop="reimb_no" label="单号" width="150" />
          <el-table-column prop="applicant" label="申请人" width="90" />
          <el-table-column prop="department" label="部门" width="110" />
          <el-table-column label="类型" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="typeTag(row.expense_type)">{{ row.expense_type_label }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="事由" min-width="150" show-overflow-tooltip />
          <el-table-column label="金额" width="110" align="right">
            <template #default="{ row }"><span class="amount-over">¥{{ fmt(row.amount) }}</span></template>
          </el-table-column>
          <el-table-column prop="check_reason" label="超限原因" min-width="280" show-overflow-tooltip />
        </el-table>
      </el-tab-pane>

      <!-- ── 费用统计 ── -->
      <el-tab-pane label="费用统计" name="stats">
        <div class="stats-grid">
          <el-card shadow="never" class="chart-card">
            <template #header><span>本月费用类型统计 ({{ stats.period }})</span></template>
            <div ref="typeChartRef" style="width:100%;height:300px;"></div>
          </el-card>
          <el-card shadow="never" class="chart-card">
            <template #header><span>预算使用率</span></template>
            <div v-for="b in stats.budget_usage || []" :key="b.expense_type" class="budget-item">
              <div class="budget-head">
                <span>{{ b.label }}</span>
                <span>¥{{ fmt(b.used) }} / ¥{{ fmt(b.budget) }} ({{ b.usage_rate }}%)</span>
              </div>
              <el-progress :percentage="Math.min(b.usage_rate, 100)" :status="b.usage_rate > 90 ? 'exception' : (b.usage_rate > 70 ? 'warning' : 'success')" :stroke-width="14" />
            </div>
            <div class="no-data" v-if="!(stats.budget_usage || []).length">暂无预算数据</div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- ── 规则配置 ── -->
      <el-tab-pane label="规则配置" name="rules">
        <div class="filter-row">
          <span class="filter-info">自动校验规则 — 超限报销单将自动打回并标注原因</span>
          <span style="margin-left:auto;">
            <el-button v-if="canReview" size="small" type="success" @click="openRuleDialog()">新增规则</el-button>
            <el-button v-if="canReview" size="small" @click="seedRules">预置默认规则</el-button>
          </span>
        </div>
        <el-table :data="rules" border stripe size="small" style="width:100%;margin-top:8px;" v-loading="loadingRules">
          <el-table-column prop="rule_name" label="规则名称" min-width="160" />
          <el-table-column label="维度" width="100">
            <template #default="{ row }">{{ dimensionLabel(row.dimension) }}</template>
          </el-table-column>
          <el-table-column prop="dimension_value" label="维度值" width="110">
            <template #default="{ row }">{{ row.dimension_value || '全部' }}</template>
          </el-table-column>
          <el-table-column label="费用类型" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="typeTag(row.expense_type)">{{ row.expense_type_label }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="限额类型" width="100">
            <template #default="{ row }">{{ limitTypeLabel(row.limit_type) }}</template>
          </el-table-column>
          <el-table-column label="限额" width="110" align="right">
            <template #default="{ row }">¥{{ fmt(row.limit_amount) }}</template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
          <el-table-column label="状态" width="90">
            <template #default="{ row }">
              <el-tag size="small" :type="row.status === 'active' ? 'success' : 'info'">{{ row.status === 'active' ? '启用' : '停用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" v-if="canReview">
            <template #default="{ row }">
              <el-button size="small" link type="primary" @click="openRuleDialog(row)">编辑</el-button>
              <el-button size="small" link :type="row.status === 'active' ? 'warning' : 'success'" @click="toggleRule(row)">
                {{ row.status === 'active' ? '停用' : '启用' }}
              </el-button>
              <el-button size="small" link type="danger" @click="deleteRule(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 提交报销单对话框 -->
    <MyDialog v-model="submitVisible" title="提交报销单" :width="560">
      <el-form :model="submitForm" label-width="90px" size="small">
        <el-form-item label="申请人" required>
          <el-input v-model="submitForm.applicant" placeholder="报销申请人" />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="submitForm.department" placeholder="所属部门" />
        </el-form-item>
        <el-form-item label="费用类型" required>
          <el-select v-model="submitForm.expense_type" placeholder="选择费用类型" style="width:100%;">
            <el-option v-for="(label, key) in EXPENSE_TYPES" :key="key" :label="label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="事由" required>
          <el-input v-model="submitForm.title" placeholder="报销事由/摘要" />
        </el-form-item>
        <el-form-item label="金额" required>
          <el-input-number v-model="submitForm.amount" :min="0.01" :precision="2" :step="100" style="width:100%;" placeholder="报销金额(元)" />
        </el-form-item>
        <el-form-item label="费用日期">
          <el-date-picker v-model="submitForm.expense_date" type="date" value-format="YYYY-MM-DD" placeholder="费用发生日期" style="width:100%;" />
        </el-form-item>
        <el-form-item label="附件">
          <el-input v-model="submitForm.attachment" placeholder="附件文件名（如: 发票.jpg）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="submitVisible = false">取消</el-button>
        <el-button type="primary" size="small" :loading="submitting" @click="doSubmit">提交并自动校验</el-button>
      </template>
    </MyDialog>

    <!-- 规则编辑对话框 -->
    <MyDialog v-model="ruleDialogVisible" :title="ruleForm.id ? '编辑规则' : '新增规则'" :width="520">
      <el-form :model="ruleForm" label-width="90px" size="small">
        <el-form-item label="规则名称" required>
          <el-input v-model="ruleForm.rule_name" placeholder="如: 招待费单笔限额" />
        </el-form-item>
        <el-form-item label="维度">
          <el-select v-model="ruleForm.dimension" style="width:100%;">
            <el-option label="费用类型(全局)" value="expense_type" />
            <el-option label="部门" value="department" />
            <el-option label="人员" value="person" />
          </el-select>
        </el-form-item>
        <el-form-item label="维度值">
          <el-input v-model="ruleForm.dimension_value" placeholder="部门名/人员名，留空=全部" />
        </el-form-item>
        <el-form-item label="费用类型" required>
          <el-select v-model="ruleForm.expense_type" style="width:100%;">
            <el-option v-for="(label, key) in EXPENSE_TYPES" :key="key" :label="label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="限额类型">
          <el-select v-model="ruleForm.limit_type" style="width:100%;">
            <el-option label="单笔限额" value="single" />
            <el-option label="月度累计限额" value="monthly" />
            <el-option label="年度累计限额" value="yearly" />
          </el-select>
        </el-form-item>
        <el-form-item label="限额金额" required>
          <el-input-number v-model="ruleForm.limit_amount" :min="0" :precision="2" style="width:100%;" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleForm.remark" type="textarea" :rows="2" placeholder="规则说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="ruleDialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" :loading="savingRule" @click="saveRule">{{ ruleForm.id ? '保存' : '创建' }}</el-button>
      </template>
    </MyDialog>

    <!-- 报销单详情对话框 -->
    <MyDialog v-model="detailVisible" title="报销单详情" :width="720">
      <template v-if="detail">
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="单号">{{ detail.reimb_no }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ detail.applicant }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ detail.department || '-' }}</el-descriptions-item>
          <el-descriptions-item label="费用类型">
            <el-tag size="small" :type="typeTag(detail.expense_type)">{{ detail.expense_type_label }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="金额">
            <span :class="{ 'amount-over': detail.check_result === 'fail' }">¥{{ fmt(detail.amount) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="费用日期">{{ detail.expense_date || '-' }}</el-descriptions-item>
          <el-descriptions-item label="事由" :span="3">{{ detail.title }}</el-descriptions-item>
          <el-descriptions-item label="附件" :span="3">{{ detail.attachment || '无' }}</el-descriptions-item>
          <el-descriptions-item label="自动校验">
            <el-tag size="small" :type="detail.check_result === 'pass' ? 'success' : 'danger'">
              {{ detail.check_result === 'pass' ? '通过' : '超限打回' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">{{ statusLabel(detail.status) }}</el-descriptions-item>
          <el-descriptions-item label="审批人">{{ detail.approver || '-' }}</el-descriptions-item>
          <el-descriptions-item label="提交时间" :span="2">{{ detail.created_at }}</el-descriptions-item>
          <el-descriptions-item label="审批意见" :span="3">{{ detail.approve_comment || '-' }}</el-descriptions-item>
        </el-descriptions>

        <div class="check-block" v-if="detail.check_detail && detail.check_detail.length">
          <div class="check-title">校验明细</div>
          <div v-for="(c, i) in detail.check_detail" :key="i" class="check-item">
            <el-tag size="small" :type="c.passed ? 'success' : 'danger'" style="width:80px;text-align:center;">
              {{ c.passed ? '通过' : '超限' }}
            </el-tag>
            <span class="check-name">{{ c.rule_name }} ({{ c.rule_type }})</span>
            <span class="check-detail">{{ c.detail }}</span>
          </div>
          <div v-if="detail.check_reason" class="check-reason">⚠ 超限原因：{{ detail.check_reason }}</div>
        </div>

        <div v-if="canReview && ['pending', 'returned'].includes(detail.status)" class="detail-actions">
          <el-button size="small" type="success" @click="openReview(detail, 'approve')">通过</el-button>
          <el-button size="small" type="danger" @click="openReview(detail, 'reject')">拒绝</el-button>
          <el-button size="small" @click="openReview(detail, 'return')">人工打回</el-button>
        </div>
      </template>
    </MyDialog>

    <!-- 审批操作对话框 -->
    <MyDialog v-model="reviewVisible" :title="reviewTitle" :width="460">
      <el-form label-width="80px" size="small">
        <el-form-item label="报销单">{{ review.reimb?.reimb_no }} — ¥{{ fmt(review.reimb?.amount) }}</el-form-item>
        <el-form-item label="审批意见" :required="review.mode === 'reject'">
          <el-input v-model="review.comment" type="textarea" :rows="3" :placeholder="review.mode === 'reject' ? '拒绝时必须填写意见' : '选填'" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" @click="reviewVisible = false">取消</el-button>
        <el-button size="small" :type="review.mode === 'approve' ? 'success' : (review.mode === 'reject' ? 'danger' : 'warning')" :loading="reviewing" @click="doReview">
          {{ review.mode === 'approve' ? '确认通过' : (review.mode === 'reject' ? '确认拒绝' : '确认打回') }}
        </el-button>
      </template>
    </MyDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { expenseApi } from '../api/index'
import MyDialog from '../components/MyDialog.vue'
import { useFormGuard, trackDialogForm } from '../composables/useFormGuard'

const EXPENSE_TYPES: Record<string, string> = {
  entertainment: '招待费',
  travel: '差旅费',
  office: '办公费',
  management: '管理费',
}

const userStr = localStorage.getItem('cma_user') || '{}'
const user = JSON.parse(userStr)
const role: string = user.role || ''
const canReview = ['ceo', 'finance'].includes(role)

const activeTab = ref('list')
const loadingList = ref(false)
const loadingRules = ref(false)
const loadingStats = ref(false)

// ── 统计 ──
const stats = ref<any>({ counts: {}, over_limit: [], budget_usage: [], amounts_by_type: [] })

// ── 报销单 ──
const filters = reactive({ status: '', expense_type: '', keyword: '' })
const reimbursements = ref<any[]>([])
function filterByStatus(st: string) {
  filters.status = st
  activeTab.value = 'list'
  loadReimbursements()
}

// ── 规则 ──
const rules = ref<any[]>([])

// ── 对话框 ──
const submitVisible = ref(false)
const submitting = ref(false)
const submitForm = reactive({
  applicant: user.name || user.username || '',
  department: '',
  expense_type: '',
  title: '',
  amount: undefined as number | undefined,
  expense_date: '',
  attachment: '',
})

const ruleDialogVisible = ref(false)
const savingRule = ref(false)
const ruleForm = reactive({
  id: 0,
  rule_name: '',
  dimension: 'expense_type',
  dimension_value: '',
  expense_type: 'entertainment',
  limit_type: 'single',
  limit_amount: 1000,
  remark: '',
})

const detailVisible = ref(false)
const detail = ref<any>(null)

const reviewVisible = ref(false)
const reviewing = ref(false)
const review = reactive({ mode: 'approve' as 'approve' | 'reject' | 'return', reimb: null as any, comment: '' })
const reviewTitle = computed(() => {
  const m: Record<string, string> = { approve: '审批通过', reject: '审批拒绝', return: '人工打回' }
  return m[review.mode]
})

// ── 未保存离开守卫 ──
const isDirty = ref(false)
const { markDirty, markClean } = useFormGuard(isDirty)
trackDialogForm(ruleDialogVisible, ruleForm, markDirty)
trackDialogForm(submitVisible, submitForm, markDirty)
trackDialogForm(reviewVisible, review, markDirty)

// ── 图表 ──
const typeChartRef = ref<HTMLElement | null>(null)

// ── 工具 ──
function fmt(v: any): string {
  if (v === null || v === undefined) return '0'
  return Number(v).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
function statusLabel(s: string): string {
  const m: Record<string, string> = { pending: '待审批', approved: '已通过', rejected: '已拒绝', returned: '已打回' }
  return m[s] || s
}
function statusTag(s: string): string {
  const m: Record<string, string> = { pending: 'warning', approved: 'success', rejected: 'danger', returned: 'info' }
  return m[s] || 'info'
}
function typeTag(t: string): string {
  const m: Record<string, string> = { entertainment: 'danger', travel: 'warning', office: 'primary', management: 'info' }
  return m[t] || 'info'
}
function dimensionLabel(d: string): string {
  const m: Record<string, string> = { expense_type: '费用类型', department: '部门', person: '人员' }
  return m[d] || d
}
function limitTypeLabel(l: string): string {
  const m: Record<string, string> = { single: '单笔', monthly: '月度累计', yearly: '年度累计' }
  return m[l] || l
}

// ── 加载 ──
async function loadStats() {
  loadingStats.value = true
  try {
    const r: any = await expenseApi.stats()
    stats.value = r || {}
    renderChart()
  } catch (e: any) {
    ElMessage.error('统计加载失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    loadingStats.value = false
  }
}

async function loadReimbursements() {
  loadingList.value = true
  try {
    const r: any = await expenseApi.listReimbursements({
      status: filters.status || undefined,
      expense_type: filters.expense_type || undefined,
      keyword: filters.keyword || undefined,
    })
    reimbursements.value = r.data || []
  } catch (e: any) {
    ElMessage.error('报销单加载失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    loadingList.value = false
  }
}

async function loadRules() {
  loadingRules.value = true
  try {
    const r: any = await expenseApi.listRules()
    rules.value = r.data || []
  } catch (e: any) {
    ElMessage.error('规则加载失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    loadingRules.value = false
  }
}

function loadAll() {
  loadStats()
  loadReimbursements()
  loadRules()
}

// ── 图表渲染 ──
async function renderChart() {
  await nextTick()
  if (!typeChartRef.value) return
  const echarts: any = await import('echarts')
  const el = typeChartRef.value
  const chart = echarts.getInstanceByDom(el) || echarts.init(el)
  const items = stats.value.amounts_by_type || []
  chart.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: 60, right: 20, top: 30, bottom: 40 },
    xAxis: { type: 'category', data: items.map((i: any) => i.label) },
    yAxis: { type: 'value', name: '元' },
    series: [{
      type: 'bar',
      data: items.map((i: any) => i.amount),
      barWidth: 48,
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: (p: any) => {
          const colors = ['#F56C6C', '#E6A23C', '#409EFF', '#909399']
          return colors[p.dataIndex % colors.length]
        },
      },
      label: { show: true, position: 'top', formatter: (p: any) => '¥' + Number(p.value).toLocaleString() },
    }],
  })
}

// ── 提交报销 ──
function openSubmitDialog() {
  submitForm.applicant = user.name || user.username || ''
  submitForm.department = ''
  submitForm.expense_type = ''
  submitForm.title = ''
  submitForm.amount = undefined
  submitForm.expense_date = ''
  submitForm.attachment = ''
  submitVisible.value = true
}

async function doSubmit() {
  if (!submitForm.applicant || !submitForm.expense_type || !submitForm.title || !submitForm.amount) {
    ElMessage.warning('请填写申请人、费用类型、事由和金额')
    return
  }
  submitting.value = true
  try {
    const r: any = await expenseApi.submitReimbursement({ ...submitForm })
    submitVisible.value = false
    ElMessage.success(r.message || '已提交')
    if (r.data && r.data.check_result === 'fail') {
      ElMessageBox.alert(`该报销单超限，已自动打回：\n${r.data.check_reason || ''}`, '自动校验未通过', { confirmButtonText: '知道了' })
    }
    loadAll()
  } catch (e: any) {
    ElMessage.error('提交失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    submitting.value = false
  }
}

// ── 审批 ──
function openReview(row: any, mode: 'approve' | 'reject' | 'return') {
  review.mode = mode
  review.reimb = row
  review.comment = ''
  reviewVisible.value = true
}

async function doReview() {
  if (!review.reimb) return
  if (review.mode === 'reject' && !review.comment.trim()) {
    ElMessage.warning('拒绝时必须填写审批意见')
    return
  }
  reviewing.value = true
  try {
    const id = review.reimb.id
    if (review.mode === 'approve') await expenseApi.approveReimbursement(id, review.comment)
    else if (review.mode === 'reject') await expenseApi.rejectReimbursement(id, review.comment)
    else await expenseApi.returnReimbursement(id, review.comment)
    reviewVisible.value = false
    detailVisible.value = false
    ElMessage.success('操作成功')
    loadAll()
  } catch (e: any) {
    ElMessage.error('操作失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    reviewing.value = false
  }
}

async function resubmit(row: any) {
  try {
    await ElMessageBox.confirm(`确认重新提交「${row.reimb_no}」？将重新执行自动校验。`, '重新提交', { confirmButtonText: '重新提交', cancelButtonText: '取消' })
  } catch {
    return
  }
  try {
    const r: any = await expenseApi.resubmitReimbursement(row.id)
    ElMessage.success(r.message || '已重新提交')
    loadAll()
  } catch (e: any) {
    ElMessage.error('重提失败: ' + (e?.response?.data?.detail || e.message))
  }
}

// ── 详情 ──
async function openDetail(row: any) {
  try {
    const r: any = await expenseApi.getReimbursement(row.id)
    detail.value = r
    detailVisible.value = true
  } catch (e: any) {
    ElMessage.error('详情加载失败: ' + (e?.response?.data?.detail || e.message))
  }
}

// ── 规则 CRUD ──
function openRuleDialog(row?: any) {
  if (row) {
    Object.assign(ruleForm, {
      id: row.id, rule_name: row.rule_name, dimension: row.dimension,
      dimension_value: row.dimension_value || '', expense_type: row.expense_type,
      limit_type: row.limit_type, limit_amount: row.limit_amount, remark: row.remark || '',
    })
  } else {
    Object.assign(ruleForm, {
      id: 0, rule_name: '', dimension: 'expense_type', dimension_value: '',
      expense_type: 'entertainment', limit_type: 'single', limit_amount: 1000, remark: '',
    })
  }
  ruleDialogVisible.value = true
}

async function saveRule() {
  if (!ruleForm.rule_name || !ruleForm.expense_type || ruleForm.limit_amount === null || ruleForm.limit_amount === undefined) {
    ElMessage.warning('请填写规则名称、费用类型和限额金额')
    return
  }
  savingRule.value = true
  try {
    if (ruleForm.id) {
      await expenseApi.updateRule(ruleForm.id, { ...ruleForm })
    } else {
      await expenseApi.createRule({ ...ruleForm })
    }
    ruleDialogVisible.value = false
    ElMessage.success('规则已保存')
    markClean()
    loadRules()
  } catch (e: any) {
    ElMessage.error('保存失败: ' + (e?.response?.data?.detail || e.message))
  } finally {
    savingRule.value = false
  }
}

async function toggleRule(row: any) {
  try {
    await expenseApi.updateRule(row.id, { status: row.status === 'active' ? 'inactive' : 'active' })
    ElMessage.success(row.status === 'active' ? '已停用' : '已启用')
    loadRules()
  } catch (e: any) {
    ElMessage.error('操作失败: ' + (e?.response?.data?.detail || e.message))
  }
}

async function deleteRule(row: any) {
  try {
    await ElMessageBox.confirm(`确认删除规则「${row.rule_name}」？`, '删除规则', { confirmButtonText: '删除', cancelButtonText: '取消' })
  } catch {
    return
  }
  try {
    await expenseApi.deleteRule(row.id)
    ElMessage.success('已删除')
    loadRules()
  } catch (e: any) {
    ElMessage.error('删除失败: ' + (e?.response?.data?.detail || e.message))
  }
}

async function seedRules() {
  try {
    await ElMessageBox.confirm('将预置默认费用规则（招待费/差旅/办公/管理费标准），已有同名规则跳过。', '预置规则', { confirmButtonText: '预置', cancelButtonText: '取消' })
  } catch {
    return
  }
  try {
    const r: any = await expenseApi.seedRules()
    ElMessage.success(r.message || '预置完成')
    loadRules()
  } catch (e: any) {
    ElMessage.error('预置失败: ' + (e?.response?.data?.detail || e.message))
  }
}

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

<style scoped>
.expense-page { padding: 4px; }
.expense-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.expense-header .page-title { margin: 0; font-size: 18px; }
.header-right { display: flex; gap: 8px; }

.stat-cards { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 140px; background: #fff; border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card.highlight { background: linear-gradient(135deg, #409EFF, #337ecc); color: #fff; cursor: default; }
.stat-num { font-size: 24px; font-weight: 700; }
.stat-num.warn { color: #E6A23C; }
.stat-num.success { color: #67C23A; }
.stat-num.danger { color: #F56C6C; }
.stat-num.gray { color: #909399; }
.stat-card.highlight .stat-num { color: #fff; }
.stat-label { font-size: 12px; color: #909399; margin-top: 4px; }
.stat-card.highlight .stat-label { color: rgba(255,255,255,0.85); }

.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-info { font-size: 12px; color: #909399; }

.amount-over { color: #F56C6C; font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media screen and (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }
.budget-item { margin-bottom: 16px; }
.budget-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: #606266; }
.no-data { color: #909399; font-size: 13px; padding: 20px 0; text-align: center; }

.check-block { margin-top: 14px; background: #f8f9fb; border-radius: 6px; padding: 12px; }
.check-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: #303133; }
.check-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.check-name { font-weight: 500; white-space: nowrap; color: #303133; }
.check-detail { color: #606266; }
.check-reason { margin-top: 8px; color: #F56C6C; font-size: 13px; font-weight: 500; }
.detail-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }
</style>
