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

@Component({
  selector: 'app-exception-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 exceptions">
          <div class="ios-card-header">
            <h3>{{item.project}}</h3>
            <span class="ios-badge">{{item.status}}</span>
          </div>
          <p>{{item.issue}}</p>
          <div class="ios-actions">
            <button class="ios-btn warning">标记处理</button>
            <button class="ios-btn">查看详情</button>
          </div>
        </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: #ff9500;
      color: white;
      padding: 4px 8px;
      border-radius: 10px;
      font-size: 12px;
    }
    
    .ios-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }
    
    .ios-btn {
      background: #007aff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      
      &.warning {
        background: #ff9500;
      }
    }
  `]
})
export class ExceptionListComponent {
  exceptions = [
    {project: '现代简约客厅设计', status: '材料缺货', issue: '客户选定的大理石材料缺货，需要更换'},
    {project: '欧式厨房改造', status: '工期延误', issue: '施工队排期冲突，需要调整工期'}
  ];
  
  goBack() {
    history.back();
  }
}