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

@Component({
  selector: 'app-consultation-list',
  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-card" *ngFor="let item of consultations">
          <div class="ios-card-header">
            <h3>{{item.customer}}</h3>
            <span class="ios-badge">{{item.time}}</span>
          </div>
          <p>{{item.content}}</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-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-badge {
      background: #007aff;
      color: white;
      padding: 4px 8px;
      border-radius: 10px;
      font-size: 12px;
    }
  `]
})
export class ConsultationListComponent {
  consultations = [
    {customer: '张先生', time: '10:30', content: '咨询关于厨房改造的预算和工期'},
    {customer: '李女士', time: '11:45', content: '询问客厅设计风格建议'},
    {customer: '王先生', time: '14:20', content: '需要全屋设计方案咨询'}
  ];
  
  goBack() {
    history.back();
  }
}