// embroidery-editor.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-embroidery-editor',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="editor-container">
      <div class="canvas-area">
        <div class="embroidery-canvas">
          <!-- Canvas for embroidery design would go here -->
          <p>刺绣设计区域</p>
        </div>
      </div>
      
      <div class="controls">
        <div class="pattern-library">
          <h4>刺绣图案库</h4>
          <div class="patterns">
            <div *ngFor="let pattern of patterns" class="pattern-item">
              {{pattern}}
            </div>
          </div>
        </div>
        
        <div class="color-controls">
          <h4>线色选择</h4>
          <div class="thread-colors">
            <div *ngFor="let color of threadColors" 
                 class="thread-color" 
                 [style.background]="color">
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .editor-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .embroidery-canvas {
      background: #f8f9fa;
      border-radius: 15px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .controls {
      background: white;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .patterns {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 15px;
    }
    
    .pattern-item {
      background: #e9ecef;
      border-radius: 10px;
      padding: 15px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .pattern-item:hover {
      background: #dee2e6;
      transform: scale(1.05);
    }
    
    .thread-colors {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 8px;
      margin-top: 15px;
    }
    
    .thread-color {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .thread-color:hover {
      transform: scale(1.2);
    }
  `]
})
export class EmbroideryEditor {
  patterns = ['花朵', '动物', '字母', '几何', '传统', '现代'];
  threadColors = [
    '#ff0000', '#00ff00', '#0000ff', '#ffff00',
    '#ff00ff', '#00ffff', '#000000', '#ffffff',
    '#ff9999', '#99ff99', '#9999ff', '#ffcc00'
  ];
}