<template>
  <div class="app-container qa-demo-page">
    <section class="hero-panel">
      <div>
        <p class="eyebrow">供应监测评分卡扩展方案</p>
        <h1>QA 合格率质量评分演示</h1>
        <p class="summary">
          基于《2026年每日QA登记表》的抽检、不合格和大批次品数据，为供应商评分卡增加质量维度。
          当前页面为静态演示，不依赖后端和数据库。
        </p>
      </div>
      <div class="hero-score">
        <span>新综合分</span>
        <strong>成本30% + 交付30% + 账期15% + 质量25%</strong>
      </div>
    </section>

    <section class="metric-grid">
      <div class="metric-card blue">
        <span>QA覆盖月份</span>
        <strong>1-5月</strong>
        <em>按全部 Sheet 汇总</em>
      </div>
      <div class="metric-card green">
        <span>质量指标</span>
        <strong>QA合格率</strong>
        <em>由抽检数和不合格数推算</em>
      </div>
      <div class="metric-card violet">
        <span>预警阈值</span>
        <strong>&lt; 95%</strong>
        <em>触发质量预警</em>
      </div>
      <div class="metric-card orange">
        <span>无QA数据</span>
        <strong>80分</strong>
        <em>中性分，不直接扣为0</em>
      </div>
    </section>

    <section class="content-grid">
      <el-card class="box-card logic-card">
        <div slot="header" class="section-title">
          <i class="el-icon-s-operation"></i>
          <span>计算逻辑</span>
        </div>
        <div class="formula-stack">
          <div>抽检总数 = SUM(抽检/个数)</div>
          <div>不合格总数 = SUM(不合格/个 + 大批次品)</div>
          <div>QA合格率 = (抽检总数 - 不合格总数) / 抽检总数</div>
          <div>质量分 = QA合格率 × 100</div>
        </div>
      </el-card>

      <el-card class="box-card flow-card">
        <div slot="header" class="section-title">
          <i class="el-icon-connection"></i>
          <span>数据流</span>
        </div>
        <div class="flow-line">
          <span>QA Excel</span>
          <i class="el-icon-right"></i>
          <span>按月读取</span>
          <i class="el-icon-right"></i>
          <span>供应商汇总</span>
          <i class="el-icon-right"></i>
          <span>评分卡</span>
        </div>
        <p class="muted">
          供应商名称采用宽松匹配，例如系统供应商全称包含“顾舒家华”，即可关联 QA 表中的简称。
        </p>
      </el-card>
    </section>

    <el-card class="box-card">
      <div slot="header" class="section-title">
        <i class="el-icon-s-data"></i>
        <span>评分卡演示数据</span>
      </div>
      <el-table :data="demoRows" 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="100" 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.qualityScore) }}</template>
        </el-table-column>
        <el-table-column label="QA合格率" width="110" align="right">
          <template slot-scope="scope">{{ scope.row.qaPassRate === null ? '暂无' : formatPercent(scope.row.qaPassRate) }}</template>
        </el-table-column>
        <el-table-column prop="qaSampleQty" label="抽检数" width="100" align="right" />
        <el-table-column prop="qaDefectQty" label="不合格数" width="100" align="right" />
        <el-table-column label="成本分" width="90" align="right">
          <template slot-scope="scope">{{ formatNumber(scope.row.costScore) }}</template>
        </el-table-column>
        <el-table-column label="交付分" width="90" align="right">
          <template slot-scope="scope">{{ formatNumber(scope.row.deliveryScore) }}</template>
        </el-table-column>
        <el-table-column label="账期分" width="90" align="right">
          <template slot-scope="scope">{{ formatNumber(scope.row.termScore) }}</template>
        </el-table-column>
        <el-table-column 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>
    </el-card>

    <section class="content-grid bottom-grid">
      <el-card class="box-card">
        <div slot="header" class="section-title">
          <i class="el-icon-warning-outline"></i>
          <span>预警规则</span>
        </div>
        <ul class="rule-list">
          <li>QA抽检数大于 0，且 QA合格率低于 95%，标记为质量预警。</li>
          <li>无 QA 数据时显示“暂无”，质量分按 80 分处理。</li>
          <li>质量预警优先级高于交付预警和完成率预警。</li>
        </ul>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="section-title">
          <i class="el-icon-document-checked"></i>
          <span>业务说明</span>
        </div>
        <p class="muted large">
          新增质量维度后，供应商不会只因为价格低或交付快而获得高分。
          如果 QA 不合格率高，综合分会被拉低，并在评分卡中直接暴露质量风险。
        </p>
      </el-card>
    </section>
  </div>
</template>

<script>
export default {
  name: 'SupplyQaScoreDemo',
  data() {
    return {
      demoRows: [
        this.createRow('德清顾舒家华高分子材料有限公司', 82, 76, 100, 102, 98, 450, 9),
        this.createRow('浙江华睿海绵制品有限公司', 88, 81, 90, 260, 93, 520, 36),
        this.createRow('广州金凯迪家居用品有限公司', 100, 72, 60, null, 80, 0, 0),
        this.createRow('湖州高裕家居科技有限公司', 90, 58, 90, 96, 94, 320, 19)
      ]
    }
  },
  methods: {
    createRow(supplierName, costScore, deliveryScore, termScore, qaPassRate, qualityScore, qaSampleQty, qaDefectQty) {
      const totalScore = costScore * 0.3 + deliveryScore * 0.3 + termScore * 0.15 + qualityScore * 0.25
      return {
        supplierName,
        costScore,
        deliveryScore,
        termScore,
        qaPassRate: qaPassRate === null ? null : qaPassRate / 100,
        qualityScore,
        qaSampleQty,
        qaDefectQty,
        totalScore,
        warningTag: qaPassRate !== null && qaPassRate < 95 ? '质量预警' : totalScore < 60 ? '综合分预警' : '正常'
      }
    },
    formatNumber(value, digits = 2) {
      const number = Number(value)
      return Number.isFinite(number) ? number.toFixed(digits) : '0.00'
    },
    formatPercent(value) {
      return `${this.formatNumber(Number(value || 0) * 100)}%`
    },
    warningTagType(tag) {
      if (tag === '正常') return 'success'
      if (tag === '质量预警' || tag === '综合分预警') return 'danger'
      return 'warning'
    }
  }
}
</script>

<style lang="scss" scoped>
.qa-demo-page {
  padding: 20px;
  background: #eef3f9;
  min-height: calc(100vh - 84px);
  color: #17233d;
}

.hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff 0%, #e8f0ff 100%);
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(30, 64, 175, 0.08);

  h1 {
    margin: 6px 0 10px;
    font-size: 30px;
    color: #071735;
  }

  .summary {
    margin: 0;
    color: #52627a;
    max-width: 760px;
    line-height: 1.8;
  }
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  color: #4f63ff;
  font-weight: 700;
}

.hero-score {
  min-width: 300px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe6ff;

  span {
    display: block;
    color: #64748b;
    margin-bottom: 8px;
  }

  strong {
    color: #1d4ed8;
    font-size: 18px;
    line-height: 1.5;
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  border-top: 4px solid #2563eb;

  span,
  em {
    display: block;
    color: #64748b;
    font-style: normal;
  }

  strong {
    display: block;
    margin: 8px 0;
    font-size: 24px;
    color: #0f172a;
  }

  &.green { border-top-color: #10b981; }
  &.violet { border-top-color: #7c3aed; }
  &.orange { border-top-color: #f59e0b; }
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.box-card {
  border-radius: 14px;
  border: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0f172a;
}

.formula-stack {
  display: grid;
  gap: 10px;

  div {
    padding: 12px 14px;
    border-radius: 8px;
    background: #f6f9ff;
    color: #1d4ed8;
    font-weight: 700;
  }
}

.flow-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;

  span {
    padding: 10px 14px;
    border-radius: 8px;
    background: #eef6ff;
    color: #1f4e79;
    font-weight: 700;
  }
}

.muted {
  margin: 0;
  color: #64748b;
  line-height: 1.8;
}

.large {
  font-size: 15px;
}

.bottom-grid {
  margin-top: 18px;
}

.rule-list {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 2;
}

::v-deep .el-card__header {
  background: #fbfdff;
  border-bottom: 1px solid #eef2f7;
}

@media (max-width: 1100px) {
  .hero-panel,
  .content-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>
