import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-revenue-detail',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <div class="ios-container">
      <header class="ios-header">
        <h1>今日成交详情</h1>
        <button class="ios-back-btn" (click)="goBack()">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
        </button>
      </header>
      
      <div class="ios-content">
        <div class="ios-summary-card">
          <h2>¥28,500</h2>
          <p>今日总成交额</p>
          <div class="ios-stats">
            <div class="ios-stat-item">
              <span>5</span>
              <p>成交项目</p>
            </div>
            <div class="ios-stat-item">
              <span>+28%</span>
              <p>环比增长</p>
            </div>
          </div>
        </div>
        
        <div class="ios-card" *ngFor="let item of transactions">
          <div class="ios-card-header">
            <h3>{{item.project}}</h3>
            <span class="ios-amount">¥{{item.amount}}</span>
          </div>
          <p>{{item.customer}} · {{item.time}}</p>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .ios-container {
      max-width: 800px;
      margin: 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    
    .ios-header {
      display: flex;
      align-items: center;
      padding: 16px;
      background: #f2f2f7;
      border-bottom: 1px solid #d1d1d6;
    }
    
    .ios-back-btn {
      background: none;
      border: none;
      margin-right: 16px;
    }
    
    .ios-content {
      padding: 16px;
    }
    
    .ios-summary-card {
      background: linear-gradient(135deg, #007aff, #0040dd);
      color: white;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 16px;
      text-align: center;
    }
    
    .ios-stats {
      display: flex;
      justify-content: space-around;
      margin-top: 16px;
    }
    
    .ios-stat-item {
      text-align: center;
    }
    
    .ios-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .ios-card-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .ios-amount {
      color: #34c759;
      font-weight: bold;
    }
  `]
})
export class RevenueDetailComponent {
  transactions = [
    {project: '现代简约客厅设计', amount: '12,000', customer: '张先生', time: '10:30'},
    {project: '欧式厨房改造', amount: '8,500', customer: '李女士', time: '11:45'},
    {project: '三居室全屋设计', amount: '8,000', customer: '王先生', time: '14:20'}
  ];
  
  goBack() {
    history.back();
  }
}