<!-- 加载中 -->
@if (loading) {
  <div class="loading-container">
    <div class="spinner">
      <div class="spinner-circle"></div>
    </div>
    <p>加载订单信息...</p>
  </div>
}

<!-- 订单分配内容 -->
@if (!loading) {
  <div class="stage-order-container">
    <!-- 1. 客户信息卡片 -->
    <div class="card customer-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zM385.32 375.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"/><path fill="currentColor" d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"/>
          </svg>
          客户信息
        </h3>
      </div>
      <div class="card-content">
        <div class="info-list">
          <div class="info-item">
            <p class="info-label">客户姓名</p>
            <h4 class="info-value">{{ customer?.get('name') }}</h4>
          </div>
          <div class="info-item">
            <p class="info-label">来源渠道</p>
            <h4 class="info-value">{{ customer?.get('source') || '未知' }}</h4>
          </div>
          @if (customer?.get('data')?.preferences) {
            <div class="info-item">
              <p class="info-label">风格偏好</p>
              <div class="preference-tags">
                @for (style of customer?.get('data')?.preferences?.style || []; track style) {
                  <span class="badge badge-tertiary">{{ style }}</span>
                }
              </div>
            </div>
          }
        </div>
      </div>
    </div>

    <!-- 2. 项目基本信息 -->
    <div class="card project-info-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"/>
          </svg>
          项目基本信息
        </h3>
      </div>
      <div class="card-content">
        <div class="form-list">
          <!-- 项目名称 -->
          <div class="form-group">
            <label class="form-label">项目名称 <span class="required">*</span></label>
            <input
              class="form-input"
              type="text"
              [(ngModel)]="projectInfo.title"
              [disabled]="!canEdit"
              placeholder="请输入项目名称" />
          </div>

          <!-- 项目类型（家装/工装） -->
          <div class="form-group">
            <label class="form-label">项目类型 <span class="required">*</span></label>
            <select
              class="form-select"
              [(ngModel)]="projectInfo.projectType"
              (change)="onProjectTypeChange()"
              [disabled]="!canEdit">
              <option value="">请选择项目类型</option>
              <option value="家装">家装</option>
              <option value="工装">工装</option>
            </select>
          </div>

          <!-- 渲染类型 -->
          @if (projectInfo.projectType === '家装') {
            <div class="form-group">
              <label class="form-label">渲染类型 <span class="required">*</span></label>
              <select
                class="form-select"
                [(ngModel)]="projectInfo.renderType"
                (change)="onHomeSceneChange()"
                [disabled]="!canEdit">
                <option value="">请选择渲染类型</option>
                <option value="静态单张">静态单张</option>
                <option value="360全景">360全景</option>
              </select>
            </div>
          }

          <!-- 报价等级 -->
          <div class="form-group">
            <label class="form-label">报价等级</label>
            <select
              class="form-select"
              [(ngModel)]="projectInfo.priceLevel"
              [disabled]="!canEdit">
              <option value="一级">一级报价（老客户）</option>
              <option value="二级">二级报价（中端组）</option>
              <option value="三级">三级报价（高端组）</option>
            </select>
          </div>

          <!-- 交付期限 -->
          <div class="form-group">
            <label class="form-label">交付期限 <span class="required">*</span></label>
            <input
              class="form-input"
              type="date"
              [(ngModel)]="projectInfo.deadline"
              [disabled]="!canEdit" />
          </div>

          <!-- 项目描述 -->
          <div class="form-group">
            <label class="form-label">项目描述</label>
            <textarea
              class="form-textarea"
              [(ngModel)]="projectInfo.description"
              [disabled]="!canEdit"
              rows="3"
              placeholder="请输入项目描述"></textarea>
          </div>
        </div>
      </div>
    </div>

    <!-- 3. 场景选择（家装） -->
    @if (projectInfo.projectType === '家装' && projectInfo.renderType) {
      <div class="card scene-card">
        <div class="card-header">
          <h3 class="card-title">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"/>
              <path fill="currentColor" d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v48l-57.92-55.38C272.77 51.14 264.71 48 256 48c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 284.12l213.3-204.2a8 8 0 0111.47 0l213.34 204.16a16 16 0 0023.22-.75c5.57-6.5 4.93-16.36-1.42-22.18z"/>
            </svg>
            场景快速选择
          </h3>
          <p class="card-subtitle">选择空间类型和风格，快速生成报价</p>
        </div>
        <div class="card-content">
          <div class="form-list">
            <!-- 空间类型 -->
            <div class="form-group">
              <label class="form-label">空间类型 <span class="required">*</span></label>
              <div class="radio-group">
                @for (spaceType of ['平层', '跃层', '挑空']; track spaceType) {
                  <label class="radio-label">
                    <input
                      type="radio"
                      name="spaceType"
                      [value]="spaceType"
                      [(ngModel)]="homeScenes.spaceType"
                      (change)="onHomeSceneChange()"
                      [disabled]="!canEdit" />
                    <span class="radio-text">{{ spaceType }}</span>
                  </label>
                }
              </div>
            </div>

            <!-- 风格等级 -->
            <div class="form-group">
              <label class="form-label">风格等级 <span class="required">*</span></label>
              <div class="radio-group">
                @for (styleLevel of getLevels(styleLevels); track styleLevel) {
                  <label class="radio-label">
                    <input
                      type="radio"
                      name="styleLevel"
                      [value]="styleLevel"
                      [(ngModel)]="homeScenes.styleLevel"
                      (change)="onHomeSceneChange()"
                      [disabled]="!canEdit" />
                    <span class="radio-text">{{ styleLevel }}</span>
                  </label>
                }
              </div>
            </div>
          </div>

          <!-- 房间选择 -->
          @if (homeScenes.rooms.length > 0) {
            <div class="room-selection">
              <h4 class="section-title">选择房间</h4>
              <div class="room-grid">
                @for (room of homeScenes.rooms; track room.name) {
                  <div class="room-item" [class.selected]="room.selected">
                    <label class="room-checkbox">
                      <input
                        type="checkbox"
                        [(ngModel)]="room.selected"
                        [disabled]="!canEdit" />
                      <span class="checkbox-custom"></span>
                      <div class="room-info">
                        <h5>{{ room.name }}</h5>
                        <p class="base-price">基础价: ¥{{ room.basePrice }}</p>
                      </div>
                    </label>

                    <!-- 加价选项 -->
                    @if (room.selected && canEdit) {
                      <div class="room-adjustments">
                        <div class="adjustment-item">
                          <label class="adjustment-label">功能区加价</label>
                          <input
                            type="number"
                            class="adjustment-input"
                            [(ngModel)]="room.adjustments.extraFunction"
                            min="0"
                            step="100"
                            placeholder="0" />
                          <span class="adjustment-unit">元</span>
                        </div>

                        <div class="adjustment-item">
                          <label class="adjustment-label">造型复杂度</label>
                          <input
                            type="number"
                            class="adjustment-input"
                            [(ngModel)]="room.adjustments.complexity"
                            min="0"
                            max="200"
                            step="50"
                            placeholder="0" />
                          <span class="adjustment-unit">元</span>
                        </div>

                        <div class="adjustment-item">
                          <label class="adjustment-checkbox">
                            <input
                              type="checkbox"
                              [(ngModel)]="room.adjustments.design" />
                            <span class="checkbox-text">需要设计服务(×2)</span>
                          </label>
                        </div>
                      </div>
                    }
                  </div>
                }
              </div>

              <button
                class="btn btn-primary generate-quotation-btn"
                (click)="generateQuotation()"
                [disabled]="hasRoomsDisabled()">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"/>
                  <path fill="currentColor" d="M256 56v120a32 32 0 0032 32h120"/>
                </svg>
                生成报价表
              </button>
            </div>
          }
        </div>
      </div>
    }

    <!-- 3. 场景选择（工装） -->
    @if (projectInfo.projectType === '工装') {
      <div class="card scene-card">
        <div class="card-header">
          <h3 class="card-title">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M408 64H104a56.16 56.16 0 00-56 56v192a56.16 56.16 0 0056 56h40v72h32v-72h160v72h32v-72h40a56.16 56.16 0 0056-56V120a56.16 56.16 0 00-56-56zm24 248a24 24 0 01-24 24H104a24 24 0 01-24-24V120a24 24 0 0124-24h304a24 24 0 0124 24z"/>
            </svg>
            场景快速选择
          </h3>
          <p class="card-subtitle">选择业态类型，快速生成报价</p>
        </div>
        <div class="card-content">
          <!-- 业态类型 -->
          <div class="form-group">
            <label class="form-label">业态类型 <span class="required">*</span></label>
            <select
              class="form-select"
              [(ngModel)]="commercialScenes.businessType"
              (change)="onCommercialTypeChange()"
              [disabled]="!canEdit">
              <option value="">请选择业态类型</option>
              @for (type of businessTypes; track type) {
                <option [value]="type">{{ type }}</option>
              }
            </select>
          </div>

          <!-- 空间选择 -->
          @if (commercialScenes.spaces.length > 0) {
            <div class="space-selection">
              <h4 class="section-title">选择空间</h4>
              <div class="space-grid">
                @for (space of commercialScenes.spaces; track space.name; let idx = $index) {
                  <div class="space-item" [class.selected]="space.selected">
                    <label class="space-checkbox">
                      <input
                        type="checkbox"
                        [(ngModel)]="space.selected"
                        [disabled]="!canEdit" />
                      <span class="checkbox-custom"></span>
                      <div class="space-info">
                        <h5>{{ space.name }}</h5>
                        <p class="space-type">{{ space.type }}</p>
                        <p class="base-price">基础价: ¥{{ space.basePrice }}</p>
                      </div>
                    </label>

                    <!-- 加价选项 -->
                    @if (space.selected && canEdit) {
                      <div class="space-adjustments">
                        <div class="adjustment-item">
                          <label class="adjustment-label">功能区加价</label>
                          <input
                            type="number"
                            class="adjustment-input"
                            [(ngModel)]="space.adjustments.extraFunction"
                            min="0"
                            step="400"
                            placeholder="0" />
                          <span class="adjustment-unit">元</span>
                        </div>

                        <div class="adjustment-item">
                          <label class="adjustment-label">造型复杂度</label>
                          <input
                            type="number"
                            class="adjustment-input"
                            [(ngModel)]="space.adjustments.complexity"
                            min="0"
                            max="200"
                            step="50"
                            placeholder="0" />
                          <span class="adjustment-unit">元</span>
                        </div>

                        <div class="adjustment-item">
                          <label class="adjustment-checkbox">
                            <input
                              type="checkbox"
                              [(ngModel)]="space.adjustments.design" />
                            <span class="checkbox-text">需要设计服务(×2)</span>
                          </label>
                        </div>

                        <div class="adjustment-item">
                          <label class="adjustment-checkbox">
                            <input
                              type="checkbox"
                              [(ngModel)]="space.adjustments.panoramic" />
                            <span class="checkbox-text">全景渲染(×2)</span>
                          </label>
                        </div>
                      </div>
                    }
                  </div>
                }
              </div>

              <button
                class="btn btn-primary generate-quotation-btn"
                (click)="generateQuotation()"
                [disabled]="hasSpacesDisabled()">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"/>
                  <path fill="currentColor" d="M256 56v120a32 32 0 0032 32h120"/>
                </svg>
                生成报价表
              </button>
            </div>
          }
        </div>
      </div>
    }

    <!-- 4. 基于Product表的报价管理 -->
    <div class="card quotation-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <rect x="112" y="128" width="288" height="320" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
            <path fill="currentColor" d="M320 304h-32v-24a8 8 0 00-8-8h-48a8 8 0 00-8 8v24h-32a8 8 0 00-8 8v16a8 8 0 008 8h32v24a8 8 0 008 8h48a8 8 0 008-8v-24h32a8 8 0 008-8v-16a8 8 0 00-8-8z"/>
          </svg>
          产品报价管理
        </h3>
        <p class="card-subtitle">基于Product表的智能报价生成和管理系统</p>
      </div>
      <div class="card-content">
        <app-quotation-editor
          [projectId]="projectId"
          [canEdit]="canEdit"
          [viewMode]="'card'"
          [currentUser]="currentUser"
          (quotationChange)="onQuotationChange($event)"
          (totalChange)="onTotalChange($event)"
          (loadingChange)="onQuotationLoadingChange($event)"
          (productsChange)="onProductsChange($event)">
        </app-quotation-editor>
      </div>
    </div>

    <!-- 5. 设计师分配 -->
    <div class="card designer-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z"/>
            <path fill="currentColor" d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z"/>
          </svg>
          设计师分配
        </h3>
        <p class="card-subtitle">先选择项目组，再选择组员</p>
      </div>
      <div class="card-content">
        <!-- 已分配组员展示 -->
        @if (projectTeams.length > 0) {
          <div class="assigned-teams-section">
            <h4 class="section-title">已分配组员</h4>
            <div class="team-list">
              @for (team of projectTeams; track team.id) {
                <div
                  class="team-item"
                  [class.clickable]="canEdit"
                  (click)="canEdit ? editAssignedDesigner(team) : null">
                  <div class="team-member">
                    <div class="member-avatar">
                      @if (team.get('profile')?.get('data')?.avatar) {
                        <img [src]="team.get('profile').get('data').avatar" alt="组员头像" />
                      } @else {
                        <svg class="icon avatar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                          <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                        </svg>
                      }
                    </div>
                    <div class="member-info">
                      <h5>{{ team.get('profile')?.get('name') }}</h5>
                      <p class="member-spaces">负责空间: {{ getMemberSpaces(team) }}</p>
                    </div>
                  </div>
                  @if (canEdit) {
                    <svg class="icon edit-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                      <path fill="currentColor" d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"/>
                    </svg>
                  }
                </div>
              }
            </div>
          </div>
        }
        <!-- 项目组选择 -->
        <div class="department-section">
          <h4 class="section-title">选择项目组</h4>
          @if (departments.length === 0) {
            <div class="empty-state">
              <p>暂无可用项目组</p>
            </div>
          } @else {
            <div class="department-grid">
              @for (dept of departments; track dept.id) {
                <div
                  class="department-item"
                  [class.selected]="selectedDepartment?.id === dept.id"
                  (click)="selectDepartment(dept)">
                  <h5>{{ dept.get('name') }}</h5>
                  <p>组长: {{ dept.get('leader')?.get('name') || '未指定' }}</p>
                  @if (selectedDepartment?.id === dept.id) {
                    <svg class="icon selected-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                      <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-38 312.38L137.4 280.8a24 24 0 0133.94-33.94l50.2 50.2 95.74-95.74a24 24 0 0133.94 33.94z"/>
                    </svg>
                  }
                </div>
              }
            </div>
          }
        </div>

        <!-- 组员选择 -->
        @if (selectedDepartment) {
          <div class="designer-section">
            <h4 class="section-title">选择组员</h4>
            @if (loadingMembers) {
              <div class="loading-spinner">
                <div class="spinner-sm"></div>
                <p>加载组员中...</p>
              </div>
            } @else if (departmentMembers.length === 0) {
              <div class="empty-state">
                <p>该项目组暂无可用组员</p>
              </div>
            } @else {
              <div class="designer-grid">
                @for (designer of departmentMembers; track designer.id) {
                  <div
                    class="designer-item"
                    [class.selected]="selectedDesigner?.id === designer.id"
                    (click)="selectDesigner(designer)">
                    <div class="designer-avatar">
                      @if (designer.get('data')?.avatar) {
                        <img [src]="designer.get('data').avatar" alt="设计师头像" />
                      } @else {
                        <svg class="icon avatar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                          <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                        </svg>
                      }
                    </div>
                    <div class="designer-info">
                      <h4>{{ designer.get('name') }}</h4>
                      <p>{{ getDesignerWorkload(designer) }}</p>
                    </div>
                    @if (selectedDesigner?.id === designer.id) {
                      <svg class="icon selected-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-38 312.38L137.4 280.8a24 24 0 0133.94-33.94l50.2 50.2 95.74-95.74a24 24 0 0133.94 33.94z"/>
                      </svg>
                    }
                  </div>
                }
              </div>
            }
          </div>
        }
      </div>
    </div>

    <!-- 6. 项目文件管理 -->
    <div class="card files-card">
      <div class="card-header">
        <h3 class="card-title">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M416 221.25V416a48 48 0 01-48 48H144a48 48 0 01-48-48V96a48 48 0 0148-48h98.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62z"/>
            <path fill="currentColor" d="M256 56v120a32 32 0 0032 32h120"/>
          </svg>
          项目文件
        </h3>
        <p class="card-subtitle">
          支持手动上传和企业微信拖拽上传，文件存储在项目目录中
          @if (wxFileDropSupported) {
            <span class="wx-support-indicator">📱 支持企业微信拖拽</span>
          }
        </p>
      </div>
      <div class="card-content">
        <!-- 上传区域 -->
        @if (canEdit) {
          <div class="upload-section">
            <div
              #dropZone
              class="drop-zone"
              [class.drag-over]="dragOver"
              [class.uploading]="isUploading"
              (click)="triggerFileSelect()"
              (dragover)="onDragOver($event)"
              (dragleave)="onDragLeave($event)"
              (drop)="onDrop($event)">

              <!-- 上传图标和提示 -->
              @if (!isUploading) {
                <div class="upload-content">
                  <div class="upload-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="17,8 12,3 7,8"></polyline>
                      <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                  </div>
                  <div class="upload-text">
                    <p class="upload-title">
                      拖拽文件到此处或 <span class="upload-link">点击选择文件</span>
                    </p>
                    <p class="upload-hint">
                      @if (wxFileDropSupported) {
                        支持从企业微信拖拽文件 •
                      }
                      支持多文件上传
                    </p>
                  </div>
                </div>
              }

              <!-- 上传进度 -->
              @if (isUploading) {
                <div class="upload-progress">
                  <div class="progress-circle">
                    <svg class="progress-svg" viewBox="0 0 36 36">
                      <path class="progress-bg"
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                      />
                      <path class="progress-bar"
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                        [style.stroke-dasharray]="uploadProgress + ', 100'"
                      />
                    </svg>
                    <div class="progress-text">{{ uploadProgress | number:'1.0-0' }}%</div>
                  </div>
                  <p class="progress-title">正在上传文件...</p>
                </div>
              }

              <!-- 隐藏的文件输入 -->
              <input #fileInput
                     type="file"
                     multiple
                     [disabled]="isUploading"
                     (change)="onFileSelect($event)"
                     class="file-input">
            </div>
          </div>
        }

        <!-- 文件列表 -->
        @if (projectFiles.length > 0) {
          <div class="files-list">
            <h4 class="section-title">
              项目文件 ({{ projectFiles.length }})
            </h4>
            <div class="files-grid">
              @for (file of projectFiles; track file.id) {
                <div class="file-item">
                  <div class="file-preview">
                    @if (isImageFile(file.type)) {
                      <img [src]="file.url" [alt]="file.name" class="file-image" />
                    } @else {
                      <div class="file-icon-large">
                        {{ getFileIcon(file.type) }}
                      </div>
                    }
                  </div>
                  <div class="file-info">
                    <h5 class="file-name" [title]="file.name">{{ file.name }}</h5>
                    <div class="file-meta">
                      <span class="file-size">{{ formatFileSize(file.size) }}</span>
                      <span class="file-date">{{ file.uploadedAt | date:'MM-dd HH:mm' }}</span>
                      <span class="file-uploader">{{ file.uploadedBy }}</span>
                    </div>
                  </div>
                  <div class="file-actions">
                    <button
                      class="action-btn"
                      (click)="downloadFile(file.url, file.name)"
                      title="下载文件">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
                        <path d="M376 232H216V72c0-13.3-10.7-24-24-24s-24 10.7-24 24v160H8c-13.3 0-24 10.7-24 24s10.7 24 24 24h160v160c0 13.3 10.7 24 24 24s24-10.7 24-24V280h160c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/>
                      </svg>
                    </button>
                    @if (canEdit) {
                      <button
                        class="action-btn delete-btn"
                        (click)="deleteProjectFile(file.id)"
                        title="删除文件">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
                          <path d="M296 64h-80a7.91 7.91 0 00-8 8v56H136a56.16 56.16 0 00-56 56v208a56.16 56.16 0 0056 56h240a56.16 56.16 0 0056-56V184a56.16 56.16 0 00-56-56h-72V72a7.91 7.91 0 00-8-8zm-72 264h96a8 8 0 018 8v16a8 8 0 01-8 8h-96a8 8 0 01-8-8v-16a8 8 0 018-8z"/>
                        </svg>
                      </button>
                    }
                  </div>
                </div>
              }
            </div>
          </div>
        } @else {
          <div class="empty-files">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" class="empty-icon">
              <path d="M64 464V48a48 48 0 0148-48h192a48 48 0 0133.94 13.94l83.05 83.05A48 48 0 01384 176v288a48 48 0 01-48 48H112a48 48 0 01-48-48zm176-304h144a16 16 0 0016-16v-16a16 16 0 00-16-16H240a16 16 0 00-16 16v16a16 16 0 0016 16zm48 0h96a16 16 0 0016-16v-16a16 16 0 00-16-16H288a16 16 0 00-16 16v16a16 16 0 0016 16zm-48 96h144a16 16 0 0016-16v-16a16 16 0 00-16-16H240a16 16 0 00-16 16v16a16 16 0 0016 16zm48 0h96a16 16 0 0016-16v-16a16 16 0 00-16-16H288a16 16 0 00-16 16v16a16 16 0 0016 16z"/>
            </svg>
            <p class="empty-text">暂无项目文件</p>
            <p class="empty-hint">
              @if (wxFileDropSupported) {
                尝试从企业微信拖拽文件，或点击上方按钮上传
              } @else {
                点击上方按钮上传项目文件
              }
            </p>
          </div>
        }
      </div>
    </div>

    <!-- 7. 操作按钮 -->
    @if (canEdit) {
      <div class="action-buttons">
        <button
          class="btn btn-outline"
          (click)="saveDraft()"
          [disabled]="saving">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/>
          </svg>
          保存草稿
        </button>

        <button
          class="btn btn-primary"
          (click)="submitForOrder()"
          [disabled]="saving">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-38 312.38L137.4 280.8a24 24 0 0133.94-33.94l50.2 50.2 95.74-95.74a24 24 0 0133.94 33.94z"/>
          </svg>
          确认订单
        </button>
      </div>
    }
  </div>

  <!-- 设计师分配对话框 -->
  @if (showAssignDialog && assigningDesigner) {
    <div class="modal-overlay" (click)="cancelAssignDialog()">
      <div class="modal-dialog" (click)="$event.stopPropagation()">
        <div class="modal-header">
          <h3 class="modal-title">{{ editingTeam ? '编辑分配' : '分配设计师' }}</h3>
          <button class="modal-close" (click)="cancelAssignDialog()">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path fill="currentColor" d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"/>
            </svg>
          </button>
        </div>
        <div class="modal-content">
          <div class="designer-preview">
            <div class="designer-avatar">
              @if (assigningDesigner.get('data')?.avatar) {
                <img [src]="assigningDesigner.get('data').avatar" alt="设计师头像" />
              } @else {
                <svg class="icon avatar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                </svg>
              }
            </div>
            <div class="designer-name">{{ assigningDesigner.get('name') }}</div>
          </div>

          <div class="space-selection-section">
            <h4 class="form-label">指派空间场景 <span class="required">*</span></h4>
            <p class="form-help">请选择该设计师负责的空间</p>
            <div class="space-checkbox-list">
              @for (space of quotation.spaces; track space.name) {
                <label class="space-checkbox-item">
                  <input
                    type="checkbox"
                    [checked]="selectedSpaces.includes(space.name)"
                    (change)="toggleSpaceSelection(space.name)" />
                  <span class="checkbox-custom"></span>
                  <span class="space-name">{{ space.name }}</span>
                </label>
              }
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" (click)="cancelAssignDialog()">
            取消
          </button>
          <button
            class="btn btn-primary"
            (click)="confirmAssignDesigner()"
            [disabled]="saving || selectedSpaces.length === 0">
            {{ editingTeam ? '确认更新' : '确认分配' }}
          </button>
        </div>
      </div>
    </div>
  }
}
