<template>
  <div class="home supply-dashboard-page">
    <div class="page-header">
      <div class="page-title">供应商能力综合评分面板</div>
      <div class="page-subtitle">
        实时监控供应商表现，按成本、交付、账期三个维度评估综合能力。
      </div>
    </div>

    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-label">供应商总数</div>
          <div class="stat-badge badge-time">实时</div>
        </div>
        <div class="stat-value">{{ overviewStats.supplierTotal }}</div>
        <div class="stat-trend trend-up">
          <span>数据库统计</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-label">平均综合得分</div>
          <div class="stat-badge badge-time">实时</div>
        </div>
        <div class="stat-value">{{ formatNumber(overviewStats.averageScore, 1) }}</div>
        <div class="stat-trend trend-up">
          <span>成本40% / 交付40% / 账期20%</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-label">预警供应商</div>
          <div class="stat-badge badge-warning">预警</div>
        </div>
        <div class="stat-value">{{ overviewStats.warningSupplierCount }}</div>
        <div class="stat-trend trend-down">
          <span>低于60分</span>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-header">
          <div class="stat-label">优秀供应商</div>
          <div class="stat-badge badge-time">实时</div>
        </div>
        <div class="stat-value">{{ overviewStats.excellentSupplierCount }}</div>
        <div class="stat-trend trend-up">
          <span>85分及以上</span>
        </div>
      </div>
    </div>

    <div class="content-card">
      <div class="card-title">单个产品查询供应商评分</div>
      <div class="search-box">
        <div class="input-wrapper">
          <input
            v-model="inputProductCode"
            type="text"
            class="search-input"
            placeholder="输入产品编码（如:J06A14BS1）"
            @keyup.enter="triggerEvaluation"
          />
        </div>
        <button @click="triggerEvaluation" class="search-btn">预测分析</button>
      </div>

      <div class="chart-container">
        <div v-if="!evaluationData.length" class="chart-placeholder">
          <svg class="chart-lines" viewBox="0 0 800 300" preserveAspectRatio="none">
            <polyline points="50,250 150,180 250,120 350,80 450,90 550,110 650,140 750,200" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="3" />
            <polyline points="50,270 150,220 250,160 350,100 450,95 550,120 650,160 750,220" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-dasharray="5,5" />
            <polyline points="50,280 150,240 250,200 350,140 450,130 550,150 650,180 750,240" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-dasharray="5,5" />
          </svg>
          <div class="chart-empty-state">
            <div>选择产品查看供应商评分趋势</div>
            <div>蓝线：成本得分 / 红线：交付得分 / 绿线：账期得分</div>
          </div>
        </div>

        <div v-else class="score-panel">
          <div class="score-panel-header">
            <div>
              <div class="chart-title-main">供应商三维度评分趋势</div>
              <div class="chart-title-sub">
                <span>产品编码: {{ displayedProductCode }}</span>
                <span>最佳供应商: {{ bestSupplierName }}</span>
              </div>
            </div>
            <div class="score-metrics">
              <div class="score-metric">
                <span>最高综合分</span>
                <strong>{{ formatNumber(bestTotalScore, 2) }}</strong>
              </div>
              <div class="score-metric soft">
                <span>供应商数</span>
                <strong>{{ chartSuppliers.length }}</strong>
              </div>
            </div>
          </div>

          <div class="score-panel-body">
            <div class="score-plot">
              <div class="chart-legend">
                <span><i class="legend-dot cost"></i>成本均分 {{ formatNumber(avgScore('costScore'), 1) }}</span>
                <span><i class="legend-dot delivery"></i>交付均分 {{ formatNumber(avgScore('deliveryScore'), 1) }}</span>
                <span><i class="legend-dot term"></i>账期均分 {{ formatNumber(avgScore('termScore'), 1) }}</span>
              </div>
              <svg class="score-chart" viewBox="0 0 920 320" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="costStroke" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="#6366f1" />
                    <stop offset="100%" stop-color="#8b5cf6" />
                  </linearGradient>
                  <linearGradient id="deliveryStroke" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="#14b8a6" />
                    <stop offset="100%" stop-color="#22c55e" />
                  </linearGradient>
                  <linearGradient id="termStroke" x1="0" x2="1" y1="0" y2="0">
                    <stop offset="0%" stop-color="#f59e0b" />
                    <stop offset="100%" stop-color="#f97316" />
                  </linearGradient>
                  <linearGradient id="costArea" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stop-color="#6366f1" stop-opacity="0.14" />
                    <stop offset="100%" stop-color="#6366f1" stop-opacity="0" />
                  </linearGradient>
                </defs>
                <line v-for="tick in chartTicks" :key="tick" x1="56" x2="884" :y1="chartY(tick)" :y2="chartY(tick)" class="grid-line" />
                <text v-for="tick in chartTicks" :key="`label-${tick}`" x="20" :y="chartY(tick) + 4" class="axis-label">{{ tick }}</text>
                <polygon :points="areaPoints('costScore')" class="score-area" />
                <polyline :points="polylinePoints('costScore')" class="score-line cost-line" />
                <polyline :points="polylinePoints('deliveryScore')" class="score-line delivery-line" />
                <polyline :points="polylinePoints('termScore')" class="score-line term-line" />
              </svg>

              <div class="chart-labels">
                <span v-for="(supplier, index) in chartSuppliers" :key="supplier.supplierCode || index">
                  <i>{{ index + 1 }}</i>
                  {{ shortSupplierName(supplier.supplierName, index) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="info-grid">
        <div class="info-box">
          <div class="info-label">评估结果</div>
          <div class="info-value" style="color: #52c41a">{{ evaluationData.length ? '已加载' : '待查询' }}</div>
          <div class="info-detail">
            供应商数量: {{ evaluationData.length }}家<br />
            产品编码: {{ displayedProductCode || '-' }}<br />
            <span style="color: #1890ff">最佳供应商: {{ bestSupplierName }}</span>
          </div>
        </div>

        <div class="info-box">
          <div class="info-label">数据来源</div>
          <div class="info-value">MySQL</div>
          <div class="info-detail">
            采购入库、到货匹配、供应商账期<br />
            实时读取数据库统计
          </div>
        </div>

        <div class="info-box">
          <div class="info-label">维度评分范围</div>
          <div class="info-value">0-100分</div>
          <div class="info-detail">
            成本: 价格排名<br />
            交付: 准时率与数量满足率<br />
            账期: 结算期限天数
          </div>
        </div>

        <div class="info-box">
          <div class="info-label">综合评级分布</div>
          <div class="info-value">优秀: {{ overviewStats.excellentSupplierCount }}家</div>
          <div class="info-detail">
            A级(≥85分): {{ overviewStats.excellentSupplierCount }}家<br />
            预警(&lt;60分): {{ overviewStats.warningSupplierCount }}家
          </div>
        </div>
      </div>
    </div>

    <div class="content-card">
      <div class="card-title">评估维度权重配置</div>
      <div style="margin-bottom: 20px; color: #666; font-size: 14px">
        当前配置：成本 40% | 交付 40% | 账期 20%
      </div>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px">
        <div class="info-box">
          <div class="info-label">成本维度</div>
          <div class="info-value" style="color: #5b6cff">40%</div>
          <div class="info-detail">按同一产品下供应商参考价排名评分</div>
        </div>
        <div class="info-box">
          <div class="info-label">交付维度</div>
          <div class="info-value" style="color: #52c41a">40%</div>
          <div class="info-detail">准时率与数量满足率综合评分</div>
        </div>
        <div class="info-box">
          <div class="info-label">账期维度</div>
          <div class="info-value" style="color: #ff9800">20%</div>
          <div class="info-detail">账期越长得分越高</div>
        </div>
      </div>
    </div>

    <div class="content-card">
      <div class="card-title">评估数据统计</div>
      <table class="supplier-table">
        <thead>
          <tr>
            <th>维度</th>
            <th>数据来源</th>
            <th>评估指标</th>
            <th>数据记录数</th>
            <th>数据完整度</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>成本维度</strong></td>
            <td>dtm_supply_purchase_receipt</td>
            <td>供应商参考价排名</td>
            <td>数据库实时统计</td>
            <td><div class="progress-bar"><div class="progress-fill" style="width: 98.5%"></div></div><span style="font-size: 12px; color: #666">98.5%</span></td>
            <td><span style="color: #52c41a">正常</span></td>
          </tr>
          <tr>
            <td><strong>交付维度</strong></td>
            <td>dtm_supply_order_receipt_match</td>
            <td>准时率、数量满足率</td>
            <td>数据库实时统计</td>
            <td><div class="progress-bar"><div class="progress-fill" style="width: 99.2%"></div></div><span style="font-size: 12px; color: #666">99.2%</span></td>
            <td><span style="color: #52c41a">正常</span></td>
          </tr>
          <tr>
            <td><strong>账期维度</strong></td>
            <td>dtm_supply_supplier_term</td>
            <td>结算期限天数</td>
            <td>数据库实时统计</td>
            <td><div class="progress-bar"><div class="progress-fill" style="width: 100%"></div></div><span style="font-size: 12px; color: #666">100%</span></td>
            <td><span style="color: #52c41a">正常</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="content-card">
      <div class="card-title">
        Top 5 供应商综合排名
        <span style="font-size: 12px; color: #999; font-weight: normal; margin-left: 10px">
          基于产品代码: {{ displayedProductCode || 'J06A14BS1' }}
        </span>
      </div>

      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else>
        <table class="supplier-table">
          <thead>
            <tr>
              <th>综合排名</th>
              <th>供应商名称</th>
              <th>供应商代码</th>
              <th>综合得分</th>
              <th>维度得分</th>
              <th>参考价</th>
              <th>成本排名</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(supplier, index) in evaluationData" :key="supplier.supplierCode || index">
              <td><span :class="['rank-badge', getRankClass(index + 1)]">{{ index + 1 }}</span></td>
              <td><strong>{{ supplier.supplierName || '-' }}</strong></td>
              <td>{{ supplier.supplierCode || 'N/A' }}</td>
              <td>
                <strong style="font-size: 18px; color: #52c41a">{{ formatNumber(supplier.totalScore, 2) }}</strong>
                <div class="progress-bar"><div class="progress-fill" :style="{ width: `${supplier.totalScore || 0}%` }"></div></div>
              </td>
              <td>
                <div class="dimension-scores">
                  <span class="dim-score">成本:{{ formatNumber(supplier.costScore, 0) }}</span>
                  <span class="dim-score">交付:{{ formatNumber(supplier.deliveryScore, 0) }}</span>
                  <span class="dim-score">账期:{{ formatNumber(supplier.termScore, 0) }}</span>
                </div>
              </td>
              <td>{{ formatNumber(supplier.referencePrice, 2) }}</td>
              <td>第{{ supplier.costRank || '-' }}名</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { evaluateSupplier, getSupplyOverviewStats } from "@/api/supply";

export default {
  name: "SupplyOverallEvaluation",
  data() {
    return {
      inputProductCode: "",
      displayedProductCode: "",
      evaluationData: [],
      loading: false,
      error: "",
      overviewStats: {
        supplierTotal: 0,
        averageScore: 0,
        warningSupplierCount: 0,
        excellentSupplierCount: 0,
      },
    };
  },
  computed: {
    bestSupplierName() {
      return this.evaluationData.length ? this.evaluationData[0].supplierName : "-";
    },
    bestTotalScore() {
      return this.evaluationData.reduce((best, item) => Math.max(best, Number(item.totalScore || 0)), 0);
    },
    chartSuppliers() {
      return this.evaluationData.slice(0, 5);
    },
    chartTicks() {
      return [0, 25, 50, 75, 100];
    },
  },
  created() {
    this.fetchOverviewStats();
    if (this.$route.query.productCode) {
      this.inputProductCode = this.$route.query.productCode;
      this.fetchEvaluationData(this.inputProductCode);
    }
  },
  methods: {
    async fetchOverviewStats() {
      try {
        const response = await getSupplyOverviewStats();
        this.overviewStats = response && response.data ? response.data : response;
      } catch (err) {
        console.error("获取供应概览统计失败:", err);
      }
    },
    triggerEvaluation() {
      if (this.inputProductCode) {
        this.fetchEvaluationData(this.inputProductCode);
      }
    },
    async fetchEvaluationData(code) {
      this.loading = true;
      this.error = "";
      this.displayedProductCode = code;
      try {
        const response = await evaluateSupplier(code);
        this.evaluationData = Array.isArray(response) ? response : (response && response.data ? response.data : []);
        this.$modal.msgSuccess("评估完成");
      } catch (err) {
        console.error("获取评估数据失败:", err);
        this.error = err.message || "获取评估数据失败";
        this.$modal.msgError(this.error);
      } finally {
        this.loading = false;
      }
    },
    formatNumber(value, digits) {
      const number = parseFloat(value);
      return Number.isFinite(number) ? number.toFixed(digits) : "0";
    },
    getRankClass(rank) {
      if (rank === 1) return "rank-1";
      if (rank === 2) return "rank-2";
      if (rank === 3) return "rank-3";
      return "rank-other";
    },
    chartX(index) {
      const count = Math.max(this.chartSuppliers.length - 1, 1);
      return 56 + (828 / count) * index;
    },
    chartY(value) {
      const score = Math.max(0, Math.min(100, Number(value || 0)));
      return 250 - score * 2;
    },
    polylinePoints(field) {
      return this.chartSuppliers
        .map((supplier, index) => `${this.chartX(index)},${this.chartY(supplier[field])}`)
        .join(" ");
    },
    areaPoints(field) {
      if (!this.chartSuppliers.length) return "";
      const line = this.polylinePoints(field);
      const firstX = this.chartX(0);
      const lastX = this.chartX(this.chartSuppliers.length - 1);
      return `${firstX},250 ${line} ${lastX},250`;
    },
    avgScore(field) {
      if (!this.chartSuppliers.length) return 0;
      const total = this.chartSuppliers.reduce((sum, item) => sum + Number(item[field] || 0), 0);
      return total / this.chartSuppliers.length;
    },
    shortSupplierName(name, index) {
      if (!name) return `供应商${index + 1}`;
      return name.length > 8 ? `${name.slice(0, 8)}...` : name;
    },
  },
};
</script>
<style scoped>
.page-header {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  color: #666;
  font-size: 15px;
  font-weight: 400;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(102, 126, 234, 0.1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.stat-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.stat-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-time {
  background: linear-gradient(135deg, #e6f0ff 0%, #d6e5ff 100%);
  color: #667eea;
}

.badge-warning {
  background: linear-gradient(135deg, #fff7e6 0%, #ffe6cc 100%);
  color: #ff9800;
}

.stat-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #2c3e50;
  line-height: 1.2;
}

.stat-trend {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}

.content-card {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  border: 1px solid rgba(102, 126, 234, 0.1);
  transition: all 0.3s;
}

.content-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2c3e50;
}

.search-box {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.input-wrapper {
  flex: 1;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e8ecf1;
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  transition: all 0.3s;
  background: #fafbfc;
  font-weight: 500;
}

.search-input:focus {
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.search-btn {
  padding: 16px 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  white-space: nowrap;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.search-btn:active {
  transform: translateY(0);
}

.chart-container {
  margin-bottom: 32px;
}

.chart-placeholder {
  width: 100%;
  height: 320px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.chart-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

.score-panel {
  min-height: 372px;
  padding: 20px;
  border: 1px solid rgba(98, 103, 242, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 4%, rgba(99, 102, 241, 0.12), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 18px 42px rgba(42, 61, 115, 0.08);
  animation: panelRiseIn 0.36s ease both;
}

.score-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 2px 4px 0;
}

.chart-title-main {
  color: #101b33;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.chart-title-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: #8a93a6;
  font-size: 12px;
}

.chart-title-sub span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f6f8ff;
  box-shadow: inset 0 0 0 1px rgba(98, 103, 242, 0.08);
}

.score-metrics {
  display: flex;
  gap: 10px;
}

.score-metric {
  min-width: 108px;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8f7ff 0%, #f0f2ff 100%);
  color: #7b8498;
  text-align: right;
  box-shadow: inset 0 0 0 1px rgba(98, 103, 242, 0.1);
}

.score-metric.soft {
  background: linear-gradient(180deg, #f8fcff 0%, #eff8ff 100%);
}

.score-metric span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
}

.score-metric strong {
  color: #101b33;
  font-size: 22px;
  line-height: 1;
}

.score-panel-body {
  position: relative;
  padding: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow:
    inset 0 0 0 1px #edf0fb,
    0 12px 26px rgba(42, 61, 115, 0.05);
  overflow: hidden;
}

.chart-legend {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: #5d667a;
  font-size: 12px;
  font-weight: 700;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(98, 103, 242, 0.08),
    0 8px 18px rgba(42, 61, 115, 0.06);
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6366f1;
}

.legend-dot.delivery {
  background: #14b8a6;
}

.legend-dot.term {
  background: #f59e0b;
}

.score-plot {
  position: relative;
  height: 284px;
  padding: 42px 18px 34px;
}

.score-chart {
  width: 100%;
  height: 226px;
  display: block;
}

.grid-line {
  stroke: rgba(105, 114, 135, 0.12);
  stroke-width: 1;
}

.axis-label {
  fill: #98a1b4;
  font-size: 12px;
  font-weight: 600;
}

.score-area {
  fill: url(#costArea);
  opacity: 0;
  animation: chartFadeIn 0.7s ease 0.2s forwards;
}

.score-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: none;
  animation: drawScoreLine 1.15s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.cost-line {
  stroke: url(#costStroke);
}

.delivery-line {
  stroke: url(#deliveryStroke);
  animation-delay: 0.12s;
}

.term-line {
  stroke: url(#termStroke);
  animation-delay: 0.24s;
}

.chart-labels {
  position: absolute;
  left: 74px;
  right: 42px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #7b8498;
  font-size: 12px;
  font-weight: 600;
}

.chart-labels span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 150px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px #edf0fb,
    0 6px 14px rgba(42, 61, 115, 0.05);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-labels i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #f1efff;
  color: #6267f2;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.chart-empty-state {
  position: relative;
  z-index: 1;
  text-align: center;
}

.chart-empty-state div:first-child {
  margin-bottom: 5px;
  font-size: 14px;
  opacity: 0.85;
}

.chart-empty-state div:last-child {
  font-size: 12px;
  opacity: 0.65;
}

@keyframes drawScoreLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chartFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes panelRiseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-box {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e8ecf1;
  transition: all 0.3s;
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.info-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #2c3e50;
}

.info-detail {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}

.supplier-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.supplier-table th {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  padding: 16px;
  text-align: left;
  font-size: 13px;
  color: #666;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e8ecf1;
}

.supplier-table td {
  padding: 18px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  background: white;
}

.supplier-table tr:last-child td {
  border-bottom: none;
}

.supplier-table tr:hover td {
  background: #f8f9ff;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.rank-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b6914;
}
.rank-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  color: #666;
}
.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #e6a052 100%);
  color: white;
}
.rank-other {
  background: #f0f0f0;
  color: #666;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #52c41a 0%, #95de64 100%);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
}

.dimension-scores {
  display: flex;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.dim-score {
  padding: 6px 12px;
  background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
  border-radius: 8px;
  font-weight: 600;
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.loading,
.error {
  font-size: 16px;
  margin: 3rem 0;
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.loading {
  color: #667eea;
}

.error {
  color: #ff4d4f;
  background: #fff5f5;
  border: 1px solid #ffccc7;
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .search-box {
    flex-direction: column;
  }

  .search-btn {
    width: 100%;
  }
}
</style>






