<template>
  <div class="page-container">
    <PageTitle title="订单交易分析" />
    
    <StatCards :data="statData" />

    <!-- 采购金额趋势 -->
    <div class="chart-section">
      <div class="chart-header">
        <span class="chart-title">采购金额趋势</span>
        <div class="chart-filter">
          <span :class="{ active: trendType === 'month' }" @click="trendType = 'month'">筛选</span>
          <span :class="{ active: trendType === 'month' }">月度</span>
        </div>
      </div>
      <div class="chart-container" ref="trendChartRef"></div>
    </div>

    <!-- 下方两个图表 -->
    <div class="chart-row">
      <div class="chart-section half">
        <div class="chart-header">
          <span class="chart-title">采购品类占比</span>
          <div class="chart-filter">
            <span :class="{ active: categoryType === 'month' }" @click="categoryType = 'month'">本月</span>
            <span :class="{ active: categoryType === 'year' }" @click="categoryType = 'year'">本年</span>
          </div>
        </div>
        <div class="chart-content-row">
          <div class="chart-container pie" ref="pieChartRef"></div>
          <div class="category-stats">
            <div class="category-item" v-for="item in categoryData" :key="item.name">
              <span class="category-name">{{ item.name }}</span>
              <span class="category-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-section half">
        <div class="chart-header">
          <span class="chart-title">采购商品日变化图</span>
          <div class="chart-filter">
            <span>筛选</span>
            <span>月度</span>
          </div>
          <div class="chart-legend">
            <span class="legend-item"><i class="dot yellow"></i>购买金额</span>
            <span class="legend-item"><i class="dot blue"></i>购买数量</span>
          </div>
        </div>
        <div class="chart-container" ref="dailyChartRef"></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 trendType = ref('month')
const categoryType = ref('month')

const trendChartRef = ref<HTMLElement>()
const pieChartRef = ref<HTMLElement>()
const dailyChartRef = ref<HTMLElement>()

const statData = [
  { value: '10,239.00', label: '购买金额(元)' },
  { value: '3', label: '购买数量(件)' },
  { value: '45', label: '订单量(单)' },
  { value: '78', label: '客单价(元/单)' }
]

const categoryData = [
  { name: '品类01', value: 600 },
  { name: '品类02', value: 200 },
  { name: '品类03', value: 200 }
]

onMounted(() => {
  initTrendChart()
  initPieChart()
  initDailyChart()
})

const initTrendChart = () => {
  if (!trendChartRef.value) return
  const chart = echarts.init(trendChartRef.value)
  chart.setOption({
    grid: { left: 60, right: 20, top: 30, bottom: 30 },
    xAxis: {
      type: 'category',
      data: ['2025/01', '2025/02', '2025/03', '2025/04', '2025/05', '2025/06', '2025/07', '2025/08', '2025/09', '2025/10', '2025/11', '2025/12'],
      axisLine: { lineStyle: { color: '#eee' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value', name: '销量(万元)', nameTextStyle: { color: '#999' },
      axisLine: { show: false }, splitLine: { lineStyle: { color: '#eee' } }, axisLabel: { color: '#999' }
    },
    series: [{ type: 'line', data: [300, 980, 450, 600, 400, 550, 900, 700, 650, 800, 500, 750], lineStyle: { color: '#e60012', width: 2 }, itemStyle: { color: '#e60012' }, symbol: 'circle', symbolSize: 6 }],
    tooltip: { trigger: 'axis', formatter: (params: any) => `${params[0].name}<br/>¥${params[0].value.toFixed(2)}` }
  })
}

const initPieChart = () => {
  if (!pieChartRef.value) return
  const chart = echarts.init(pieChartRef.value)
  chart.setOption({
    series: [{
      type: 'pie', radius: ['40%', '70%'], center: ['50%', '50%'],
      data: [
        { value: 600, name: '品类01', itemStyle: { color: '#f4c542' } },
        { value: 200, name: '品类02', itemStyle: { color: '#3498db' } },
        { value: 200, name: '品类03', itemStyle: { color: '#1abc9c' } }
      ],
      label: { formatter: '{b} {d}%', color: '#666' }
    }],
    tooltip: { formatter: '{b}: {c} ({d}%)' }
  })
}

const initDailyChart = () => {
  if (!dailyChartRef.value) return
  const chart = echarts.init(dailyChartRef.value)
  chart.setOption({
    grid: { left: 60, right: 20, top: 40, bottom: 30 },
    xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], axisLine: { lineStyle: { color: '#eee' } }, axisLabel: { color: '#999' } },
    yAxis: { type: 'value', name: '销量(万元)', nameTextStyle: { color: '#999' }, axisLine: { show: false }, splitLine: { lineStyle: { color: '#eee' } }, axisLabel: { color: '#999' } },
    series: [
      { name: '购买金额', type: 'line', data: [400, 500, 350, 600, 450, 640, 500, 550, 400, 600, 450, 500], lineStyle: { color: '#f4c542', width: 2 }, itemStyle: { color: '#f4c542' }, symbol: 'circle', symbolSize: 6 },
      { name: '购买数量', type: 'line', data: [300, 400, 250, 500, 350, 332, 400, 450, 300, 500, 350, 400], lineStyle: { color: '#3498db', width: 2 }, itemStyle: { color: '#3498db' }, symbol: 'circle', symbolSize: 6 }
    ],
    tooltip: { trigger: 'axis' }
  })
}
</script>

<style scoped lang="scss">
.chart-section {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  
  &.half { flex: 1; margin-bottom: 0; }
  
  .chart-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    
    .chart-title { font-size: 14px; font-weight: 500; color: #333; }
    .chart-filter {
      display: flex;
      gap: 12px;
      span { font-size: 12px; color: #999; cursor: pointer; &.active { color: #333; } }
    }
    .chart-legend {
      margin-left: auto;
      display: flex;
      gap: 16px;
      .legend-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: #666;
        .dot { width: 8px; height: 8px; border-radius: 50%; &.yellow { background: #f4c542; } &.blue { background: #3498db; } }
      }
    }
  }
  
  .chart-container { height: 280px; &.pie { height: 200px; width: 200px; } }
  
  .chart-content-row {
    display: flex;
    align-items: center;
    .category-stats {
      flex: 1;
      display: flex;
      gap: 40px;
      padding-left: 20px;
      .category-item {
        text-align: center;
        .category-name { display: block; font-size: 12px; color: #999; margin-bottom: 8px; }
        .category-value { font-size: 20px; font-weight: bold; color: #333; }
      }
    }
  }
}

.chart-row { display: flex; gap: 20px; }
</style>
