<template>
  <div class="app-container supply-dashboard-page">
    <div class="page-header">
      <h2><i class="el-icon-s-data"></i> 供应监测</h2>
      <p class="page-desc">统一查看供应商评分卡、供应商筛选对比、月度来货对账、付款计划与付款建议。</p>
    </div>

    <div class="metric-grid">
      <div class="metric-card primary">
        <span>供应商总数</span>
        <strong>{{ supplierList.length }}</strong>
        <em>当前查询范围</em>
      </div>
      <div class="metric-card success">
        <span>A级供应商</span>
        <strong>{{ levelCount('A') }}</strong>
        <em>综合分 ≥ 85</em>
      </div>
      <div class="metric-card warning">
        <span>预警供应商</span>
        <strong>{{ warningSuppliers.length }}</strong>
        <em>低分/交付/完成率异常</em>
      </div>
      <div class="metric-card danger">
        <span>到期付款金额</span>
        <strong>¥{{ compactMoney(overduePayAmount) }}</strong>
        <em>已到期计划</em>
      </div>
    </div>

    <el-card class="box-card filter-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-search"></i> 查询与筛选</span>
      </div>
      <el-form :inline="true" size="small" class="form-inline">
        <el-form-item label="供应商名称">
          <el-input v-model="query.supplierName" clearable placeholder="输入供应商名称" style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="供应商等级">
          <el-select v-model="localFilters.supplierLevel" clearable placeholder="全部等级" style="width: 130px">
            <el-option label="A级" value="A" />
            <el-option label="B级" value="B" />
            <el-option label="C级" value="C" />
            <el-option label="预警" value="预警" />
          </el-select>
        </el-form-item>
        <el-form-item label="预警状态">
          <el-select v-model="localFilters.warningTag" clearable placeholder="全部状态" style="width: 150px">
            <el-option label="正常" value="正常" />
            <el-option label="综合分预警" value="综合分预警" />
            <el-option label="质量预警" value="质量预警" />
            <el-option label="交付预警" value="交付预警" />
            <el-option label="完成率预警" value="完成率预警" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="filter-divider" />
      <div class="filter-title">
        <span>多维筛选</span>
        <em>当前显示 {{ filteredSupplierList.length }} / {{ supplierList.length }} 个供应商</em>
      </div>
      <el-form :inline="true" size="small" class="form-inline advanced-filter">
        <el-form-item label="综合分">
          <div class="range-input">
            <el-input-number v-model="localFilters.minTotalScore" :min="0" :max="100" :controls="false" placeholder="最小" />
            <span>至</span>
            <el-input-number v-model="localFilters.maxTotalScore" :min="0" :max="100" :controls="false" placeholder="最大" />
          </div>
        </el-form-item>
        <el-form-item label="账期">
          <div class="range-input">
            <el-input-number v-model="localFilters.minTermDays" :min="0" :controls="false" placeholder="最小" />
            <span>至</span>
            <el-input-number v-model="localFilters.maxTermDays" :min="0" :controls="false" placeholder="最大" />
            <span>天</span>
          </div>
        </el-form-item>
        <el-form-item label="入库金额">
          <div class="range-input wide">
            <el-input-number v-model="localFilters.minReceiptAmount" :min="0" :controls="false" placeholder="最小金额" />
            <span>至</span>
            <el-input-number v-model="localFilters.maxReceiptAmount" :min="0" :controls="false" placeholder="最大金额" />
          </div>
        </el-form-item>
        <el-form-item label="交付及时率">
          <div class="range-input">
            <el-input-number v-model="localFilters.minDeliveryRate" :min="0" :max="100" :controls="false" placeholder="最小" />
            <span>至</span>
            <el-input-number v-model="localFilters.maxDeliveryRate" :min="0" :max="100" :controls="false" placeholder="最大" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item label="完成率">
          <div class="range-input">
            <el-input-number v-model="localFilters.minCompletionRate" :min="0" :max="100" :controls="false" placeholder="最小" />
            <span>至</span>
            <el-input-number v-model="localFilters.maxCompletionRate" :min="0" :max="100" :controls="false" placeholder="最大" />
            <span>%</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-left" @click="resetLocalFilters">清空筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-tabs v-model="activeTab" type="border-card" class="box-card" @tab-click="handleTabClick">
      <el-tab-pane label="评分卡" name="scorecard">
        <el-table v-loading="loading" :data="pagedSupplierList" row-key="supplierName" border highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="48" reserve-selection />
          <el-table-column prop="supplierName" label="供应商名称" min-width="230" fixed="left" show-overflow-tooltip />
          <el-table-column prop="supplierLevel" label="等级" width="90" align="center">
            <template slot-scope="scope"><el-tag :type="levelTag(scope.row.supplierLevel)" size="mini">{{ scope.row.supplierLevel }}</el-tag></template>
          </el-table-column>
          <el-table-column prop="warningTag" label="预警" width="120" align="center">
            <template slot-scope="scope"><el-tag :type="warningTagType(scope.row.warningTag)" size="mini">{{ scope.row.warningTag }}</el-tag></template>
          </el-table-column>
          <el-table-column label="综合分" width="110" align="right">
            <template slot-scope="scope"><strong>{{ formatNumber(scope.row.totalScore) }}</strong></template>
          </el-table-column>
          <el-table-column label="成本分" width="100" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.costScore) }}</template></el-table-column>
          <el-table-column label="交付分" width="100" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.deliveryScore) }}</template></el-table-column>
          <el-table-column label="账期分" width="100" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.termScore) }}</template></el-table-column>
          <el-table-column label="QA合格率" width="120" align="right"><template slot-scope="scope">{{ scope.row.qaPassRate === null || scope.row.qaPassRate === undefined ? '暂无' : formatPercent(scope.row.qaPassRate) }}</template></el-table-column>
          <el-table-column label="不合格数" width="110" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.qaDefectQty, 0) }}</template></el-table-column>
          <el-table-column label="账期" width="90" align="right"><template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template></el-table-column>
          <el-table-column label="入库金额" width="130" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.receiptAmount) }}</template></el-table-column>
          <el-table-column label="交付及时率" width="120" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.deliveryRate) }}</template></el-table-column>
          <el-table-column label="完成率" width="110" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.completionRate) }}</template></el-table-column>
        </el-table>
        <div class="pagination-wrap"><el-pagination :current-page.sync="pagination.list.page" :page-size="pagination.list.size" :total="filteredSupplierList.length" layout="total, prev, pager, next, jumper" /></div>
      </el-tab-pane>

      <el-tab-pane label="供应商对比" name="compare">
        <div class="toolbar">
          <span>已选择 {{ selectedSuppliers.length }} 个供应商，支持勾选 2-5 个供应商进行对比。</span>
          <el-button type="primary" size="mini" :disabled="selectedSuppliers.length < 2" @click="loadCompare">生成对比</el-button>
        </div>
        <div class="chart-card">
          <div class="chart-title">供应商核心指标柱状对比</div>
          <div v-if="compareList.length === 0" class="chart-empty">请选择 2-5 个供应商并生成对比</div>
          <div ref="compareChart" class="compare-chart" />
        </div>
        <el-table v-loading="compareLoading" :data="compareList" empty-text="暂无对比数据" border highlight-current-row style="width: 100%">
          <el-table-column prop="supplierName" label="供应商名称" min-width="220" fixed="left" show-overflow-tooltip />
          <el-table-column label="账期" width="90" align="right"><template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template></el-table-column>
          <el-table-column label="订单金额" width="130" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.orderAmount) }}</template></el-table-column>
          <el-table-column label="入库金额" width="130" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.receiptAmount) }}</template></el-table-column>
          <el-table-column label="交付及时率" width="120" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.deliveryRate) }}</template></el-table-column>
          <el-table-column label="完成率" width="110" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.completionRate) }}</template></el-table-column>
          <el-table-column label="未完工数" width="120" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.uncompletedQty) }}</template></el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="预警列表" name="warnings">
        <el-table :data="warningSuppliers" border highlight-current-row style="width: 100%">
          <el-table-column prop="supplierName" label="供应商名称" min-width="230" show-overflow-tooltip />
          <el-table-column prop="warningTag" label="预警类型" width="130" align="center"><template slot-scope="scope"><el-tag :type="warningTagType(scope.row.warningTag)" size="mini">{{ scope.row.warningTag }}</el-tag></template></el-table-column>
          <el-table-column label="综合分" width="110" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.totalScore) }}</template></el-table-column>
          <el-table-column label="交付及时率" width="120" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.deliveryRate) }}</template></el-table-column>
          <el-table-column label="完成率" width="110" align="right"><template slot-scope="scope">{{ formatPercent(scope.row.completionRate) }}</template></el-table-column>
          <el-table-column label="建议动作" min-width="220"><template slot-scope="scope">{{ warningSuggestion(scope.row) }}</template></el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="月度来货对账" name="reconciliation">
        <el-table v-loading="reconciliationLoading" :data="reconciliationList" border highlight-current-row style="width: 100%">
          <el-table-column prop="month" label="月份" width="110" fixed="left" />
          <el-table-column prop="supplierName" label="供应商名称" min-width="230" show-overflow-tooltip />
          <el-table-column label="入库单数" prop="receiptCount" width="100" align="right" />
          <el-table-column label="入库行数" prop="receiptLines" width="100" align="right" />
          <el-table-column label="入库数量" width="120" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.receiptQty) }}</template></el-table-column>
          <el-table-column label="入库金额" width="140" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.receiptAmount) }}</template></el-table-column>
          <el-table-column label="平均入库价" width="130" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.avgReceiptPrice) }}</template></el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="付款计划" name="payment">
        <div class="summary-strip">
          <div v-for="item in paymentSummary" :key="item.month" class="summary-item">
            <span>{{ item.month }}</span>
            <strong>¥{{ compactMoney(item.estimatedPayAmount) }}</strong>
            <em>{{ item.suggestion }}</em>
          </div>
        </div>
        <el-table v-loading="paymentLoading" :data="pagedPaymentPlan" border highlight-current-row style="width: 100%">
          <el-table-column prop="dueDate" label="预计付款日" width="120" fixed="left" />
          <el-table-column prop="supplierName" label="供应商名称" min-width="220" show-overflow-tooltip />
          <el-table-column label="账期" width="90" align="right"><template slot-scope="scope">{{ scope.row.termDays || 0 }}天</template></el-table-column>
          <el-table-column label="预计付款金额" width="150" align="right"><template slot-scope="scope">¥{{ formatMoney(scope.row.estimatedPayAmount) }}</template></el-table-column>
          <el-table-column label="入库数量" width="120" align="right"><template slot-scope="scope">{{ formatNumber(scope.row.receiptQty) }}</template></el-table-column>
          <el-table-column prop="receiptLines" label="入库行数" width="100" align="right" />
          <el-table-column prop="status" label="状态" width="110" align="center"><template slot-scope="scope"><el-tag :type="paymentTag(scope.row.status)" size="mini">{{ scope.row.status }}</el-tag></template></el-table-column>
          <el-table-column label="建议" width="120" align="center"><template slot-scope="scope"><el-tag :type="paySuggestionType(scope.row.status)" size="mini">{{ paySuggestion(scope.row.status) }}</el-tag></template></el-table-column>
        </el-table>
        <div class="pagination-wrap"><el-pagination :current-page.sync="pagination.payment.page" :page-size="pagination.payment.size" :total="paymentPlan.length" layout="total, prev, pager, next, jumper" /></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getSupplyMonitorCompare, getSupplyMonitorSuppliers, getSupplyPaymentPlan, getSupplyPaymentSummary, getSupplyReceiptReconciliation } from '@/api/supply'

export default {
  name: 'SupplyMonitorEnhancement',
  data() {
    return {
      activeTab: 'scorecard',
      loading: false,
      compareLoading: false,
      paymentLoading: false,
      reconciliationLoading: false,
      compareChart: null,
      query: { supplierName: '' },
      localFilters: this.createEmptyLocalFilters(),
      dateRange: [],
      supplierList: [],
      selectedSuppliers: [],
      compareList: [],
      paymentPlan: [],
      paymentSummary: [],
      reconciliationList: [],
      pagination: {
        list: { page: 1, size: 20 },
        payment: { page: 1, size: 20 }
      }
    }
  },
  computed: {
    filteredSupplierList() { return this.supplierList.filter(item => this.matchLocalFilters(item)) },
    pagedSupplierList() { return this.slicePage(this.filteredSupplierList, this.pagination.list) },
    pagedPaymentPlan() { return this.slicePage(this.paymentPlan, this.pagination.payment) },
    warningSuppliers() { return this.supplierList.filter(item => item.warningTag && item.warningTag !== '正常') },
    overduePayAmount() { return this.paymentPlan.filter(item => item.status === '已到期').reduce((sum, item) => sum + Number(item.estimatedPayAmount || 0), 0) }
  },
  created() { this.handleQuery() },
  mounted() { window.addEventListener('resize', this.handleResize) },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.compareChart) this.compareChart.dispose()
  },
  methods: {
    createEmptyLocalFilters() {
      return {
        supplierLevel: '', warningTag: '', minTotalScore: undefined, maxTotalScore: undefined,
        minTermDays: undefined, maxTermDays: undefined, minReceiptAmount: undefined, maxReceiptAmount: undefined,
        minDeliveryRate: undefined, maxDeliveryRate: undefined, minCompletionRate: undefined, maxCompletionRate: undefined
      }
    },
    slicePage(list, pager) { return list.slice((pager.page - 1) * pager.size, (pager.page - 1) * pager.size + pager.size) },
    buildParams() {
      const params = { supplierName: this.query.supplierName }
      if (this.dateRange && this.dateRange.length === 2) { params.startDate = this.dateRange[0]; params.endDate = this.dateRange[1] }
      return params
    },
    async handleQuery() {
      await this.loadSuppliers()
      this.compareList = []
      this.loadPaymentPlan()
      this.loadPaymentSummary()
      this.loadReconciliation()
    },
    resetQuery() { this.query.supplierName = ''; this.dateRange = []; this.resetLocalFilters(false); this.handleQuery() },
    resetLocalFilters(resetPage = true) { this.localFilters = this.createEmptyLocalFilters(); if (resetPage) this.pagination.list.page = 1 },
    async loadSuppliers() {
      this.loading = true
      try { const res = await getSupplyMonitorSuppliers(this.buildParams()); this.supplierList = Array.isArray(res.data) ? res.data : []; this.pagination.list.page = 1 } finally { this.loading = false }
    },
    async loadPaymentPlan() {
      this.paymentLoading = true
      try {
        const res = await getSupplyPaymentPlan(this.buildParams())
        this.paymentPlan = Array.isArray(res.data) ? res.data : []
        this.pagination.payment.page = 1
      } catch (e) {
        this.paymentPlan = []
      } finally { this.paymentLoading = false }
    },
    async loadPaymentSummary() {
      try {
        const res = await getSupplyPaymentSummary(this.buildParams())
        this.paymentSummary = Array.isArray(res.data) ? res.data : []
      } catch (e) {
        this.paymentSummary = []
      }
    },
    async loadReconciliation() {
      this.reconciliationLoading = true
      try {
        const res = await getSupplyReceiptReconciliation(this.buildParams())
        this.reconciliationList = Array.isArray(res.data) ? res.data : []
      } catch (e) {
        this.reconciliationList = []
      } finally { this.reconciliationLoading = false }
    },
    handleTabClick(tab) { if (tab.name === 'compare') this.$nextTick(this.renderCompareChart) },
    async loadCompare() {
      const supplierNames = this.selectedSuppliers.slice(0, 5).map(item => item.supplierName).join(',')
      this.compareLoading = true
      try {
        const res = await getSupplyMonitorCompare({ ...this.buildParams(), supplierNames })
        this.compareList = Array.isArray(res.data) ? res.data : []
        this.activeTab = 'compare'
        this.$nextTick(this.renderCompareChart)
      } finally { this.compareLoading = false }
    },
    handleSelectionChange(selection) { this.selectedSuppliers = selection.slice(0, 5) },
    matchLocalFilters(item) {
      if (this.localFilters.supplierLevel && item.supplierLevel !== this.localFilters.supplierLevel) return false
      if (this.localFilters.warningTag && item.warningTag !== this.localFilters.warningTag) return false
      return this.inRange(item.totalScore, this.localFilters.minTotalScore, this.localFilters.maxTotalScore, 1) &&
        this.inRange(item.termDays, this.localFilters.minTermDays, this.localFilters.maxTermDays, 1) &&
        this.inRange(item.receiptAmount, this.localFilters.minReceiptAmount, this.localFilters.maxReceiptAmount, 1) &&
        this.inRange(item.deliveryRate, this.localFilters.minDeliveryRate, this.localFilters.maxDeliveryRate, 100) &&
        this.inRange(item.completionRate, this.localFilters.minCompletionRate, this.localFilters.maxCompletionRate, 100)
    },
    inRange(value, min, max, multiplier = 1) {
      const number = Number(value || 0) * multiplier
      if (min !== undefined && min !== null && min !== '' && number < Number(min)) return false
      if (max !== undefined && max !== null && max !== '' && number > Number(max)) return false
      return true
    },
    renderCompareChart() {
      const chartEl = this.$refs.compareChart
      if (!chartEl) return
      this.compareChart = echarts.getInstanceByDom(chartEl) || echarts.init(chartEl)
      const names = this.compareList.map(item => item.supplierName)
      const labelOrderAmount = '\u8ba2\u5355\u91d1\u989d'
      const labelReceiptAmount = '\u5165\u5e93\u91d1\u989d'
      const labelDeliveryRate = '\u4ea4\u4ed8\u53ca\u65f6\u7387'
      const labelCompletionRate = '\u5b8c\u6210\u7387'
      const roundedBar = { borderRadius: [10, 10, 0, 0] }
      const barBase = { type: 'bar', barMaxWidth: 46, barGap: '10%', barCategoryGap: '18%', emphasis: { focus: 'series' } }
      const gradient = (top, bottom) => new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: top },
        { offset: 1, color: bottom }
      ])
      this.compareChart.setOption({
        backgroundColor: 'transparent',
        color: ['#3b82f6', '#14b8a6', '#f59e0b', '#ef4444'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow', shadowStyle: { color: 'rgba(72, 92, 138, 0.08)' } },
          backgroundColor: 'rgba(255,255,255,0.96)',
          borderColor: '#dbe5f5',
          borderWidth: 1,
          textStyle: { color: '#25324d' },
          extraCssText: 'box-shadow:0 12px 30px rgba(27,39,71,.12);border-radius:8px;'
        },
        legend: {
          top: 4,
          itemWidth: 18,
          itemHeight: 10,
          icon: 'roundRect',
          textStyle: { color: '#59667f' },
          data: [labelOrderAmount, labelReceiptAmount, labelDeliveryRate, labelCompletionRate]
        },
        grid: { left: 62, right: 48, top: 58, bottom: 58 },
        xAxis: {
          type: 'category',
          data: names,
          axisTick: { show: false },
          axisLine: { lineStyle: { color: '#d7deea' } },
          axisLabel: { color: '#6b7280', interval: 0, rotate: names.length > 3 ? 18 : 0 }
        },
        yAxis: [
          {
            type: 'value',
            name: '\u91d1\u989d',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#eef2f8' } },
            axisLabel: { color: '#6b7280', formatter: value => this.compactMoney(value) }
          },
          {
            type: 'value',
            name: '\u6bd4\u4f8b',
            min: 0,
            max: 100,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { color: '#6b7280', formatter: '{value}%' }
          }
        ],
        series: [
          { ...barBase, name: labelOrderAmount, data: this.compareList.map(item => Number(item.orderAmount || 0)), itemStyle: { ...roundedBar, color: gradient('#60a5fa', '#2563eb') } },
          { ...barBase, name: labelReceiptAmount, data: this.compareList.map(item => Number(item.receiptAmount || 0)), itemStyle: { ...roundedBar, color: gradient('#2dd4bf', '#059669') } },
          { ...barBase, name: labelDeliveryRate, yAxisIndex: 1, data: this.compareList.map(item => Number(item.deliveryRate || 0) * 100), itemStyle: { ...roundedBar, color: gradient('#fbbf24', '#f59e0b') } },
          { ...barBase, name: labelCompletionRate, yAxisIndex: 1, data: this.compareList.map(item => Number(item.completionRate || 0) * 100), itemStyle: { ...roundedBar, color: gradient('#fb7185', '#ef4444') } }
        ]
      }, true)
      this.compareChart.resize()
    },
    handleResize() { if (this.compareChart) this.compareChart.resize() },
    levelCount(level) { return this.supplierList.filter(item => item.supplierLevel === level).length },
    levelTag(level) { return level === 'A' ? 'success' : level === 'B' ? '' : level === 'C' ? 'warning' : 'danger' },
    warningTagType(tag) { return tag === '正常' ? 'success' : (tag === '综合分预警' || tag === '质量预警') ? 'danger' : 'warning' },
    paymentTag(status) { return status === '已到期' ? 'danger' : status === '7天内到期' ? 'warning' : 'success' },
    paySuggestion(status) { return status === '已到期' ? '建议付款' : status === '7天内到期' ? '本期安排' : '暂缓' },
    paySuggestionType(status) { return status === '已到期' ? 'danger' : status === '7天内到期' ? 'warning' : 'info' },
    warningSuggestion(row) {
      if (row.warningTag === '综合分预警') return '复核成本、交付和账期，必要时降低合作优先级。'
      if (row.warningTag === '交付预警') return '跟进延期原因，重点检查计划交货日和实际验收差异。'
      if (row.warningTag === '完成率预警') return '核对未完成数量，必要时拆分补单或调整采购计划。'
      return '保持观察。'
    },
    compactMoney(value) { const number = Number(value || 0); return Math.abs(number) >= 10000 ? `${this.formatNumber(number / 10000)}万` : this.formatNumber(number) },
    formatNumber(value) { return new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 2 }).format(Number(value || 0)) },
    formatMoney(value) { return new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(value || 0)) },
    formatPercent(value) { return `${this.formatNumber(Number(value || 0) * 100)}%` }
  }
}
</script>

<style lang="scss" scoped>
.app-container { padding: 20px; }
.page-header { margin-bottom: 20px; h2 { font-size: 24px; font-weight: 600; color: #303133; margin-bottom: 8px; i { margin-right: 8px; color: #409eff; } } .page-desc { color: #909399; font-size: 14px; margin: 0; } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { padding: 18px 20px; border: 1px solid #e8edf7; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(31, 45, 61, 0.05); span, em { display: block; color: #7b8498; font-size: 12px; font-style: normal; } strong { display: block; margin: 8px 0 6px; color: #101b33; font-size: 26px; line-height: 1; } &.primary { border-top: 3px solid #3b82f6; } &.success { border-top: 3px solid #10b981; } &.warning { border-top: 3px solid #f59e0b; } &.danger { border-top: 3px solid #ef4444; } }
.box-card { margin-bottom: 20px; }
.form-inline { display: flex; align-items: center; flex-wrap: wrap; }
.filter-divider { height: 1px; margin: 6px 0 16px; background: #eef1f7; }
.filter-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #101b33; font-size: 14px; font-weight: 700; em { color: #8a93a6; font-size: 12px; font-style: normal; font-weight: 500; } }
.range-input { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; background: #f6f8ff; span { color: #8a93a6; font-size: 12px; white-space: nowrap; } ::v-deep .el-input-number { width: 74px; line-height: 36px; } ::v-deep .el-input__inner { padding: 0; text-align: center; box-shadow: none; } &.wide ::v-deep .el-input-number { width: 104px; } }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #606266; }
.chart-card { position: relative; margin-bottom: 16px; padding: 20px 22px 18px; border: 1px solid #e7edf7; border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 12px 30px rgba(31, 45, 61, .06); }
.chart-title { margin-bottom: 8px; color: #071a3d; font-size: 16px; font-weight: 700; }
.compare-chart { width: 100%; height: 380px; }
.chart-empty { position: absolute; left: 0; right: 0; top: 154px; z-index: 2; text-align: center; color: #909399; }
.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.summary-item { padding: 12px 14px; border: 1px solid #e8edf7; border-radius: 8px; background: #fbfcff; span, em { display: block; color: #7b8498; font-size: 12px; font-style: normal; } strong { display: block; margin: 5px 0; color: #101b33; font-size: 18px; } }
.pagination-wrap { display: flex; justify-content: flex-end; padding-top: 16px; }
::v-deep .el-card__header { font-weight: bold; }
@media (max-width: 1200px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .metric-grid { grid-template-columns: 1fr; } }
</style>
