<template>
  <div class="trade-container">
    <h1>交易统计</h1>
    <div v-if="loading" class="loading-indicator">
      <div class="loading-spinner"></div>
      数据加载中...
    </div>
    <div v-if="error" class="error-message">数据加载失败，请稍后重试。</div>
    <div v-if="!loading && !error" class="trade-content">
      <!-- 牛只交易量统计 -->
      <div class="volume-section card">
        <div class="card-header">
          <h3 class="card-title">牛只交易量统计</h3>
        </div>
        <div class="card-body">
          <div class="volume-content">
            <div class="volume-cards">
              <div class="volume-card card" v-for="(item, index) in volumeData" :key="index">
                <div class="card-body">
                  <div class="card-title">{{ item.title }}</div>
                  <div class="card-value">{{ item.value }}</div>
                  <div class="card-change" :class="item.change > 0 ? 'positive' : 'negative'">
                    {{ item.change > 0 ? '↑' : '↓' }} {{ Math.abs(item.change) }}%
                  </div>
                </div>
              </div>
            </div>
            <div class="volume-chart">
              <div ref="volumeChart" class="chart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 价格趋势和区域分布 -->
      <div class="price-section card">
        <div class="card-header">
          <h3 class="card-title">价格趋势和区域分布</h3>
        </div>
        <div class="card-body">
          <div class="price-content">
            <div class="trend-chart card">
              <div class="card-header">
                <h4 class="card-title">价格趋势</h4>
              </div>
              <div class="card-body">
                <div ref="trendChart" class="chart-placeholder"></div>
              </div>
            </div>
            <div class="distribution-chart card">
              <div class="card-header">
                <h4 class="card-title">区域价格分布</h4>
              </div>
              <div class="card-body">
                <div ref="distributionChart" class="chart-placeholder"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 交易类型分析 -->
      <div class="type-section card">
        <div class="card-header">
          <h3 class="card-title">交易类型分析</h3>
        </div>
        <div class="card-body">
          <div class="type-content">
            <div class="type-chart">
              <div ref="typeChart" class="chart-placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 交易排行榜 -->
      <div class="ranking-section card">
        <div class="card-header">
          <h3 class="card-title">交易排行榜</h3>
        </div>
        <div class="card-body">
          <div class="ranking-content">
            <div class="farm-ranking card">
              <div class="card-header">
                <h4 class="card-title">热门牧场</h4>
              </div>
              <div class="card-body">
                <a-table :dataSource="farmRankingData" :columns="farmRankingColumns" :pagination="false" />
              </div>
            </div>
            <div class="trader-ranking card">
              <div class="card-header">
                <h4 class="card-title">活跃交易员</h4>
              </div>
              <div class="card-body">
                <a-table :dataSource="traderRankingData" :columns="traderRankingColumns" :pagination="false" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'Trade',
  setup() {
    const volumeData = ref([]);
    const farmRankingData = ref([]);
    const traderRankingData = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const volumeChart = ref(null);
    const trendChart = ref(null);
    const distributionChart = ref(null);
    const typeChart = ref(null);
    
    let volumeChartInstance = null;
    let trendChartInstance = null;
    let distributionChartInstance = null;
    let typeChartInstance = null;
    
    // 交易量数据
    volumeData.value = [
      { title: '今日交易量', value: '1,245头', change: 5.2 },
      { title: '本月交易量', value: '38,650头', change: 8.7 },
      { title: '年度交易量', value: '420,860头', change: 12.3 }
    ];
    
    // 热门牧场排行榜列定义
    const farmRankingColumns = ref([
      { title: '排名', dataIndex: 'rank', key: 'rank' },
      { title: '牧场名称', dataIndex: 'farm', key: 'farm' },
      { title: '交易量', dataIndex: 'volume', key: 'volume' },
      { title: '交易额', dataIndex: 'amount', key: 'amount' },
    ]);
    
    // 热门牧场排行榜数据
    farmRankingData.value = [
      { key: '1', rank: '1', farm: '锡市牧场A', volume: '2,450头', amount: '¥1,245万' },
      { key: '2', rank: '2', farm: '东乌旗牧场B', volume: '1,980头', amount: '¥980万' },
      { key: '3', rank: '3', farm: '西乌旗牧场C', volume: '1,650头', amount: '¥820万' },
      { key: '4', rank: '4', farm: '镶黄旗牧场D', volume: '1,320头', amount: '¥650万' },
      { key: '5', rank: '5', farm: '正蓝旗牧场E', volume: '1,150头', amount: '¥580万' },
    ];
    
    // 活跃交易员排行榜列定义
    const traderRankingColumns = ref([
      { title: '排名', dataIndex: 'rank', key: 'rank' },
      { title: '交易员', dataIndex: 'trader', key: 'trader' },
      { title: '交易数', dataIndex: 'count', key: 'count' },
      { title: '交易额', dataIndex: 'amount', key: 'amount' },
    ]);
    
    // 活跃交易员排行榜数据
    traderRankingData.value = [
      { key: '1', rank: '1', trader: '张三', count: '126笔', amount: '¥860万' },
      { key: '2', rank: '2', trader: '李四', count: '98笔', amount: '¥620万' },
      { key: '3', rank: '3', trader: '王五', count: '85笔', amount: '¥540万' },
      { key: '4', rank: '4', trader: '赵六', count: '72笔', amount: '¥420万' },
      { key: '5', rank: '5', trader: '孙七', count: '65笔', amount: '¥380万' },
    ];

    // 初始化交易量图表
    const initVolumeChart = () => {
      if (volumeChart.value) {
        volumeChartInstance = echarts.init(volumeChart.value);
        volumeChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [32000, 35000, 38000, 40000, 42000, 45000],
              type: 'bar',
              itemStyle: { color: '#4CAF50' }
            }
          ]
        });
      }
    };
    
    // 初始化价格趋势图表
    const initTrendChart = () => {
      if (trendChart.value) {
        trendChartInstance = echarts.init(trendChart.value);
        trendChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [28000, 29500, 31000, 30500, 32000, 33500],
              type: 'line',
              smooth: true,
              itemStyle: { color: '#2196F3' }
            }
          ]
        });
      }
    };
    
    // 初始化区域分布图表
    const initDistributionChart = () => {
      if (distributionChart.value) {
        distributionChartInstance = echarts.init(distributionChart.value);
        distributionChartInstance.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              data: [
                { value: 35, name: '锡市' },
                { value: 25, name: '东乌旗' },
                { value: 20, name: '西乌旗' },
                { value: 10, name: '镶黄旗' },
                { value: 10, name: '其他' }
              ],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#4CAF50', '#2196F3', '#FF9800', '#f44336', '#9C27B0'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        });
      }
    };
    
    // 初始化交易类型图表
    const initTypeChart = () => {
      if (typeChart.value) {
        typeChartInstance = echarts.init(typeChart.value);
        typeChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['活牛交易', '牛肉制品']
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '活牛交易',
              type: 'bar',
              stack: '总量',
              data: [28000, 30000, 32000, 31000, 33000, 35000],
              itemStyle: { color: '#4CAF50' }
            },
            {
              name: '牛肉制品',
              type: 'bar',
              stack: '总量',
              data: [4000, 5000, 6000, 5500, 7000, 8000],
              itemStyle: { color: '#2196F3' }
            }
          ]
        });
      }
    };

    // 窗口大小改变时重绘图表
    const resizeCharts = () => {
      if (volumeChartInstance) volumeChartInstance.resize();
      if (trendChartInstance) trendChartInstance.resize();
      if (distributionChartInstance) distributionChartInstance.resize();
      if (typeChartInstance) typeChartInstance.resize();
    };

    onMounted(() => {
      loading.value = false;
      initVolumeChart();
      initTrendChart();
      initDistributionChart();
      initTypeChart();
      window.addEventListener('resize', resizeCharts);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeCharts);
      if (volumeChartInstance) volumeChartInstance.dispose();
      if (trendChartInstance) trendChartInstance.dispose();
      if (distributionChartInstance) distributionChartInstance.dispose();
      if (typeChartInstance) typeChartInstance.dispose();
    });

    return {
      volumeData,
      farmRankingData,
      traderRankingData,
      farmRankingColumns,
      traderRankingColumns,
      loading,
      error,
      volumeChart,
      trendChart,
      distributionChart,
      typeChart
    };
  }
};
</script>

<style scoped>
.trade-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(135deg, #0f2027, #20555d, #2c5364);
}

.trade-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.volume-section,
.price-section,
.type-section,
.ranking-section {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius-lg);
}

.card-header {
  background: rgba(0, 0, 0, 0.2);
}

.card-title {
  margin: 0;
  color: var(--text-color);
}

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

.volume-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.volume-card {
  box-shadow: var(--box-shadow);
}

.card-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 5px;
}

.card-change {
  font-size: 12px;
}

.card-change.positive {
  color: var(--success-color);
}

.card-change.negative {
  color: var(--danger-color);
}

.chart-placeholder {
  width: 100%;
  height: 300px;
}

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

.type-content {
  padding: 10px 0;
}

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

.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: var(--text-secondary);
  font-size: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(76, 175, 80, 0.3);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  padding: 20px;
  text-align: center;
  color: var(--danger-color);
  background: rgba(244, 67, 54, 0.1);
  border-radius: var(--border-radius);
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .trade-container {
    padding: 10px;
  }
  
  .volume-content,
  .price-content,
  .ranking-content {
    grid-template-columns: 1fr;
  }
  
  .chart-placeholder {
    height: 250px;
  }
}
</style>