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

@Component({
  selector: 'app-assignment-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 assignments">
          <div class="ios-card-header">
            <h3>{{item.project}}</h3>
            <span class="ios-badge" [class.urgent]="item.priority === 'high'">
              {{item.priority === 'high' ? '紧急' : '普通'}}
            </span>
          </div>
          <p>{{item.description}}</p>
          <button class="ios-btn">派单处理</button>
        </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: #34c759;
      color: white;
      padding: 4px 8px;
      border-radius: 10px;
      font-size: 12px;
      
      &.urgent {
        background: #ff3b30;
      }
    }
    
    .ios-btn {
      background: #007aff;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      margin-top: 12px;
    }
  `]
})
export class AssignmentListComponent {
  assignments = [
    {project: '现代简约客厅设计', priority: 'high', description: '客户急需设计方案确认'},
    {project: '欧式厨房改造', priority: 'normal', description: '等待设计师确认方案'},
    {project: '三居室全屋设计', priority: 'normal', description: '等待客户提供户型图'}
  ];
  
  goBack() {
    history.back();
  }
}