<template>
  <view class="stock-home-container">
    <!-- 顶部用户信息栏 -->
    <view class="user-header">
      <view class="user-info">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{$t('home.welcome')}}</text>
          <text class="username">{{userName}}</text>
        </view>
      </view>
      <view class="account-summary">
        <text class="label">{{$t('home.totalAssets')}}</text>
        <text class="total-assets">${{formatNumber(totalAssets)}}</text>
        <text class="asset-change" :class="{'positive': dailyChange >= 0, 'negative': dailyChange < 0}">
          {{dailyChange >= 0 ? '+' : ''}}{{formatNumber(dailyChange)}} ({{dailyChangePercent >= 0 ? '+' : ''}}{{dailyChangePercent}}%)
        </text>
      </view>
    </view>

    <!-- 主要功能入口 -->
    <view class="quick-actions">
      <view class="action-item" @click="navigateTo('trade')">
        <image src="/static/icons/trade.png"></image>
        <text>Trade</text>
      </view>
      <view class="action-item" @click="navigateTo('deposit')">
        <image src="/static/icons/deposit.png"></image>
        <text>Deposit</text>
      </view>
      <view class="action-item" @click="navigateTo('withdraw')">
        <image src="/static/icons/withdraw.png"></image>
        <text>Withdraw</text>
      </view>
      <view class="action-item" @click="navigateTo('transfer')">
        <image src="/static/icons/transfer.png"></image>
        <text>Transfer</text>
      </view>
    </view>

    <!-- 自选股票列表 -->
    <view class="watchlist-section">
      <view class="section-header">
        <text class="section-title">Watchlist</text>
        <text class="section-more" @click="navigateTo('watchlist')">More ></text>
      </view>
      <scroll-view scroll-x class="stock-scroll">
        <view class="stock-card" v-for="(stock, index) in watchlist" :key="index" @click="viewStockDetail(stock)">
          <text class="stock-symbol">{{stock.symbol}}</text>
          <text class="stock-name">{{stock.name}}</text>
          <text class="stock-price">${{stock.price}}</text>
          <text class="stock-change" :class="{'positive': stock.change >= 0, 'negative': stock.change < 0}">
            {{stock.change >= 0 ? '+' : ''}}{{stock.change}}%
          </text>
        </view>
      </scroll-view>
    </view>

    <!-- 市场指数（左右布局：数据在左，图在右） -->
    <view class="market-indices">
      <view class="section-header">
        <text class="section-title">Market Indices</text>
        <text class="section-more" @click="navigateTo('markets')">More ></text>
      </view>
      <swiper class="indices-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" @change="handleSwiperChange">
        <swiper-item v-for="(index, i) in marketIndices" :key="i">
          <view class="index-item">
            <view class="index-content">
              <view class="index-data">
                <text class="index-name">{{index.name}}</text>
                <text class="index-value">{{index.value}}</text>
                <text class="index-change" :class="{'positive': index.change >= 0, 'negative': index.change < 0}">
                  {{index.change >= 0 ? '+' : ''}}{{index.change}}%
                </text>
              </view>
              
              <view class="chart-container">
                <canvas 
                  type="2d" 
                  :id="'index-chart-' + i" 
                  :canvas-id="'index-chart-' + i" 
                  class="index-chart"
                  @touchstart="touchStart"
                  @touchmove="touchMove"
                  @touchend="touchEnd"
                ></canvas>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 新闻资讯 -->
    <view class="news-section">
      <view class="section-header">
        <text class="section-title">Market News</text>
        <text class="section-more" @click="navigateTo('news')">More ></text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(news, idx) in marketNews" :key="idx" @click="viewNewsDetail(news)">
          <image class="news-image" :src="news.imageUrl" mode="aspectFill"></image>
          <view class="news-content">
            <text class="news-title">{{news.title}}</text>
            <text class="news-time">{{formatTime(news.time)}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      userName: "John Doe",
      accountId: "EU20230001",
      totalAssets: 125430.56,
      dailyChange: 1254.32,
      dailyChangePercent: 1.01,
      watchlist: [
        { symbol: "AAPL", name: "Apple Inc.", price: 175.34, change: 1.23 },
        { symbol: "MSFT", name: "Microsoft", price: 328.39, change: 0.56 },
        { symbol: "TSLA", name: "Tesla", price: 260.54, change: -2.34 },
        { symbol: "AMZN", name: "Amazon", price: 134.56, change: 0.89 },
        { symbol: "GOOGL", name: "Alphabet", price: 125.67, change: -0.45 }
      ],
      marketIndices: [
        { 
          name: "S&P 500", 
          value: 4524.09, 
          change: 0.42,
          historyData: [4480, 4495, 4510, 4490, 4505, 4520, 4524.09]
        },
        { 
          name: "NASDAQ", 
          value: 14019.31, 
          change: 0.85,
          historyData: [13850, 13890, 13920, 13970, 13990, 14005, 14019.31]
        },
        { 
          name: "Dow 30", 
          value: 34721.12, 
          change: -0.12,
          historyData: [34750, 34780, 34800, 34760, 34740, 34730, 34721.12]
        },
        { 
          name: "FTSE 100", 
          value: 7527.53, 
          change: 0.23,
          historyData: [7490, 7505, 7510, 7500, 7515, 7520, 7527.53]
        }
      ],
      marketNews: [
        {
          title: "Fed signals more rate hikes to combat inflation",
          imageUrl: "/static/images/news1.jpg",
          time: "2023-06-15T09:30:00Z"
        },
        {
          title: "Tech stocks rally as AI boom continues",
          imageUrl: "/static/images/news2.jpg",
          time: "2023-06-15T08:45:00Z"
        },
        {
          title: "European markets open higher amid positive earnings",
          imageUrl: "/static/images/news3.jpg",
          time: "2023-06-15T07:15:00Z"
        }
      ],
      charts: [],
      systemInfo: null,
      dpr: 1
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.systemInfo = res;
        this.dpr = res.pixelRatio;
      }
    });
  },
  onReady() {
    setTimeout(() => {
      this.initCharts();
    }, 500);
  },
  methods: {
    formatNumber(num) {
      return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    },
    formatTime(timeString) {
      const date = new Date(timeString);
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    },
    navigateTo(page) {
      const isTabBarPage = ['trade', 'deposit', 'withdraw', 'transfer', 'watchlist', 'markets', 'news'].includes(page);
      if (isTabBarPage) {
        uni.switchTab({
          url: `/pages/${page}/${page}`
        });
      } else {
        uni.navigateTo({
          url: `/pages/${page}/${page}`
        });
      }
    },
    viewStockDetail(stock) {
      uni.navigateTo({
        url: `/pages/stock/detail?symbol=${stock.symbol}`
      });
    },
    viewNewsDetail(news) {
      uni.navigateTo({
        url: `/pages/news/detail?title=${encodeURIComponent(news.title)}`
      });
    },
    initCharts() {
      this.marketIndices.forEach((_, index) => {
        this.initChart(index);
      });
    },
    initChart(index) {
      const query = uni.createSelectorQuery().in(this);
      query.select(`#index-chart-${index}`)
        .fields({ node: true, size: true })
        .exec((res) => {
          if (!res[0] || !res[0].node) {
            setTimeout(() => this.initChart(index), 100);
            return;
          }
          
          const canvas = res[0].node;
          const width = res[0].width;
          const height = res[0].height;
          
          canvas.width = width * this.dpr;
          canvas.height = height * this.dpr;
          canvas.style.width = `${width}px`;
          canvas.style.height = `${height}px`;
          
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: this.dpr
          });
          
          const option = this.getChartOption(index);
          chart.setOption(option);
          
          this.charts[index] = chart;
          canvas.setChart(chart);
        });
    },
    getChartOption(index) {
      const indexData = this.marketIndices[index];
      return {
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'line' }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          show: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [{
          data: indexData.historyData,
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            color: indexData.change >= 0 ? '#4CAF50' : '#F44336'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: indexData.change >= 0 ? 'rgba(76, 175, 80, 0.3)' : 'rgba(244, 67, 54, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)'
              }
            ])
          },
          symbol: 'none'
        }]
      };
    },
    touchStart(e) {
      const chart = this.getChartFromEvent(e);
      chart && chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0
      });
    },
    touchMove(e) {
      const chart = this.getChartFromEvent(e);
      chart && chart.dispatchAction({
        type: 'hideTip'
      });
    },
    touchEnd(e) {
      const chart = this.getChartFromEvent(e);
      chart && chart.dispatchAction({
        type: 'hideTip'
      });
    },
    getChartFromEvent(e) {
      const canvasId = e.currentTarget.id;
      const index = parseInt(canvasId.split('-')[2]);
      return this.charts[index];
    },
    handleSwiperChange(e) {
      const current = e.detail.current;
      if (this.charts[current]) {
        this.charts[current].resize();
      }
    }
  },
  onUnload() {
    this.charts.forEach(chart => {
      chart && chart.dispose();
    });
    this.charts = [];
  }
}
</script>

<style lang="scss">
.stock-home-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.user-header {
  background: linear-gradient(135deg, #1976D2, #2196F3);
  border-radius: 16rpx;
  padding: 30rpx;
  color: white;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
}

.account-summary {
  display: flex;
  flex-direction: column;
}

.label {
  margin-top: 20rpx;
}

.total-assets {
  font-size: 48rpx;
  font-weight: bold;
}

.asset-change {
  font-size: 28rpx;
}

.positive {
  color: #4CAF50;
}

.negative {
  color: #F44336;
}

.quick-actions {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-item image {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.action-item text {
  font-size: 24rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30rpx 0 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
}

.section-more {
  font-size: 26rpx;
  color: #1976D2;
}

.stock-scroll {
  white-space: nowrap;
  width: 100%;
}

.stock-card {
  display: inline-block;
  background-color: white;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  width: 200rpx;
}

.stock-symbol {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
}

.stock-name {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin: 10rpx 0;
}

.stock-price {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
}

.stock-change {
  font-size: 24rpx;
  display: block;
}

.indices-swiper {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.index-item {
  background-color: white;
  border-radius: 12rpx;
  padding: 25rpx;
  box-sizing: border-box;
  height: 100%;
}

.index-content {
  display: flex;
  height: 100%;
  width: 100%;
}

.index-data {
  flex: 0 0 28%; /* 减少左侧数据区域宽度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 15rpx; /* 减少右侧内边距 */
  border-right: 1px solid #f0f0f0;
}

.index-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.index-value {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.index-change {
  font-size: 30rpx;
}

.chart-container {
  flex: 1; /* 使用flex:1而不是固定百分比，让图表占满剩余空间 */
  padding-left: 15rpx; /* 减少左侧内边距 */
  position: relative;
  height: 100%; /* 确保高度充满容器 */
}

.index-chart {
  width: 100%;
  height: 100%;
  display: block;
}

.news-list {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.news-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.news-image {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 28rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-time {
  font-size: 24rpx;
  color: #999;
}
</style>
