<template>
  <div class="market-trends">
    <div class="page-header">
      <h1>市场行情</h1>
      <p>实时金融市场数据和趋势分析</p>
    </div>

    <div class="content">
      <!-- 市场概览 -->
      <div class="overview-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="上证指数"
                :value="marketData.shanghaiIndex"
                :precision="2"
                :value-style="{ color: marketData.shanghaiIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }"
              >
                <template #suffix>
                  <span :style="{ color: marketData.shanghaiIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }">
                    {{ marketData.shanghaiIndexChange >= 0 ? '+' : '' }}{{ marketData.shanghaiIndexChange }}%
                  </span>
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="深证成指"
                :value="marketData.shenzhenIndex"
                :precision="2"
                :value-style="{ color: marketData.shenzhenIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }"
              >
                <template #suffix>
                  <span :style="{ color: marketData.shenzhenIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }">
                    {{ marketData.shenzhenIndexChange >= 0 ? '+' : '' }}{{ marketData.shenzhenIndexChange }}%
                  </span>
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="创业板指"
                :value="marketData.chinextIndex"
                :precision="2"
                :value-style="{ color: marketData.chinextIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }"
              >
                <template #suffix>
                  <span :style="{ color: marketData.chinextIndexChange >= 0 ? '#52c41a' : '#ff4d4f' }">
                    {{ marketData.chinextIndexChange >= 0 ? '+' : '' }}{{ marketData.chinextIndexChange }}%
                  </span>
                </template>
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="人民币汇率"
                :value="marketData.exchangeRate"
                :precision="4"
                :value-style="{ color: marketData.exchangeRateChange >= 0 ? '#ff4d4f' : '#52c41a' }"
              >
                <template #suffix>
                  <span :style="{ color: marketData.exchangeRateChange >= 0 ? '#ff4d4f' : '#52c41a' }">
                    {{ marketData.exchangeRateChange >= 0 ? '+' : '' }}{{ marketData.exchangeRateChange }}%
                  </span>
                </template>
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card title="股指走势图" :bordered="false">
              <div ref="indexChart" style="height: 300px;"></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="汇率走势图" :bordered="false">
              <div ref="exchangeChart" style="height: 300px;"></div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 银行股行情 -->
      <div class="bank-stocks-section">
        <a-card title="银行股行情" :bordered="false">
          <template #extra>
            <a-button @click="handleRefreshStocks">
              <ReloadOutlined />
              刷新
            </a-button>
          </template>
          
          <a-table
            :columns="stockColumns"
            :data-source="bankStocks"
            :pagination="false"
            :loading="stocksLoading"
            row-key="code"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'change'">
                <span :style="{ color: record.change >= 0 ? '#52c41a' : '#ff4d4f' }">
                  {{ record.change >= 0 ? '+' : '' }}{{ record.change }}%
                </span>
              </template>
              <template v-else-if="column.key === 'volume'">
                {{ formatVolume(record.volume) }}
              </template>
              <template v-else-if="column.key === 'action'">
                <a-button type="link" size="small" @click="handleViewStockDetail(record)">
                  详情
                </a-button>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>

      <!-- 市场新闻 -->
      <div class="news-section">
        <a-card title="市场新闻" :bordered="false">
          <a-list
            :data-source="marketNews"
            :loading="newsLoading"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <a @click="handleViewNews(item)">{{ item.title }}</a>
                  </template>
                  <template #description>
                    <div class="news-meta">
                      <span>{{ item.source }}</span>
                      <span>{{ item.time }}</span>
                    </div>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </div>
    </div>

    <!-- 股票详情模态框 -->
    <a-modal
      v-model:open="stockDetailVisible"
      title="股票详情"
      width="600px"
      :footer="null"
    >
      <div v-if="selectedStock" class="stock-detail">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="股票代码">
            {{ selectedStock.code }}
          </a-descriptions-item>
          <a-descriptions-item label="股票名称">
            {{ selectedStock.name }}
          </a-descriptions-item>
          <a-descriptions-item label="当前价格">
            ¥{{ selectedStock.price }}
          </a-descriptions-item>
          <a-descriptions-item label="涨跌幅">
            <span :style="{ color: selectedStock.change >= 0 ? '#52c41a' : '#ff4d4f' }">
              {{ selectedStock.change >= 0 ? '+' : '' }}{{ selectedStock.change }}%
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="成交量">
            {{ formatVolume(selectedStock.volume) }}
          </a-descriptions-item>
          <a-descriptions-item label="成交额">
            {{ formatAmount(selectedStock.amount) }}
          </a-descriptions-item>
          <a-descriptions-item label="最高价">
            ¥{{ selectedStock.high }}
          </a-descriptions-item>
          <a-descriptions-item label="最低价">
            ¥{{ selectedStock.low }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const indexChart = ref(null)
const exchangeChart = ref(null)
const stocksLoading = ref(false)
const newsLoading = ref(false)
const stockDetailVisible = ref(false)
const selectedStock = ref(null)

// 市场数据
const marketData = ref({
  shanghaiIndex: 3245.67,
  shanghaiIndexChange: 1.25,
  shenzhenIndex: 12345.89,
  shenzhenIndexChange: -0.85,
  chinextIndex: 2567.34,
  chinextIndexChange: 2.15,
  exchangeRate: 7.2345,
  exchangeRateChange: -0.12
})

// 表格列配置
const stockColumns = [
  {
    title: '股票代码',
    dataIndex: 'code',
    key: 'code',
    width: 100
  },
  {
    title: '股票名称',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '当前价格',
    dataIndex: 'price',
    key: 'price',
    width: 100
  },
  {
    title: '涨跌幅',
    dataIndex: 'change',
    key: 'change',
    width: 100
  },
  {
    title: '成交量',
    dataIndex: 'volume',
    key: 'volume',
    width: 120
  },
  {
    title: '成交额',
    dataIndex: 'amount',
    key: 'amount',
    width: 120
  },
  {
    title: '操作',
    key: 'action',
    width: 80
  }
]

// 银行股数据
const bankStocks = ref([
  {
    code: '600036',
    name: '招商银行',
    price: 45.67,
    change: 2.15,
    volume: 12345678,
    amount: 562345678,
    high: 46.20,
    low: 44.80
  },
  {
    code: '000001',
    name: '平安银行',
    price: 12.34,
    change: -1.25,
    volume: 8765432,
    amount: 108234567,
    high: 12.50,
    low: 12.10
  },
  {
    code: '600000',
    name: '浦发银行',
    price: 8.95,
    change: 0.85,
    volume: 15678901,
    amount: 140345678,
    high: 9.05,
    low: 8.85
  },
  {
    code: '601166',
    name: '兴业银行',
    price: 18.76,
    change: -0.45,
    volume: 9876543,
    amount: 185234567,
    high: 18.90,
    low: 18.50
  }
])

// 市场新闻数据
const marketNews = ref([
  {
    id: 1,
    title: '央行宣布降准0.5个百分点，释放流动性约1万亿元',
    source: '央行官网',
    time: '2024-01-18 09:30',
    content: '中国人民银行决定下调金融机构存款准备金率0.5个百分点...'
  },
  {
    id: 2,
    title: '银保监会发布新规，加强银行风险管理',
    source: '银保监会',
    time: '2024-01-18 08:45',
    content: '为进一步加强银行业风险管理，银保监会发布新规...'
  },
  {
    id: 3,
    title: '多家银行发布2023年业绩预告，净利润普遍增长',
    source: '财经网',
    time: '2024-01-18 08:20',
    content: '截至1月18日，已有15家银行发布2023年业绩预告...'
  }
])

// 方法
const handleRefreshStocks = async () => {
  stocksLoading.value = true
  // 模拟刷新数据
  await new Promise(resolve => setTimeout(resolve, 1000))
  stocksLoading.value = false
  message.success('数据已刷新')
}

const handleViewStockDetail = (record) => {
  selectedStock.value = record
  stockDetailVisible.value = true
}

const handleViewNews = (item) => {
  message.info(`查看新闻: ${item.title}`)
}

const formatVolume = (volume) => {
  if (volume >= 100000000) {
    return (volume / 100000000).toFixed(2) + '亿'
  } else if (volume >= 10000) {
    return (volume / 10000).toFixed(2) + '万'
  }
  return volume.toString()
}

const formatAmount = (amount) => {
  if (amount >= 100000000) {
    return (amount / 100000000).toFixed(2) + '亿'
  } else if (amount >= 10000) {
    return (amount / 10000).toFixed(2) + '万'
  }
  return amount.toString()
}

const initCharts = () => {
  nextTick(() => {
    // 股指走势图
    if (indexChart.value) {
      const indexChartInstance = echarts.init(indexChart.value)
      const indexOption = {
        title: {
          text: '股指走势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上证指数', '深证成指', '创业板指'],
          top: 30
        },
        xAxis: {
          type: 'category',
          data: ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '14:00', '14:30', '15:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '上证指数',
            type: 'line',
            data: [3200, 3215, 3230, 3245, 3250, 3245, 3240, 3245, 3245.67],
            smooth: true
          },
          {
            name: '深证成指',
            type: 'line',
            data: [12200, 12250, 12300, 12350, 12380, 12350, 12320, 12340, 12345.89],
            smooth: true
          },
          {
            name: '创业板指',
            type: 'line',
            data: [2500, 2520, 2540, 2560, 2570, 2560, 2550, 2560, 2567.34],
            smooth: true
          }
        ]
      }
      indexChartInstance.setOption(indexOption)
    }

    // 汇率走势图
    if (exchangeChart.value) {
      const exchangeChartInstance = echarts.init(exchangeChart.value)
      const exchangeOption = {
        title: {
          text: '人民币汇率走势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '14:00', '14:30', '15:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'USD/CNY',
            type: 'line',
            data: [7.2450, 7.2400, 7.2350, 7.2300, 7.2320, 7.2340, 7.2360, 7.2340, 7.2345],
            smooth: true,
            lineStyle: {
              color: '#ff4d4f'
            }
          }
        ]
      }
      exchangeChartInstance.setOption(exchangeOption)
    }
  })
}

// 生命周期
onMounted(() => {
  initCharts()
})
</script>

<style scoped>
.market-trends {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.overview-section {
  margin-bottom: 24px;
}

.charts-section {
  margin-bottom: 24px;
}

.bank-stocks-section {
  margin-bottom: 24px;
}

.news-section {
  margin-bottom: 24px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.stock-detail {
  padding: 16px 0;
}
</style>
