<template>
  <div class="page-container">
    <PageTitle title="商品采购明细" />

    <StatCards :data="statData" />

    <!-- 采购效率分析 -->
    <div class="analysis-section">
      <div class="section-title">采购效率分析</div>
      <div class="analysis-cards">
        <div class="analysis-card" v-for="(item, index) in efficiencyData" :key="index">
          <div class="card-label">{{ item.label }}</div>
          <div class="card-content">
            <span class="card-value">{{ item.value }}</span>
            <div class="mini-chart" :ref="(el) => setChartRef(el, index)"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 售后服务分析 -->
    <div class="analysis-section">
      <div class="section-title">售后服务分析</div>
      <div class="analysis-cards">
        <div class="analysis-card" v-for="(item, index) in afterSaleData" :key="index">
          <div class="card-label">{{ item.label }}</div>
          <div class="card-content">
            <span class="card-value">{{ item.value }}</span>
            <div class="mini-chart" :ref="(el) => setChartRef(el, index + 3)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { PageTitle, StatCards } from '@/components';

const chartRefs = ref<(HTMLElement | null)[]>([]);

const setChartRef = (el: any, index: number) => {
  if (el) chartRefs.value[index] = el as HTMLElement;
};

const statData = [
  { value: '12', label: '购买数量(件)' },
  { value: '3', label: '商品数量(件)' },
  { value: '45', label: '品牌数量(件)' },
  { value: '78', label: '三类品类数量(件)' }
];

const efficiencyData = [
  { label: '订单平均确认时间(小时)', value: '0.50', data: [30, 40, 35, 50, 45, 60, 55, 70, 65, 80], color: '#e60012', type: 'line' },
  { label: '商品平均出库时间(小时)', value: '7', data: [3, 5, 4, 6, 5, 7, 6, 8, 7, 9, 8, 7], color: '#3498db', type: 'bar' },
  { label: '商品平均妥投时间(小时)', value: '16.5', data: [40, 50, 45, 60, 55, 70, 65, 80, 75, 90], color: '#f4c542', type: 'line' }
];

const afterSaleData = [
  { label: '售后商品数量(件)', value: '23', data: [20, 30, 25, 40, 35, 50, 45, 60, 55, 70], color: '#e60012', type: 'line' },
  { label: '平均完成时效(天)', value: '7', data: [2, 4, 3, 5, 4, 6, 5, 7, 6, 8, 7, 6], color: '#3498db', type: 'bar' },
  { label: '售后商品占比', value: '16.5%', data: [10, 15, 12, 18, 14, 20, 16, 22, 18, 25], color: '#f4c542', type: 'line' }
];

onMounted(() => {
  const allData = [...efficiencyData, ...afterSaleData];
  allData.forEach((item, index) => {
    const el = chartRefs.value[index];
    if (!el) return;
    const chart = echarts.init(el);
    if (item.type === 'line') {
      chart.setOption({
        grid: { left: 0, right: 0, top: 5, bottom: 5 },
        xAxis: { type: 'category', show: false, data: item.data.map((_, i) => i) },
        yAxis: { type: 'value', show: false },
        series: [
          {
            type: 'line',
            data: item.data,
            lineStyle: { color: item.color, width: 2 },
            itemStyle: { color: item.color },
            symbol: 'none',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: item.color + '40' },
                { offset: 1, color: item.color + '10' }
              ])
            }
          }
        ]
      });
    } else {
      chart.setOption({
        grid: { left: 0, right: 0, top: 5, bottom: 5 },
        xAxis: { type: 'category', show: false, data: item.data.map((_, i) => i) },
        yAxis: { type: 'value', show: false },
        series: [{ type: 'bar', data: item.data, itemStyle: { color: item.color }, barWidth: 4 }]
      });
    }
  });
});
</script>

<style scoped lang="scss">
.analysis-section {
  margin-bottom: 24px;

  .section-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
  }

  .analysis-cards {
    display: flex;
    gap: 20px;

    .analysis-card {
      flex: 1;
      padding: 16px;
      border: 1px solid #eee;
      border-radius: 4px;

      .card-label {
        font-size: 12px;
        color: #999;
        margin-bottom: 12px;
      }
      .card-content {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .card-value {
          font-size: 32px;
          font-weight: bold;
          color: #333;
        }
        .mini-chart {
          width: 120px;
          height: 50px;
        }
      }
    }
  }
}
</style>
