kd-aiot-frontend-hr/src/views/salary/statistics/index.vue

<!-- 薪资统计（深色科技风）—— 对接 POST /hr/payroll/batches/statistics -->
<template>
  <main class="salary-stat-view" v-loading="summaryLoading">
    <div class="fx-layer" aria-hidden="true">
      <span class="fx-orb fx-orb--a"></span>
      <span class="fx-orb fx-orb--b"></span>
      <span class="fx-orb fx-orb--c"></span>
      <span class="fx-scan"></span>
      <span class="fx-vignette"></span>
      <span class="fx-corner fx-corner--tl"></span>
      <span class="fx-corner fx-corner--tr"></span>
      <span class="fx-corner fx-corner--bl"></span>
      <span class="fx-corner fx-corner--br"></span>
    </div>

    <header class="stat-title">
      <div class="stat-title__wing stat-title__wing--left"><i></i><i></i><i></i></div>
      <div class="stat-title__frame">
        <span class="stat-title__shine"></span>
        <i class="stat-title__deco stat-title__deco--left"></i>
        <div class="stat-title__inner">
          <span class="stat-title__tag">SALARY ANALYTICS</span>
          <h1>薪资统计</h1>
        </div>
        <i class="stat-title__deco stat-title__deco--right"></i>
      </div>
      <div class="stat-title__wing stat-title__wing--right"><i></i><i></i><i></i></div>
    </header>

    <section class="stat-filter">
      <el-form :inline="true" label-width="80px" class="stat-filter-form" @submit.native.prevent>
        <!-- Y22：统计区间改为月份范围（后端 startMonth / endMonth 本就支持区间），趋势图随之可看季度 / 年度 -->
        <el-form-item label="统计区间">
          <el-date-picker v-model="where.statRange" type="monthrange" value-format="yyyy-MM" range-separator="~"
            start-placeholder="开始月份" end-placeholder="结束月份" clearable popper-class="dark-popper"
            style="width: 260px" />
          <span class="stat-filter__quick">
            <el-link type="primary" :underline="false" @click="quickRange('HALF_YEAR')">近 6 个月</el-link>
            <el-link type="primary" :underline="false" @click="quickRange('YEAR')">本年度</el-link>
            <el-link type="primary" :underline="false" @click="quickRange('ALL')">全部</el-link>
          </span>
        </el-form-item>
        <!-- 工资条明细接口只支持单个核算月份，故与统计区间分开，避免「区间被静默当成单月」 -->
        <el-form-item label="明细月份">
          <el-date-picker v-model="where.payrollMonth" type="month" value-format="yyyy-MM" placeholder="工资条明细按月筛选"
            clearable popper-class="dark-popper" style="width: 180px" />
        </el-form-item>
        <el-form-item label="所属机构">
          <el-select v-model="where.organizationId" filterable clearable popper-class="dark-popper" placeholder="请选择"
            style="width: 170px">
            <el-option v-for="item in legalEntities" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select v-model="where.departmentId" filterable clearable popper-class="dark-popper" placeholder="按部门统计与筛明细"
            style="width: 170px">
            <el-option v-for="item in departmentOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工资条状态" label-width="90px">
          <el-select v-model="where.status" clearable popper-class="dark-popper" placeholder="请选择" style="width: 130px">
            <el-option v-for="item in payslipStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <p class="stat-filter__tip">
        <i class="el-icon-lock"></i>
        <!-- 文字必须包在单个 span 里：flex 容器会把裸文本拆成多个匿名 flex 项横向错开折行 -->
        <span>
          数量 / 状态 / 完成率，以及<b>金额类指标（应发 / 实发 / 单位成本 / 人均）</b>均由服务端一次聚合返回
          （金额口径：仅计入已核算、已确认、已锁定批次）。
          <b>「所属部门」同时作用于上方汇总与下方明细</b>：汇总按核算时冻结的员工部门统计
          （自动包含全部下级部门）；明细按工资条当前部门筛选，两者口径可能不完全一致。
          到人的金额明细不在本页直接展示，需从明细行「查看金额」按需调取
          （按人金额受菜单权限与当前组织范围控制，无权查看时显示「***」）。
        </span>
      </p>
    </section>

    <section class="metric-grid">
      <article v-for="(card, index) in kpiCards" :key="card.key" class="metric-card"
        :class="[`metric-card--delay-${index}`, card.tone]">
        <span class="metric-card__border"></span>
        <span class="metric-card__scan"></span>
        <span class="metric-card__glow"></span>
        <span class="metric-card__corners" aria-hidden="true"></span>
        <span class="metric-icon">
          <span class="metric-icon__ring"></span>
          <span class="metric-icon__pulse"></span>
          <i :class="card.icon"></i>
        </span>
        <div class="metric-copy">
          <span class="metric-label">{{ card.label }}</span>
          <strong class="metric-value">{{ card.value }}<span v-if="card.unit" class="metric-unit">{{ card.unit
          }}</span></strong>
        </div>
        <span class="metric-card__code">0{{ index + 1 }}</span>
      </article>
    </section>

    <!--
      金额类指标：★ 2026-10-09 后端已补金额聚合。
      POST /hr/payroll/batches/statistics 现返回「按状态 + 按月」的
      应发 / 扣款 / 实发 / 单位成本金额，口径为**仅计入已核算、已确认或已锁定批次**
      （草稿与已取消批次不计入）。
    -->
    <section class="amount-panel">
      <div class="panel-header">
        <h2><em></em>金额类指标</h2>
        <span class="panel-sub">
          口径：仅计入已核算 / 已确认 / 已锁定批次，草稿与已取消批次不计入
        </span>
      </div>
      <div class="amount-grid">
        <div v-for="item in amountMetrics" :key="item.key" class="amount-card">
          <span class="amount-card__label">{{ item.label }}</span>
          <span class="amount-card__value">{{ item.value }}</span>
          <span class="amount-card__hint">{{ item.hint }}</span>
        </div>
      </div>
      <div v-if="statusAmountRows.length" class="amount-status">
        <div class="amount-status__title">按批次状态拆分</div>
        <el-table :data="statusAmountRows" size="mini" border>
          <el-table-column prop="label" label="批次状态" min-width="110" />
          <el-table-column prop="grossText" label="应发合计" align="right" min-width="110" />
          <el-table-column prop="deductionText" label="扣款合计" align="right" min-width="110" />
          <el-table-column prop="netText" label="实发合计" align="right" min-width="110" />
          <el-table-column prop="costText" label="单位成本" align="right" min-width="110" />
        </el-table>
      </div>
    </section>


    <section class="panel-grid">
      <article class="panel">
        <span class="panel__corners" aria-hidden="true"></span>
        <span class="panel__scan"></span>
        <div class="panel-header">
          <h2><em></em>批次状态分布</h2>
          <span class="panel-sub">共 {{ fmtNum(summary.totalBatchCount) }} 个批次</span>
        </div>
        <div ref="batchChart" class="chart"></div>
      </article>
      <article class="panel">
        <span class="panel__corners" aria-hidden="true"></span>
        <span class="panel__scan"></span>
        <div class="panel-header">
          <h2><em></em>工资条状态分布</h2>
          <span class="panel-sub">已发布 {{ fmtNum(summary.publishedPayslipCount) }} · 已确认 {{
            fmtNum(summary.confirmedPayslipCount) }}</span>
        </div>
        <div ref="payslipChart" class="chart"></div>
      </article>
      <article class="panel trend-panel">
        <span class="panel__corners" aria-hidden="true"></span>
        <span class="panel__scan"></span>
        <div class="panel-header">
          <h2><em></em>月度核算趋势</h2>
          <span class="panel-sub">{{ statRangeText }} · 整体核算完成率 {{ completionRateText }}</span>
        </div>
        <div ref="trendChart" class="chart"></div>
      </article>
    </section>

    <section class="panel table-panel">
      <span class="panel__corners" aria-hidden="true"></span>
      <span class="panel__scan"></span>
      <div class="panel-header table-panel-header">
        <h2><em></em>工资条明细</h2>
        <el-button v-if="$hasPermission('hr:hrPayrollStat:export')" type="primary" icon="el-icon-download"
          size="small" plain @click="openExport">受控导出</el-button>
      </div>
      <div class="table-wrap">
        <ele-pro-table ref="table" :columns="columns" :datasource="datasource" row-key="id" :page-size="pageSize"
          highlight-current-row @columns-change="handleColumnChange" :cache-key="$tableCacheKey(cacheKeyUrl)">
          <template v-slot:status="{ row }">
            <el-tag size="mini" :type="getPayslipTagType(row.payslipStatus)">{{ row.payslipStatusLabel }}</el-tag>
          </template>
          <template v-slot:effective="{ row }">
            <el-tag size="mini" :type="row.currentEffective ? 'success' : 'info'">{{ row.currentEffectiveLabel
            }}</el-tag>
          </template>
          <template v-slot:action="{ row }">
            <el-link v-if="$hasPermission('hr:hrPayrollStat:viewAmount')" type="primary" :underline="false"
              icon="el-icon-view" :disabled="!row.resultId" @click="openDetail(row)">查看金额</el-link>
          </template>
          <template slot="empty"><el-empty description="暂无工资条数据" /></template>
        </ele-pro-table>
      </div>
    </section>

    <!-- 金额明细（受控薪资结果：GET /hr/payroll/batches/results/{resultId}） -->
    <el-dialog title="工资条金额明细" :visible.sync="detailVisible" width="820px" append-to-body :close-on-click-modal="false"
      custom-class="salary-stat-dialog">
      <div v-loading="detailLoading" class="slip-detail">
        <el-alert type="info" :closable="false" show-icon
          title="金额字段受菜单权限与当前组织范围控制：显示「***」表示当前无权查看，显示「—」表示该员工该月尚未录入，不是 0。" />
        <div class="slip-detail-head">
          <span class="slip-detail-name">{{ detailResult?.employeeName || detailRow?.employeeName || '-' }}</span>
          <span class="slip-detail-meta">
            {{ detailRow?.payrollMonth || '' }}
            <template v-if="detailRow?.batchNo"> · {{ detailRow.batchNo }}</template>
            <template v-if="detailResult?.resultVersion"> · 版本 v{{ detailResult.resultVersion }}</template>
          </span>
          <el-button size="mini" icon="el-icon-refresh" :loading="detailLoading" @click="loadDetail">重新获取</el-button>
        </div>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="基本工资">{{ fmtMoney(detailResult?.basicAmount) }}</el-descriptions-item>
          <el-descriptions-item label="岗位工资">{{ fmtMoney(detailResult?.positionAmount) }}</el-descriptions-item>
          <el-descriptions-item label="绩效工资">{{ fmtMoney(detailResult?.performanceAmount) }}</el-descriptions-item>
          <el-descriptions-item label="津贴补贴">{{ fmtMoney(detailResult?.allowanceAmount) }}</el-descriptions-item>
          <el-descriptions-item label="奖金">{{ fmtMoney(detailResult?.bonusAmount) }}</el-descriptions-item>
          <el-descriptions-item label="应发工资">{{ fmtMoney(detailResult?.grossAmount) }}</el-descriptions-item>
          <el-descriptions-item label="扣款合计">{{ fmtMoney(detailResult?.deductionAmount) }}</el-descriptions-item>
          <el-descriptions-item label="实发工资">{{ fmtMoney(detailResult?.netAmount) }}</el-descriptions-item>
          <el-descriptions-item label="企业用工成本">{{ fmtMoney(detailResult?.employerCost) }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="detailResult?.itemDetails || []" size="mini" border class="slip-detail-table"
          empty-text="暂无薪资项目明细">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column label="项目名称" min-width="150">
            <template slot-scope="scope">{{ scope.row.itemName }}</template>
          </el-table-column>
          <el-table-column label="项目编码" min-width="130">
            <template slot-scope="scope">{{ scope.row.itemCode || '-' }}</template>
          </el-table-column>
          <el-table-column label="方向" width="110" align="center">
            <template slot-scope="scope">{{ salaryItemTypeLabel(scope.row.itemType) }}</template>
          </el-table-column>
          <el-table-column label="金额" width="120" align="right">
            <template slot-scope="scope">{{ fmtMoney(scope.row.finalAmount) }}</template>
          </el-table-column>
          <el-table-column label="计算轨迹" min-width="180">
            <template slot-scope="scope">{{ scope.row.calculationTrace || '-' }}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 受控导出（批次维度；契约 body 只有 reason，仅审批锁定批次可导出） -->
    <el-dialog title="受控导出薪资结果" :visible.sync="exportVisible" width="520px" append-to-body :close-on-click-modal="false"
      custom-class="salary-stat-dialog">
      <el-alert type="warning" :closable="false" show-icon
        title="导出仅支持审批锁定的批次，生成与下载都会写入审计。" />
      <el-form label-width="110px" class="export-form">
        <el-form-item label="薪资批次" required>
          <el-select v-model="exportForm.batchId" filterable popper-class="dark-popper" placeholder="请选择审批锁定的批次"
            style="width: 100%">
            <el-option v-for="item in batchOptions" :key="item.id"
              :label="`${item.batchNo || item.id} · ${item.payrollMonth || '-'} · ${item.batchStatusLabel}`"
              :value="String(item.id)" />
          </el-select>
          <div class="export-hint">
            下拉已按「审批锁定」过滤（服务端筛选 + 翻页取全），共 {{ batchOptions.length }} 个可导出批次。
          </div>
        </el-form-item>
        <el-form-item label="导出原因" required>
          <el-input v-model.trim="exportForm.reason" maxlength="200" show-word-limit placeholder="请填写导出业务原因（写入审计）" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="exportVisible = false">取消</el-button>
        <el-button type="primary" :loading="exportLoading" @click="submitExport">确认导出</el-button>
      </template>
    </el-dialog>
  </main>
</template>

<script>
import * as echarts from 'echarts';
import tabMixins from '@/mixins/tableColumnsMixin';
/* 机构选项取登录缓存；组织列表接口仅用于「部门」选项 */
import { listOrganizations } from '@/api/system/organization';
import { getOrgOptions, getCurrentOrgId } from '@/utils/current-org';
import { getPayrollStatistics, toPieData } from '@/api/salary/statistics';
/* 薪资项目方向字典（Y22/Y13：明细方向列不再直接显示 EARNING 这类原始枚举值） */
import { salaryItemTypeLabel } from '@/api/salary/fieldSetting';
import {
  getSalarySlipPageList, getSalarySlipDetail, exportSalarySlip, getBatchPageList,
  normalizeBatchStatus, PAYSLIP_STATUS_OPTIONS
} from '@/api/salary/salarySlip';
import { download } from '@/utils/file';

const PIE_COLORS = ['#00eaff', '#7af0ff', '#2cffb0', '#ffb020', '#ff7a59', '#9d8cff', '#4aa8ff'];

export default {
  name: 'SalaryStat',
  mixins: [tabMixins],
  data() {
    return {
      where: { statRange: [], payrollMonth: '', organizationId: '', departmentId: '', status: '' },
      legalEntities: [], departmentOptions: [],
      // 默认公司（当前登录用户所在法人）：加载组织后计算一次，初始化与重置共用
      defaultOrganizationId: '',
      payslipStatusOptions: PAYSLIP_STATUS_OPTIONS,
      summary: {}, summaryLoading: false,
      pageSize: this.$store.state.tablePageSize || 20,
      cacheKeyUrl: 'salary-stat-dashboard',
      charts: {}, resizeObserver: null, resizeFrame: null,
      detailVisible: false, detailLoading: false, detailRow: null, detailResult: null,
      exportVisible: false, exportLoading: false,
      batchOptions: [],
      exportForm: { batchId: '', reason: '' },
      columns: [
        { label: '序号', type: 'index', width: 55, align: 'center' },
        { prop: 'batchNo', label: '批次单号', showOverflowTooltip: true, align: 'left', minWidth: 150 },
        { prop: 'employeeName', label: '姓名', showOverflowTooltip: true, align: 'left', minWidth: 100 },
        { prop: 'payrollMonth', label: '核算月份', showOverflowTooltip: true, align: 'center', minWidth: 100 },
        { columnKey: 'status', label: '工资条状态', width: 120, align: 'center', slot: 'status' },
        { prop: 'resultVersion', label: '结果版本', width: 95, align: 'center', formatter: (row) => (row.resultVersion == null ? '—' : `v${row.resultVersion}`) },
        { prop: 'versionNo', label: '工资条版本', width: 105, align: 'center', formatter: (row) => (row.versionNo == null ? '—' : `v${row.versionNo}`) },
        { columnKey: 'effective', label: '版本状态', width: 105, align: 'center', slot: 'effective' },
        { prop: 'publishTime', label: '发布时间', showOverflowTooltip: true, align: 'left', minWidth: 150, formatter: (row) => this.fmtDateTime(row.publishTime) },
        { prop: 'confirmTime', label: '确认时间', showOverflowTooltip: true, align: 'left', minWidth: 150, formatter: (row) => this.fmtDateTime(row.confirmTime) },
        { columnKey: 'action', label: '操作', width: 110, align: 'center', slot: 'action' }
      ]
    };
  },
  computed: {
    styleResponsive() { return this.$store.state.theme?.styleResponsive !== false; },
    kpiCards() {
      const s = this.summary || {};
      const rate = Number(s.calculationCompletionRate);
      const hasRate = Number.isFinite(rate);
      return [
        { key: 'batch', label: '核算批次数', value: this.fmtNum(s.totalBatchCount), icon: 'el-icon-files', tone: '' },
        { key: 'employee', label: '期望核算人数', value: this.fmtNum(s.totalEmployeeCount), icon: 'el-icon-user', tone: '' },
        { key: 'calculated', label: '已核算人数', value: this.fmtNum(s.totalCalculatedEmployeeCount), icon: 'el-icon-circle-check', tone: '' },
        {
          key: 'rate',
          label: '核算完成率',
          value: hasRate ? rate.toFixed(2) : '—',
          unit: hasRate ? '%' : '',
          icon: 'el-icon-data-line',
          tone: 'metric-card--orange'
        },
        { key: 'exception', label: '未关闭异常', value: this.fmtNum(s.openExceptionCount), icon: 'el-icon-warning-outline', tone: '' }
      ];
    },
    /**
     * 金额类指标（★ 2026-10-09 后端已补聚合金额，不再是占位）。
     * 取不到时显示「—」而不是 0 —— 避免把「无权限/无数据」误读成「金额为 0」。
     */
    amountMetrics() {
      const s = this.summary || {};
      return [
        {
          key: 'gross',
          label: '应发工资总额',
          value: this.moneyText(s.totalGrossAmount),
          hint: '已核算 / 确认 / 锁定批次汇总'
        },
        {
          key: 'net',
          label: '实发工资总额',
          value: this.moneyText(s.totalNetAmount),
          hint: `已确认工资条 ${this.fmtNum(s.confirmedPayslipCount)} 条`
        },
        {
          key: 'cost',
          label: '企业用工成本',
          value: this.moneyText(s.totalEmployerCostAmount),
          hint: '含企业承担的社保公积金等'
        },
        {
          key: 'avg',
          label: '人均应发工资',
          value: this.moneyText(s.averageGrossAmount),
          hint: `应发合计 ÷ 可计入金额批次的结果员工数（${this.fmtNum(s.amountCalculatedEmployeeCount)} 人）`
        }
      ];
    },
    /** 按批次状态拆分的金额（后端 batchStatusAmounts） */
    statusAmountRows() {
      const list = (this.summary && this.summary.batchStatusAmounts) || [];
      return list.map((row) => ({
        ...row,
        grossText: this.fmtMoney(row.grossAmount),
        deductionText: this.fmtMoney(row.deductionAmount),
        netText: this.fmtMoney(row.netAmount),
        costText: this.fmtMoney(row.employerCostAmount)
      }));
    },
    /** 当前统计区间文案，用于趋势图副标题 */
    statRangeText() {
      const [from, to] = this.where.statRange || [];
      if (from && to) return from === to ? from : `${from} ~ ${to}`;
      if (from) return `${from} 起`;
      return '全部可见月份';
    },
    /**
     * 整体核算完成率文案。
     * 复测 P1-8：接口失败 / 无权限时 summary 为空，这里必须显示「—」，
     * 不能显示 0.00% —— 否则会把「取不到」误读成「真实完成率为 0」。
     */
    completionRateText() {
      const num = Number(this.summary?.calculationCompletionRate);
      return Number.isFinite(num) ? `${num.toFixed(2)}%` : '—';
    }
  },
  mounted() {
    this.observeResize();
    this.initFilter();
  },
  beforeDestroy() {
    Object.values(this.charts).forEach((c) => c && c.dispose());
    if (this.resizeObserver) this.resizeObserver.disconnect();
    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame);
    /* 复测 P2-7：不支持 ResizeObserver 的环境走 window.resize 兜底，销毁时必须解绑，
       否则反复进出页面会累积监听器 */
    window.removeEventListener('resize', this.resizeCharts);
  },
  methods: {
    /* 初始化：先确定默认公司（当前用户所在法人）再加载数据，避免首屏用空条件查询 */
    async initFilter() {
      await this.loadOrganizations();
      this.search();
    },
    /**
     * 数量类格式化：取不到（接口失败 / 字段缺失 / 无权限）一律显示「—」。
     * 复测 P1-8：原来 return '0'，接口 403 或加载失败时页面显示
     * 「核算批次数 0、期望核算人数 0、完成率 0.00%」，会被当成真实业务量为 0。
     */
    fmtNum(val) {
      const num = Number(val);
      if (!Number.isFinite(num)) return '—';
      return num.toLocaleString('zh-CN');
    },
    /** 金额：脱敏字符串原样展示，null/空值给 — */
    fmtMoney(val) {
      if (val === null || val === undefined || val === '') return '—';
      const num = Number(val);
      if (!Number.isFinite(num)) return String(val);
      return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    },
    /** 带 ¥ 的金额文本；取不到仍是「—」（不能变成 ¥ 0.00） */
    moneyText(val) {
      const text = this.fmtMoney(val);
      return text === '—' ? '—' : `¥ ${text}`;
    },
    fmtDateTime(val) {
      if (!val) return '—';
      return String(val).replace('T', ' ').slice(0, 16);
    },
    getPayslipTagType(status) {
      const hit = PAYSLIP_STATUS_OPTIONS.find((item) => item.value === status);
      return hit ? hit.tagType : 'info';
    },
    async loadOrganizations() {
      try {
        /* 所属机构选项：登录缓存 loginChangeGroupVOList（不再调组织列表接口） */
        this.legalEntities = getOrgOptions();
        /* 部门选项仍需组织列表按父级筛选 */
        const list = await listOrganizations().catch(() => []);
        const records = Array.isArray(list) ? list : [];
        const parents = new Map(records.map((item) => [String(item.id), item]));
        this.departmentOptions = records
          .filter((item) => parents.has(String(item.parentId || 0)))
          .map((item) => ({ id: item.id, name: item.name }));

        // 默认公司 = 当前登录用户所在的所属机构（与后端薪资数据范围校验口径一致）
        this.defaultOrganizationId =
          getCurrentOrgId() || this.legalEntities[0]?.id || '';
        if (!this.where.organizationId && this.defaultOrganizationId) {
          this.where.organizationId = this.defaultOrganizationId;
        }
      } catch (error) {
        console.error('加载组织架构失败', error);
      }
    },
    /** 统计条件：月份区间同时作为统计起止月（公司未选时回落到用户所在机构） */
    statQuery() {
      const [from, to] = this.where.statRange || [];
      return {
        companyId: this.where.organizationId || this.defaultOrganizationId || undefined,
        /* ★ C6：后端已支持按部门汇总（核算时冻结的员工部门，自动含下级部门） */
        deptId: this.where.departmentId || undefined,
        startMonth: from || undefined,
        endMonth: to || from || undefined
      };
    },
    /**
     * 快捷区间（Y22）：近 6 个月 / 本年度 / 全部。
     * 用本地日期算边界，避免手写月份字符串出错。
     */
    quickRange(type) {
      const now = new Date();
      const pad = (n) => String(n).padStart(2, '0');
      const fmt = (y, m) => `${y}-${pad(m)}`;
      if (type === 'ALL') {
        this.where.statRange = [];
      } else if (type === 'YEAR') {
        this.where.statRange = [fmt(now.getFullYear(), 1), fmt(now.getFullYear(), now.getMonth() + 1)];
      } else {
        const start = new Date(now.getFullYear(), now.getMonth() - 5, 1);
        this.where.statRange = [
          fmt(start.getFullYear(), start.getMonth() + 1),
          fmt(now.getFullYear(), now.getMonth() + 1)
        ];
      }
      this.search();
    },
    async loadSummary() {
      const query = this.statQuery();
      /* 所属机构未就绪时不请求，避免后端「必须指定所属机构」校验失败 */
      if (!query.companyId) {
        this.summary = {};
        return;
      }
      this.summaryLoading = true;
      try {
        this.summary = await getPayrollStatistics(query);
      } catch (error) {
        this.summary = {};
        console.error('加载薪资统计汇总失败', error);
        this.$message.error(error.message || '加载统计汇总失败');
      } finally {
        this.summaryLoading = false;
        this.$nextTick(() => this.initCharts());
      }
    },
    async initCharts() {
      await this.$nextTick();
      if (!this.$refs.batchChart || !this.$refs.payslipChart || !this.$refs.trendChart) return;
      this.charts.batch = this.ensureChart('batchChart', this.charts.batch);
      this.charts.payslip = this.ensureChart('payslipChart', this.charts.payslip);
      this.charts.trend = this.ensureChart('trendChart', this.charts.trend);
      Object.values(this.charts).forEach((chart) => chart && chart.resize());
      this.renderBatchChart();
      this.renderPayslipChart();
      this.renderTrendChart();
    },
    ensureChart(refName, instance) {
      const el = this.$refs[refName];
      if (!el) return instance;
      const existing = echarts.getInstanceByDom(el);
      if (existing) return existing;
      if (instance && !instance.isDisposed()) instance.dispose();
      return echarts.init(el);
    },
    observeResize() {
      if (window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver(() => {
          cancelAnimationFrame(this.resizeFrame);
          this.resizeFrame = requestAnimationFrame(this.resizeCharts);
        });
        if (this.$el) this.resizeObserver.observe(this.$el);
      } else {
        window.addEventListener('resize', this.resizeCharts);
      }
    },
    resizeCharts() {
      Object.values(this.charts).forEach((chart) => {
        if (chart && !chart.isDisposed() && chart.getDom()?.offsetParent) chart.resize();
      });
    },
    tooltipStyle() {
      return {
        backgroundColor: 'rgba(4, 18, 36, .94)',
        borderColor: 'rgba(0, 210, 255, .35)',
        borderWidth: 1,
        padding: [9, 12],
        textStyle: { color: '#e8f7ff', fontSize: 12 },
        extraCssText: 'border-radius:4px;box-shadow:0 0 18px rgba(0,180,255,.18)'
      };
    },
    emptyOption(text) {
      return {
        title: {
          text, left: 'center', top: 'middle',
          textStyle: { color: '#6f97b0', fontSize: 13, fontWeight: 'normal' }
        }
      };
    },
    /** 环形图公共配置（批次状态 / 工资条状态） */
    pieOption(data) {
      return {
        color: PIE_COLORS,
        tooltip: { trigger: 'item', formatter: '{b}: {c} 条 ({d}%)', ...this.tooltipStyle() },
        legend: {
          orient: 'vertical', right: 10, top: 'center', icon: 'circle',
          itemWidth: 10, itemHeight: 10, textStyle: { color: '#8fc4de', fontSize: 12 }
        },
        series: [{
          type: 'pie', radius: ['45%', '70%'], center: ['36%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: { borderRadius: 6, borderColor: 'rgba(3,20,40,0.9)', borderWidth: 2 },
          label: { show: false },
          emphasis: {
            label: { show: true, fontSize: 14, fontWeight: 'bold', formatter: '{b}\n{c}', color: '#e4f6ff' }
          },
          data
        }]
      };
    },
    renderBatchChart() {
      const chart = this.charts.batch;
      if (!chart) return;
      const data = toPieData(this.summary.batchStatusDistribution);
      chart.setOption(data.length ? this.pieOption(data) : this.emptyOption('暂无批次数据'), true);
    },
    renderPayslipChart() {
      const chart = this.charts.payslip;
      if (!chart) return;
      const data = toPieData(this.summary.payslipStatusDistribution);
      chart.setOption(data.length ? this.pieOption(data) : this.emptyOption('暂无工资条数据'), true);
    },
    renderTrendChart() {
      const chart = this.charts.trend;
      if (!chart) return;
      const trend = Array.isArray(this.summary.monthlyCalculationTrend)
        ? this.summary.monthlyCalculationTrend
        : [];
      if (!trend.length) {
        chart.setOption(this.emptyOption('暂无月度核算数据'), true);
        return;
      }
      const months = trend.map((item) => item.payrollMonth || '-');
      chart.setOption({
        color: ['#00eaff', '#2cffb0', '#ffb020'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(0,200,255,0.08)' } },
          ...this.tooltipStyle()
        },
        legend: {
          top: 0, right: 10, icon: 'roundRect', itemWidth: 12, itemHeight: 8,
          textStyle: { color: '#8fc4de', fontSize: 12 }
        },
        grid: { top: 44, right: 56, bottom: 34, left: 52 },
        xAxis: {
          type: 'category', data: months,
          axisLine: { lineStyle: { color: 'rgba(0,220,255,.45)' } },
          axisTick: { show: false },
          axisLabel: { color: '#8fd0ef', fontSize: 11 }
        },
        yAxis: [{
          type: 'value', name: '人数',
          nameTextStyle: { color: '#6fa9c8', fontSize: 11 },
          axisLine: { show: false }, axisTick: { show: false },
          axisLabel: { color: '#6fa9c8', fontSize: 10 },
          splitLine: { lineStyle: { color: 'rgba(0,190,255,.14)', type: 'dashed' } }
        }, {
          type: 'value', name: '完成率', max: 100, min: 0,
          nameTextStyle: { color: '#6fa9c8', fontSize: 11 },
          axisLine: { show: false }, axisTick: { show: false },
          axisLabel: { color: '#6fa9c8', fontSize: 10, formatter: '{value}%' },
          splitLine: { show: false }
        }],
        series: [
          {
            name: '期望核算人数', type: 'bar', barMaxWidth: 26,
            data: trend.map((item) => item.employeeCount),
            itemStyle: {
              borderRadius: [3, 3, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00eaff' }, { offset: 1, color: 'rgba(0,120,200,0.3)' }
              ])
            }
          },
          {
            name: '已核算人数', type: 'bar', barMaxWidth: 26,
            data: trend.map((item) => item.calculatedEmployeeCount),
            itemStyle: {
              borderRadius: [3, 3, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2cffb0' }, { offset: 1, color: 'rgba(0,150,120,0.28)' }
              ])
            }
          },
          {
            name: '核算完成率', type: 'line', yAxisIndex: 1, smooth: true, symbolSize: 6,
            data: trend.map((item) => item.calculationCompletionRate),
            lineStyle: { width: 2, color: '#ffb020' },
            itemStyle: { color: '#ffb020' }
          }
        ]
      }, true);
    },
    async datasource({ page, limit, where, order }) {
      /* 表格首屏可能早于「所属机构」就绪触发：用页面默认机构兜底，避免空参数请求被后端拒绝 */
      const companyId = (where || {}).companyId || this.where.organizationId || this.defaultOrganizationId;
      if (!companyId) {
        return { list: [], total: 0, count: 0 };
      }
      try {
        return await getSalarySlipPageList({
          ...(where || {}),
          companyId,
          ...(order || {}),
          pageNum: page,
          size: limit
        });
      } catch (error) {
        console.error('加载工资条列表失败', error);
        this.$message.error(error.message || '加载工资条列表失败');
        return { list: [], total: 0 };
      }
    },
    tableWhere() {
      return {
        payrollMonth: this.where.payrollMonth,
        companyId: this.where.organizationId,
        deptId: this.where.departmentId,
        payslipStatus: this.where.status
      };
    },
    search() {
      this.loadSummary();
      this.$refs.table.reload({ page: 1, where: this.tableWhere() });
    },
    reset() {
      // 重置后回到默认公司（当前用户所在法人），统计区间回到「全部可见月份」
      this.where = {
        statRange: [],
        payrollMonth: '',
        organizationId: this.defaultOrganizationId || '',
        departmentId: '',
        status: ''
      };
      this.search();
    },
    /* ---------------- 金额明细（受控薪资结果） ---------------- */
    openDetail(row) {
      if (!row?.resultId) {
        this.$message.warning('该工资条暂无薪资结果主键，无法查看金额');
        return;
      }
      this.detailVisible = true;
      this.detailRow = row;
      this.detailResult = null;
      this.loadDetail();
    },
    async loadDetail() {
      const row = this.detailRow;
      if (!row?.resultId) return;
      this.detailLoading = true;
      try {
        /* 契约：GET /hr/payroll/batches/results/{resultId} 只有 path 参数，无 query */
        this.detailResult = await getSalarySlipDetail(row.resultId);
      } catch (error) {
        this.detailResult = null;
        this.$message.error(error.message || '加载金额明细失败');
      } finally {
        this.detailLoading = false;
      }
    },
    /* ---------------- 受控导出（契约 body 只有 reason；仅审批锁定批次可导出） ---------------- */
    /**
     * P0-3：可导出判定必须走状态归一。
     * 模板状态后端就是返回中文的，批次状态此前直接比对英文字符串 ——
     * 一旦后端同款返回中文，这里的本地二次过滤会把**所有**批次都过滤掉，
     * 「受控导出」的批次下拉永远是空的。
     *
     * ★ 2026-10-10：后端已给出稳定枚举，其中 `APPROVED` 是「审批锁定」的**历史兼容值**
     *   （此前曾被别名归一到 APPROVED_LOCKED）。归一表不再把 APPROVED 并进 APPROVED_LOCKED，
     *   故这里显式把 APPROVED 一并算作可导出，历史批次不会从下拉里消失。
     */
    isExportable(batch) {
      const status = normalizeBatchStatus(batch?.batchStatus);
      return status === 'APPROVED_LOCKED' || status === 'APPROVED';
    },
    /** 按状态翻页取全（每页 200，最多 50 页）；batchStatus 传空表示不带状态下发 */
    async fetchBatchPages(companyId, batchStatus) {
      const size = 200;
      const maxPages = 50;
      const list = [];
      for (let pageNum = 1; pageNum <= maxPages; pageNum += 1) {
        const page = await getBatchPageList({
          companyId,
          batchStatus,
          pageNum,
          size,
          sortName: 'createTime',
          orderBy: 'descending'
        });
        const chunk = page.list || [];
        list.push(...chunk);
        const total = Number(page.count ?? page.total ?? list.length);
        if (!chunk.length || chunk.length < size || list.length >= total) break;
      }
      return list;
    },
    /**
     * 导出批次下拉数据。
     * 复测 P2-8：原实现固定 `size: 100` 且不按状态过滤 —— 批次超过 100 条时会误报
     * 「没有审批锁定的批次」。
     *
     * P0-3：先按状态下发（快）；**若筛完为空，再不带状态条件取一遍**并本地归一过滤。
     * 这样后端状态口径不管是中文还是英文都能取到数据，
     * 不会因为「筛选值口径猜错」把导出功能整条静默关掉。
     */
    async loadExportableBatches() {
      const companyId = this.where.organizationId || this.defaultOrganizationId;
      if (!companyId) return [];
      const filtered = (await this.fetchBatchPages(companyId, 'APPROVED_LOCKED')).filter((item) =>
        this.isExportable(item)
      );
      if (filtered.length) return filtered;
      /* 服务端筛选为空：退回「不带状态」再取一次，避免口径不一致导致下拉永远为空 */
      const all = await this.fetchBatchPages(companyId, undefined);
      return all.filter((item) => this.isExportable(item));
    },
    async openExport() {
      this.exportForm = { batchId: '', reason: '' };
      this.exportVisible = true;
      try {
        this.batchOptions = await this.loadExportableBatches();
        if (!this.batchOptions.length) {
          this.$message.warning(
            '当前法人范围内没有「审批锁定」的批次，后端不允许导出（如果确认存在已锁定批次，请把该批次状态告知管理员核对口径）'
          );
        } else if (this.batchOptions.length === 1) {
          this.exportForm.batchId = String(this.batchOptions[0].id);
        }
      } catch (error) {
        this.batchOptions = [];
        this.$message.error(error.message || '加载薪资批次失败');
      }
    },
    async submitExport() {
      const form = this.exportForm;
      if (!form.batchId) {
        this.$message.warning('请选择要导出的薪资批次');
        return;
      }
      if (!String(form.reason || '').trim()) {
        this.$message.warning('请填写导出原因');
        return;
      }
      const batch = this.batchOptions.find((item) => String(item.id) === String(form.batchId));
      if (!batch || !this.isExportable(batch)) {
        this.$message.warning('仅审批锁定的批次可导出，请更换批次');
        return;
      }
      this.exportLoading = true;
      try {
        /* 契约 body 只有 reason；失败时 API 层已识别 JSON 错误体并抛出业务错误 */
        const data = await exportSalarySlip({
          batchId: form.batchId,
          reason: String(form.reason).trim()
        });
        download(data, `薪资结果_${batch.batchNo || form.batchId}.xlsx`);
        this.exportVisible = false;
        this.$message.success('导出任务已提交并记录审计');
      } catch (error) {
        this.$message.error(error.message || '导出失败');
      } finally {
        this.exportLoading = false;
      }
    }
  }
};
</script>

<style src="../../../styles/views/HomeView.scss" scoped lang="scss"></style>

<style lang="scss" scoped>
.salary-stat-view {
  --bg: #000912;
  --panel: rgba(3, 20, 40, 0.72);
  --cyan: #00eaff;
  --orange: #ffb020;
  --text: #e4f6ff;
  --muted: #6f97b0;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: 14px;
  min-height: calc(100vh - 104px);
  padding: 16px 20px 18px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(0, 150, 220, 0.28), transparent 58%),
    radial-gradient(ellipse 38% 32% at 92% 18%, rgba(0, 100, 180, 0.2), transparent 62%),
    radial-gradient(ellipse 34% 28% at 6% 78%, rgba(0, 80, 140, 0.18), transparent 60%),
    linear-gradient(180deg, #001526 0%, var(--bg) 42%, #00060d 100%);
}

/* 标题 */
.stat-title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  animation: hr-fade-up 0.7s ease both;
}

.stat-title__wing {
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.85;
}

.stat-title__wing i {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 10px rgba(0, 230, 255, 0.65);
  animation: hr-breathe 3s ease-in-out infinite;
}

.stat-title__wing--left i:nth-child(1) {
  width: 54px;
}

.stat-title__wing--left i:nth-child(2) {
  width: 28px;
  animation-delay: 0.3s;
}

.stat-title__wing--left i:nth-child(3) {
  width: 12px;
  height: 12px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(0, 230, 255, 0.7);
}

.stat-title__wing--right {
  flex-direction: row-reverse;
}

.stat-title__wing--right i:nth-child(1) {
  width: 54px;
}

.stat-title__wing--right i:nth-child(2) {
  width: 28px;
  animation-delay: 0.3s;
}

.stat-title__wing--right i:nth-child(3) {
  width: 12px;
  height: 12px;
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(0, 230, 255, 0.7);
}

.stat-title__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: min(420px, 78vw);
  min-height: 58px;
  padding: 6px 52px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 90, 140, 0.55), rgba(0, 28, 55, 0.25) 55%, rgba(0, 40, 70, 0.4));
  clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 34px 100%, 0 50%);
  box-shadow: 0 0 0 1px rgba(0, 230, 255, 0.45) inset, 0 0 32px rgba(0, 190, 255, 0.28), 0 10px 30px rgba(0, 0, 0, 0.35);
}

.stat-title__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 62%);
  animation: hr-shine-x 4.8s ease-in-out infinite;
}

.stat-title__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-title__tag {
  margin-bottom: 2px;
  color: rgba(120, 220, 255, 0.75);
  font-size: 14px;
  letter-spacing: 0.32em;
}

.stat-title h1 {
  margin: 0;
  color: #f2fcff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-shadow: 0 0 12px rgba(0, 230, 255, 0.75), 0 0 28px rgba(0, 160, 255, 0.35);
}

.stat-title__deco {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 1px solid var(--cyan);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 14px rgba(0, 230, 255, 0.8);
  animation: hr-breathe 2.8s ease-in-out infinite;
}

.stat-title__deco--left {
  left: 16px;
}

.stat-title__deco--right {
  right: 16px;
  animation-delay: 1.2s;
}

/* 筛选区 */
.stat-filter {
  position: relative;
  z-index: 1;
  padding: 14px 18px 12px;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: linear-gradient(165deg, rgba(0, 50, 85, 0.38), rgba(2, 16, 32, 0.78) 42%, rgba(0, 28, 50, 0.55));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 28px rgba(0, 150, 220, 0.08) inset;
  backdrop-filter: blur(12px);
  animation: hr-fade-up 0.65s ease both;
}

.stat-filter-form ::v-deep .el-form-item {
  margin-bottom: 8px;
  margin-right: 12px;
}

.stat-filter-form ::v-deep .el-form-item__label {
  color: #ffffff !important;
  font-size: 14px;
}

.stat-filter__tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(0, 230, 255, 0.55);
  background: rgba(0, 60, 95, 0.28);
  color: #8fc4de;
  font-size: 14px;
  line-height: 18px;
}

.stat-filter__tip i {
  margin-top: 1px;
  color: #7af0ff;
}

/* 快捷区间 */
.stat-filter__quick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  font-size: 14px;
}

.stat-filter__quick ::v-deep .el-link {
  color: #7af0ff;
  font-size: 14px;
}

/* 金额类指标（★ 2026-10-09 后端已补聚合金额） */
.amount-panel {
  position: relative;
  z-index: 1;
  padding-bottom: 14px;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: linear-gradient(165deg, rgba(0, 50, 85, 0.38), rgba(2, 16, 32, 0.78) 42%, rgba(0, 28, 50, 0.55));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 28px rgba(0, 150, 220, 0.08) inset;
  backdrop-filter: blur(12px);
  animation: hr-fade-up 0.7s ease both;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px;
}

.amount-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px dashed rgba(0, 190, 255, 0.32);
  background: rgba(0, 40, 70, 0.35);
}

.amount-card__label {
  color: #8fc4de;
  font-size: 14px;
  line-height: 18px;
}

.amount-card__value {
  color: #7fe3ff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.amount-card__hint {
  color: #5b7f96;
  font-size: 14px;
  line-height: 16px;
}

/* ★ 2026-10-09：按批次状态拆分的金额表 */
.amount-status {
  margin: 14px 16px 0;
}

.amount-status__title {
  margin-bottom: 8px;
  color: #8fc4de;
  font-size: 14px;
}

.amount-status ::v-deep .el-table,
.amount-status ::v-deep .el-table th,
.amount-status ::v-deep .el-table tr,
.amount-status ::v-deep .el-table td {
  background-color: transparent;
  color: #a9d6ea;
  border-color: rgba(0, 190, 255, 0.2);
}

.amount-status ::v-deep .el-table th {
  color: #8fc4de;
  font-weight: 600;
}

.amount-status ::v-deep .el-table::before,
.amount-status ::v-deep .el-table--border::after,
.amount-status ::v-deep .el-table--border::before {
  background-color: rgba(0, 190, 255, 0.2);
}

/* KPI 指标卡 */
.metric-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 108px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 210, 255, 0.22);
  background: linear-gradient(135deg, rgba(0, 55, 95, 0.45), rgba(0, 16, 34, 0.78) 48%, rgba(0, 30, 55, 0.55));
  box-shadow: 0 0 0 1px rgba(0, 60, 100, 0.35) inset, 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(0, 160, 255, 0.08);
  backdrop-filter: blur(10px);
  animation: hr-fade-up 0.65s ease both;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.metric-card--delay-0 {
  animation-delay: 0.05s;
}

.metric-card--delay-1 {
  animation-delay: 0.12s;
}

.metric-card--delay-2 {
  animation-delay: 0.19s;
}

.metric-card--delay-3 {
  animation-delay: 0.26s;
}

.metric-card--delay-4 {
  animation-delay: 0.33s;
}

.metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 230, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 200, 255, 0.25) inset, 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 36px rgba(0, 200, 255, 0.22);
}

.metric-card--orange {
  --cyan: #ffb020;
}

.metric-card--orange .metric-card__glow {
  background: radial-gradient(circle, rgba(255, 176, 32, 0.24), transparent 68%);
}

.metric-card__border {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
  background:
    linear-gradient(90deg, rgba(0, 230, 255, 0.75), transparent 28%) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(0, 230, 255, 0.55), transparent 35%) left / 1px 100% no-repeat,
    linear-gradient(270deg, rgba(0, 230, 255, 0.35), transparent 30%) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(0, 230, 255, 0.35), transparent 30%) right / 1px 100% no-repeat;
}

.metric-card__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.08) 45%, transparent 70%);
  transform: translateX(-120%);
}

.metric-card:hover .metric-card__scan {
  animation: hr-shine-x 1.1s ease;
}

.metric-card__corners::before,
.metric-card__corners::after,
.metric-card::before,
.metric-card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--cyan);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(0, 230, 255, 0.7));
}

.metric-card::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.metric-card::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.metric-card__corners::before {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}

.metric-card__corners::after {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.metric-card__glow {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 220, 255, 0.28), transparent 68%);
}

.metric-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 60px;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: 16px;
  color: var(--cyan);
  border-radius: 50%;
  font-size: 24px;
  z-index: 1;
  background: radial-gradient(circle at 35% 30%, rgba(0, 230, 255, 0.3), rgba(0, 40, 70, 0.15) 55%, transparent);
}

.metric-icon__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 230, 255, 0.55);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: rgba(0, 230, 255, 0.15);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.28);
  animation: hr-ring-spin 6s linear infinite;
}

.metric-icon__pulse {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(0, 230, 255, 0.45);
  border-radius: 50%;
  animation: hr-pulse 2.4s ease-out infinite;
}

.metric-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.metric-label {
  color: #8fc4de;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.04em;
}

.metric-value {
  margin-top: 3px;
  color: #f5fcff;
  font-size: 28px;
  line-height: 36px;
  font-weight: 720;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(0, 220, 255, 0.45), 0 0 2px rgba(255, 255, 255, 0.35);
}

.metric-unit {
  margin-left: 2px;
  font-size: 16px;
  font-weight: 500;
  color: #7eb2cd;
}

.metric-card__code {
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(0, 220, 255, 0.28);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* 面板（图表 + 表格） */
.panel-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.trend-panel {
  grid-column: 1 / -1;
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border: 1px solid rgba(0, 200, 255, 0.22);
  background: linear-gradient(165deg, rgba(0, 50, 85, 0.38), rgba(2, 16, 32, 0.78) 42%, rgba(0, 28, 50, 0.55));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), 0 0 28px rgba(0, 150, 220, 0.08) inset;
  backdrop-filter: blur(12px);
  animation: hr-fade-up 0.75s ease both;
  animation-delay: 0.2s;
}

.panel__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 220, 255, 0.05), transparent);
  animation: hr-scan-y 11s linear infinite;
  opacity: 0.7;
}

.panel__corners::before,
.panel__corners::after,
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--cyan);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 6px rgba(0, 230, 255, 0.65));
}

.panel::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.panel::after {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.panel__corners::before {
  right: -1px;
  bottom: -1px;
  border-width: 0 2px 2px 0;
}

.panel__corners::after {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.panel-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px 8px;
}

.panel-header h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #eaf9ff;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(0, 200, 255, 0.35);
}

.panel-header h2 em {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #7af6ff, rgba(0, 180, 255, 0.1));
  box-shadow: 0 0 10px rgba(0, 230, 255, 0.8);
}

.panel-sub {
  color: #6f97b0;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.chart {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 320px;
}

.trend-panel .chart {
  min-height: 300px;
}

.table-panel {
  animation-delay: 0.3s;
}

.table-panel-header .el-button {
  background: rgba(0, 50, 80, 0.6);
  border-color: rgba(0, 210, 255, 0.4);
  color: #7af0ff;
}

.table-wrap {
  position: relative;
  z-index: 1;
  padding: 0 16px 14px;
}
</style>

<!-- Element UI 深色主题覆盖（全局，非 scoped） -->
<style lang="scss">
.salary-stat-view {

  .el-input__inner,
  .el-textarea__inner {
    color: #d5f1ff !important;
    border-color: rgba(0, 210, 255, 0.38);
    background: linear-gradient(180deg, rgba(0, 40, 70, 0.9), rgba(0, 18, 36, 0.95));
    box-shadow: 0 0 12px rgba(0, 160, 255, 0.12) inset;
  }

  .el-input__inner:hover,
  .el-input.is-focus .el-input__inner {
    border-color: rgba(0, 230, 255, 0.7);
  }

  .el-input__inner::placeholder {
    color: #b0c8d8 !important;
  }

  .el-input__suffix,
  .el-input__prefix {
    color: #b0c8d8;
  }

  .el-input__icon {
    color: #b0c8d8;
  }

  .el-select .el-input__inner {
    color: #d5f1ff !important;
  }

  .el-select-dropdown__item {
    color: #c8e6f5;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(0, 80, 130, 0.45);
    color: #7af0ff;
  }

  .el-select-dropdown {
    background: rgba(3, 20, 40, 0.96);
    border-color: rgba(0, 210, 255, 0.35);
  }

  .el-select-dropdown__empty {
    color: #6f97b0;
  }

  .el-date-editor .el-range-input {
    color: #d5f1ff !important;
    background: transparent;
  }

  .el-date-editor .el-range-separator {
    color: #b0c8d8;
  }

  .el-date-editor .el-input__inner {
    color: #d5f1ff !important;
  }

  .el-date-picker,
  .el-picker-panel {
    background: rgba(3, 20, 40, 0.96);
    border-color: rgba(0, 210, 255, 0.35);
  }

  .el-picker-panel__icon-btn {
    color: #ffffff;
  }

  .el-date-table th {
    color: #ffffff;
    border-bottom-color: rgba(0, 190, 255, 0.2);
  }

  .el-date-table td .el-date-table-cell__text {
    color: #c8e6f5;
  }

  .el-date-table td.today .el-date-table-cell__text {
    color: #7af0ff;
  }

  .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
    background: #00eaff;
    color: #000912;
  }

  .el-button--primary {
    background: linear-gradient(180deg, rgba(0, 90, 140, 0.7), rgba(0, 40, 70, 0.85));
    border-color: rgba(0, 210, 255, 0.5);
    color: #7af0ff;
  }

  .el-button--primary:hover {
    border-color: rgba(0, 230, 255, 0.8);
    box-shadow: 0 0 16px rgba(0, 180, 255, 0.25);
  }

  .el-button--primary.is-plain {
    background: rgba(0, 50, 80, 0.5);
  }

  .el-button--default {
    background: rgba(0, 40, 70, 0.5);
    border-color: rgba(0, 190, 255, 0.3);
    color: #ffffff;
  }

  .el-button--default:hover {
    border-color: rgba(0, 230, 255, 0.6);
    color: #7af0ff;
  }

  /* 表格深色 */
  .el-table {
    background: transparent;
    color: #d7eef8;
  }

  .el-table th.el-table__cell {
    background: rgba(0, 50, 85, 0.5) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(0, 190, 255, 0.25);
  }

  .el-table th.el-table__cell .cell {
    color: #ffffff !important;
  }

  .el-table th.el-table__cell>.cell {
    color: #ffffff !important;
  }

  .el-table tr {
    background: transparent;
  }

  .el-table td.el-table__cell {
    border-bottom-color: rgba(0, 180, 255, 0.12);
  }

  .el-table--enable-row-transition .el-table__body td.el-table__cell {
    background: transparent;
  }

  .el-table__row:hover>td.el-table__cell {
    background: rgba(0, 70, 110, 0.3) !important;
  }

  .el-table__body tr.current-row>td.el-table__cell {
    background: rgba(0, 120, 180, 0.35) !important;
  }

  .el-table--border,
  .el-table--group {
    border-color: rgba(0, 190, 255, 0.2);
  }

  .el-table--border th.el-table__cell,
  .el-table--border td.el-table__cell {
    border-right-color: rgba(0, 190, 255, 0.15);
  }

  .el-table::before,
  .el-table--border::after {
    background-color: rgba(0, 190, 255, 0.2);
  }

  .el-table__empty-text {
    color: #6f97b0;
  }

  /* ele-pro-table 工具栏（刷新/列设置/全屏）深色化 */
  .ele-table-tool {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 190, 255, 0.18) !important;
  }

  .ele-table-tool .ele-tool-actions,
  .ele-table-tool .ele-tool-left {
    color: #8fc4de;
  }

  .ele-table-tool .el-button--text,
  .ele-table-tool .el-button {
    color: #8fc4de;
    background: transparent;
    border-color: transparent;
  }

  .ele-table-tool .el-button--text:hover,
  .ele-table-tool .el-button:hover {
    color: #7af0ff;
  }

  .ele-table-tool .el-tooltip i,
  .ele-table-tool i {
    color: #8fc4de;
  }

  .ele-table-tool .el-tooltip:hover i,
  .ele-table-tool .el-button:hover i {
    color: #7af0ff;
  }

  .ele-pro-table-main {
    background: transparent;
  }

  .ele-pro-table-pagination {
    border-top: 1px solid rgba(0, 190, 255, 0.15) !important;
    background: transparent !important;
  }

  /* 全屏模式深色化 */
  .ele-pro-table.ele-pro-table-fullscreen {
    background-color: #000912 !important;
    background: linear-gradient(180deg, #001526 0%, #000912 42%, #00060d 100%) !important;
    z-index: 3000 !important;
  }

  .ele-pro-table.ele-pro-table-fullscreen .ele-table-tool {
    background: transparent !important;
  }

  .ele-pro-table.ele-pro-table-fullscreen .el-table th.el-table__cell {
    background: rgba(0, 50, 85, 0.5) !important;
    color: #ffffff !important;
  }

  .ele-pro-table.ele-pro-table-fullscreen .el-table th.el-table__cell .cell {
    color: #ffffff !important;
  }

  .ele-pro-table.ele-pro-table-fullscreen .el-table,
  .ele-pro-table.ele-pro-table-fullscreen .el-table tr {
    background: transparent !important;
  }

  /* 分页 */
  .el-pagination {
    color: #8fc4de;
  }

  .el-pagination .btn-prev,
  .el-pagination .btn-next {
    color: #8fc4de;
    background: transparent;
  }

  .el-pagination .btn-prev:hover,
  .el-pagination .btn-next:hover {
    color: #7af0ff;
  }

  .el-pagination button:disabled {
    color: #4a6a80;
  }

  .el-pager li {
    background: transparent;
    color: #8fc4de;
  }

  .el-pager li:hover {
    color: #7af0ff;
  }

  .el-pager li.active {
    color: #7af0ff;
    border-bottom: 2px solid #00eaff;
  }

  .el-pagination__total,
  .el-pagination__jump {
    color: #8fc4de;
  }

  .el-pagination .el-input__inner {
    color: #d5f1ff;
  }

  .el-pagination .el-select .el-input__inner {
    color: #d5f1ff;
  }

  /* 标签深色化 */
  .el-tag {
    border-color: rgba(0, 200, 255, 0.35);
  }

  .el-tag--mini {
    color: inherit;
  }

  .el-link {
    color: #7af0ff;
  }

  .el-link.is-disabled {
    color: #4a6a80 !important;
  }

  .el-dialog__wrapper {
    z-index: 9999;
  }
}

/* 深色弹框（金额明细 / 受控导出） */
.salary-stat-dialog {
  background: linear-gradient(165deg, rgba(0, 50, 85, 0.95), rgba(2, 16, 32, 0.98));
  border: 1px solid rgba(0, 210, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 230, 255, 0.25) inset, 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 180, 255, 0.18);
  backdrop-filter: blur(14px);
}

.salary-stat-dialog .el-dialog__header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid rgba(0, 190, 255, 0.2);
}

.salary-stat-dialog .el-dialog__title {
  color: #eaf9ff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.salary-stat-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #8fc4de;
}

.salary-stat-dialog .el-dialog__body {
  padding: 16px 24px 20px;
  color: #d7eef8;
}

.salary-stat-dialog .el-dialog__footer {
  padding: 12px 24px 18px;
  border-top: 1px solid rgba(0, 190, 255, 0.16);
}

.salary-stat-dialog .el-alert--info,
.salary-stat-dialog .el-alert--warning {
  background: rgba(0, 60, 95, 0.4);
  border: 1px solid rgba(0, 190, 255, 0.25);
}

.salary-stat-dialog .el-alert__title,
.salary-stat-dialog .el-alert__description {
  color: #9fd8f0;
  font-size: 14px;
  line-height: 18px;
}

.salary-stat-dialog .el-form-item__label {
  color: #ffffff;
}

.salary-stat-dialog .slip-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 190, 255, 0.2);
}

.salary-stat-dialog .slip-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #eaf9ff;
}

.salary-stat-dialog .slip-detail-meta {
  flex: 1;
  font-size: 14px;
  color: #6f97b0;
}

.salary-stat-dialog .slip-detail-table {
  margin-top: 14px;
}

.salary-stat-dialog .export-hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #6f97b0;
}

.salary-stat-dialog .el-descriptions__body {
  background: transparent !important;
}

.salary-stat-dialog .el-descriptions__body .el-descriptions__table {
  background: transparent !important;
}

.salary-stat-dialog .el-descriptions-item__label.is-bordered-label {
  background: rgba(0, 50, 85, 0.5);
  color: #ffffff;
  font-weight: 500;
}

.salary-stat-dialog .el-descriptions-item__content {
  background: rgba(2, 16, 32, 0.6);
  color: #d7eef8;
}

.salary-stat-dialog .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions-item__cell {
  border-color: rgba(0, 190, 255, 0.2);
}

.salary-stat-dialog .el-table {
  background: transparent;
  color: #d7eef8;
}

.salary-stat-dialog .el-table th.el-table__cell {
  background: rgba(0, 50, 85, 0.5) !important;
  color: #ffffff !important;
  border-bottom-color: rgba(0, 190, 255, 0.25);
}

.salary-stat-dialog .el-table td.el-table__cell {
  background: rgba(2, 16, 32, 0.5);
  border-bottom-color: rgba(0, 180, 255, 0.12);
}

.salary-stat-dialog .el-table--border,
.salary-stat-dialog .el-table--group {
  border-color: rgba(0, 190, 255, 0.2);
}

.salary-stat-dialog .el-table--border th.el-table__cell,
.salary-stat-dialog .el-table--border td.el-table__cell {
  border-right-color: rgba(0, 190, 255, 0.15);
}

.salary-stat-dialog .el-table__empty-text {
  color: #6f97b0;
}

/* 响应式 */
@media (max-width: 1400px) {
  .salary-stat-view .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .salary-stat-view .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .salary-stat-view .panel-grid {
    grid-template-columns: 1fr;
  }

  .salary-stat-view .trend-panel {
    grid-column: auto;
  }

  .salary-stat-view .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salary-stat-view .amount-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .salary-stat-view .metric-grid {
    grid-template-columns: 1fr;
  }

  .salary-stat-view .stat-title__wing {
    display: none;
  }
}
</style>