<!-- 报价编辑器组件 -->
<div class="quotation-editor">
  @if (quotation.spaces.length === 0) {
    <!-- 空状态 -->
    <div class="empty-state">
      <svg class="icon empty-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>
      <p class="empty-message">尚未生成报价</p>
      <p class="empty-hint">请先选择场景并生成报价表</p>
    </div>
  } @else {
    <!-- 报价工具栏 -->
    <div class="quotation-toolbar">
      <div class="toolbar-left">
        <h4 class="toolbar-title">报价明细 ({{ quotation.spaces.length }}个空间)</h4>
      </div>
      <div class="toolbar-right">
        <button class="btn-icon" (click)="expandAll()" title="展开全部">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M112 184l144 144 144-144M256 328V88"/>
          </svg>
        </button>
        <button class="btn-icon" (click)="collapseAll()" title="折叠全部">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path fill="currentColor" d="M112 328l144-144 144 144M256 184v240"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 卡片视图 -->
    @if (viewMode === 'card') {
      <div class="quotation-spaces">
        @for (space of quotation.spaces; track space.name) {
          <div class="space-card" [class.expanded]="isSpaceExpanded(space.name)">
            <!-- 空间头部 -->
            <div class="space-header" (click)="toggleSpaceExpand(space.name)">
              <div class="space-info">
                <h3 class="space-name">{{ space.name }}</h3>
                <p class="space-subtotal">小计: ¥{{ calculateSpaceSubtotal(space).toFixed(2) }}</p>
              </div>
              <div class="space-toggle">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/>
                </svg>
              </div>
            </div>

            <!-- 空间详情 -->
            @if (isSpaceExpanded(space.name)) {
              <div class="space-content">
                <!-- 工序网格 -->
                <div class="process-grid">
                  @for (processType of processTypes; track processType.key) {
                    <div
                      class="process-item"
                      [class.enabled]="isProcessEnabled(space, processType.key)">
                      <div class="process-header" (click)="canEdit && toggleProcess(space, processType.key)">
                        <label class="checkbox-wrapper">
                          <input
                            type="checkbox"
                            class="checkbox-input"
                            [checked]="isProcessEnabled(space, processType.key)"
                            [disabled]="!canEdit" />
                          <span class="checkbox-custom"></span>
                        </label>
                        <span class="badge" [attr.data-color]="processType.color">
                          {{ processType.name }}
                        </span>
                      </div>

                      @if (isProcessEnabled(space, processType.key)) {
                        <div class="process-inputs">
                          <div class="input-group">
                            <label class="input-label">单价</label>
                            <div class="input-with-note">
                              <input
                                class="input-field"
                                type="number"
                                [ngModel]="getProcessPrice(space, processType.key)"
                                (ngModelChange)="setProcessPrice(space, processType.key, $event); onProcessChange()"
                                [disabled]="!canEdit"
                                placeholder="0" />
                              <span class="input-note">元/{{ getProcessUnit(space, processType.key) }}</span>
                            </div>
                          </div>

                          <div class="input-group">
                            <label class="input-label">数量</label>
                            <div class="input-with-note">
                              <input
                                class="input-field"
                                type="number"
                                [ngModel]="getProcessQuantity(space, processType.key)"
                                (ngModelChange)="setProcessQuantity(space, processType.key, $event); onProcessChange()"
                                [disabled]="!canEdit"
                                placeholder="0" />
                              <span class="input-note">{{ getProcessUnit(space, processType.key) }}</span>
                            </div>
                          </div>

                          <div class="process-subtotal">
                            小计: ¥{{ calculateProcessSubtotal(space, processType.key).toFixed(2) }}
                          </div>
                        </div>
                      }
                    </div>
                  }
                </div>
              </div>
            }
          </div>
        }
      </div>
    }

    <!-- 表格视图 -->
    @if (viewMode === 'table') {
      <div class="quotation-table">
        @for (space of quotation.spaces; track space.name) {
          <div class="table-section">
            <div class="table-header">
              <h3 class="table-space-name">{{ space.name }}</h3>
              <span class="table-space-subtotal">小计: ¥{{ calculateSpaceSubtotal(space).toFixed(2) }}</span>
            </div>
            <table class="process-table">
              <thead>
                <tr>
                  <th class="col-checkbox"></th>
                  <th class="col-process">工序</th>
                  <th class="col-price">单价(元)</th>
                  <th class="col-quantity">数量</th>
                  <th class="col-unit">单位</th>
                  <th class="col-subtotal">小计(元)</th>
                </tr>
              </thead>
              <tbody>
                @for (processType of processTypes; track processType.key) {
                  <tr [class.enabled]="isProcessEnabled(space, processType.key)">
                    <td class="col-checkbox">
                      <label class="checkbox-wrapper">
                        <input
                          type="checkbox"
                          [checked]="isProcessEnabled(space, processType.key)"
                          (change)="canEdit && toggleProcess(space, processType.key)"
                          [disabled]="!canEdit" />
                        <span class="checkbox-custom"></span>
                      </label>
                    </td>
                    <td class="col-process">
                      <span class="badge" [attr.data-color]="processType.color">
                        {{ processType.name }}
                      </span>
                    </td>
                    <td class="col-price">
                      @if (isProcessEnabled(space, processType.key)) {
                        <input
                          class="table-input"
                          type="number"
                          [ngModel]="getProcessPrice(space, processType.key)"
                          (ngModelChange)="setProcessPrice(space, processType.key, $event); onProcessChange()"
                          [disabled]="!canEdit"
                          placeholder="0" />
                      } @else {
                        <span class="disabled-value">-</span>
                      }
                    </td>
                    <td class="col-quantity">
                      @if (isProcessEnabled(space, processType.key)) {
                        <input
                          class="table-input"
                          type="number"
                          [ngModel]="getProcessQuantity(space, processType.key)"
                          (ngModelChange)="setProcessQuantity(space, processType.key, $event); onProcessChange()"
                          [disabled]="!canEdit"
                          placeholder="0" />
                      } @else {
                        <span class="disabled-value">-</span>
                      }
                    </td>
                    <td class="col-unit">
                      {{ getProcessUnit(space, processType.key) || '-' }}
                    </td>
                    <td class="col-subtotal">
                      @if (isProcessEnabled(space, processType.key)) {
                        <strong>¥{{ calculateProcessSubtotal(space, processType.key).toFixed(2) }}</strong>
                      } @else {
                        <span class="disabled-value">-</span>
                      }
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        }
      </div>
    }

    <!-- 总价 -->
    <div class="quotation-total">
      <div class="total-label">报价总额</div>
      <div class="total-amount">¥{{ quotation.total.toFixed(2) }}</div>
    </div>
  }
</div>
