<div class="project-dialog">
  <!-- 对话框标题 -->
  <div class="dialog-header">
    <h2 class="dialog-title">{{ isEditMode ? '编辑项目' : '创建新项目' }}</h2>
    <button mat-icon-button class="close-btn" (click)="onCancel()">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>

  <!-- 表单内容 -->
  <div class="dialog-content">
    <form class="project-form">
      <!-- 项目名称 -->
      <div class="form-group">
        <mat-form-field appearance="outline" class="form-field">
          <mat-label>项目名称 *</mat-label>
          <input matInput type="text" [(ngModel)]="project.name" name="name"
                 placeholder="请输入项目名称">
          <mat-icon matSuffix>title</mat-icon>
        </mat-form-field>
      </div>

      <!-- 客户信息 -->
      <div class="form-group">
        <mat-form-field appearance="outline" class="form-field">
          <mat-label>客户名称 *</mat-label>
          <input matInput type="text" [(ngModel)]="project.customer" name="customer"
                 placeholder="请输入客户名称">
          <mat-icon matSuffix>person</mat-icon>
        </mat-form-field>
      </div>

      <!-- 设计师分配 -->
      <div class="form-group">
        <mat-form-field appearance="outline" class="form-field">
          <mat-label>分配设计师 *</mat-label>
          <mat-select [(ngModel)]="project.designer" name="designer">
            <mat-option *ngFor="let designer of designers" [value]="designer">
              {{ designer }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>assignment_ind</mat-icon>
        </mat-form-field>
      </div>

      <!-- 项目状态 -->
      <div class="form-group">
        <mat-form-field appearance="outline" class="form-field">
          <mat-label>项目状态</mat-label>
          <mat-select [(ngModel)]="project.status" name="status">
            <mat-option *ngFor="let status of statuses" [value]="status.value">
              {{ status.label }}
            </mat-option>
          </mat-select>
          <mat-icon matSuffix>track_changes</mat-icon>
        </mat-form-field>
      </div>

      <!-- 日期选择 -->
      <div class="form-row">
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>开始日期 *</mat-label>
            <input matInput [matDatepicker]="startDatePicker" [(ngModel)]="project.startDate" name="startDate"
                   (dateChange)="onStartDateChange($event.value)">
            <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #startDatePicker></mat-datepicker>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>结束日期 *</mat-label>
            <input matInput [matDatepicker]="endDatePicker" [(ngModel)]="project.endDate" name="endDate"
                   (dateChange)="onEndDateChange($event.value)">
            <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #endDatePicker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>

      <!-- 预算和进度 -->
      <div class="form-row">
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>项目预算 *</mat-label>
            <input matInput type="number" [(ngModel)]="project.budget" name="budget"
                   placeholder="请输入项目预算" min="0" step="100">
            <span matSuffix>¥</span>
          </mat-form-field>
        </div>
        <div class="form-group">
          <mat-form-field appearance="outline" class="form-field">
            <mat-label>完成进度</mat-label>
            <input matInput type="number" [(ngModel)]="project.progress" name="progress"
                   placeholder="请输入完成进度" min="0" max="100" step="5"
                   (change)="onProgressChange()">
            <span matSuffix>%</span>
          </mat-form-field>
        </div>
      </div>

      <!-- 进度条显示 -->
      <div class="progress-display">
        <div class="progress-header">
          <span class="progress-label">当前进度: {{ project.progress }}%</span>
        </div>
        <div class="progress-bar-container">
          <div class="progress-bar" [style.width]="project.progress + '%'"></div>
        </div>
      </div>
    </form>
  </div>

  <!-- 操作按钮 -->
  <div class="dialog-footer">
    <button mat-button class="cancel-btn" (click)="onCancel()">
      取消
    </button>
    <button mat-raised-button color="primary" class="save-btn" 
            [disabled]="!isFormValid()" (click)="onSave()">
      {{ isEditMode ? '保存修改' : '创建项目' }}
    </button>
  </div>
</div>