<div class="consultation-order-panel">
  <!-- 订单分配头部 -->
  <div class="order-assignment-header">
    <h2 class="assignment-title">订单分配</h2>
    <div class="assignment-actions">
      <button 
        class="create-order-btn" 
        (click)="createOrder()"
        [disabled]="!canCreateOrder()"
        [class.disabled]="!canCreateOrder()"
      >
        <span>创建订单</span>
      </button>
    </div>
  </div>

  <!-- 可滚动内容区域 -->
  <div class="panel-content">
    <!-- 客户信息显示 -->
    @if (syncData?.customerInfo) {
      <section class="synced-customer-info">
        <h3 class="form-title">客户信息（已同步）</h3>
        <div class="customer-info-display">
          <div class="info-row">
            <div class="info-item">
              <label>客户姓名：</label>
              <span>{{ syncData.customerInfo.name || '未填写' }}</span>
            </div>
            <div class="info-item">
              <label>联系电话：</label>
              <span>{{ syncData.customerInfo.phone || '未填写' }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <label>微信号：</label>
              <span>{{ syncData.customerInfo.wechat || '未填写' }}</span>
            </div>
            <div class="info-item">
              <label>客户类型：</label>
              <span>{{ syncData.customerInfo.customerType || '未填写' }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <label>客户来源：</label>
              <span>{{ syncData.customerInfo.source || '未填写' }}</span>
            </div>
            <div class="info-item">
              <label>备注：</label>
              <span>{{ syncData.customerInfo.remark || '无' }}</span>
            </div>
          </div>
        </div>
      </section>
    } @else {
      <!-- 新客户表单 -->
      <section class="new-customer-form">
        <h3 class="form-title">新客户信息</h3>
        <form [formGroup]="customerForm">
          <div class="form-row">
            <div class="form-group">
              <label for="wechat">微信号</label>
              <input type="text" id="wechat" formControlName="wechat" placeholder="请输入微信号（选填）">
            </div>
            <div class="form-group">
              <label for="customerType">客户类型</label>
              <select id="customerType" formControlName="customerType">
                <option value="">请选择客户类型</option>
                <option value="新客户">新客户</option>
                <option value="老客户">老客户</option>
                <option value="转介绍">转介绍</option>
              </select>
            </div>
          </div>
        </form>
      </section>
    }

    <!-- 项目需求卡片 -->
    <section class="requirements-card">
      <div class="card-header" (click)="isRequirementCardExpanded = !isRequirementCardExpanded">
        <h3 class="card-title">项目需求</h3>
        <span class="toggle-icon" [class.expanded]="isRequirementCardExpanded">▼</span>
      </div>
      
      @if (isRequirementCardExpanded) {
        <div class="card-content">
          <!-- 显示同步的需求信息 -->
          @if (syncData?.requirementInfo) {
            <div class="synced-requirements-display">
              <h4 class="sync-title">已同步的需求信息</h4>
              <div class="requirements-grid">
                <div class="requirement-item">
                  <label>定金金额：</label>
                  <span>{{ syncData.requirementInfo.downPayment || '未填写' }}</span>
                </div>
                <div class="requirement-item">
                  <label>预算范围：</label>
                  <span>{{ syncData.requirementInfo.budget || '未填写' }}</span>
                </div>
                <div class="requirement-item">
                  <label>房屋面积：</label>
                  <span>{{ syncData.requirementInfo.area || '未填写' }}平方米</span>
                </div>
                <div class="requirement-item">
                  <label>房屋类型：</label>
                  <span>{{ syncData.requirementInfo.houseType || '未填写' }}</span>
                </div>
                <div class="requirement-item">
                  <label>小图时间：</label>
                  <span>{{ syncData.requirementInfo.smallImageTime || '未设置' }}</span>
                </div>
                <div class="requirement-item">
                  <label>大图时间：</label>
                  <span>{{ syncData.requirementInfo.largeImageTime || '未设置' }}</span>
                </div>
                @if (syncData.requirementInfo.spaceRequirements) {
                  <div class="requirement-item full-width">
                    <label>涉及空间：</label>
                    <span>{{ syncData.requirementInfo.spaceRequirements }}</span>
                  </div>
                }
                @if (syncData.requirementInfo.designAngles) {
                  <div class="requirement-item full-width">
                    <label>设计角度：</label>
                    <span>{{ syncData.requirementInfo.designAngles }}</span>
                  </div>
                }
                @if (syncData.requirementInfo.specialAreaHandling) {
                  <div class="requirement-item full-width">
                    <label>特殊区域处理：</label>
                    <span>{{ syncData.requirementInfo.specialAreaHandling }}</span>
                  </div>
                }
                @if (syncData.requirementInfo.materialRequirements) {
                  <div class="requirement-item full-width">
                    <label>材质要求：</label>
                    <span>{{ syncData.requirementInfo.materialRequirements }}</span>
                  </div>
                }
                @if (syncData.requirementInfo.lightingRequirements) {
                  <div class="requirement-item full-width">
                    <label>灯光要求：</label>
                    <span>{{ syncData.requirementInfo.lightingRequirements }}</span>
                  </div>
                }
              </div>
              
              <!-- 偏好标签显示 -->
              @if (syncData.preferenceTags && syncData.preferenceTags.length > 0) {
                <div class="synced-tags-section">
                  <h4 class="tags-title">偏好标签</h4>
                  <div class="tags-container">
                    @for (tag of syncData.preferenceTags; track tag) {
                      <span class="tag synced-tag">{{ tag }}</span>
                    }
                  </div>
                </div>
              }
            </div>
          } @else {
            <!-- 原有的表单输入 -->
            <form [formGroup]="requirementForm">
            <!-- 基本信息 - 两列布局 -->
            <div class="form-row two-columns">
              <div class="form-group">
                <label for="downPayment">定金金额 <span class="required">*</span></label>
                <input type="number" id="downPayment" formControlName="downPayment" placeholder="请输入定金金额">
              </div>
              <div class="form-group">
                <label for="budget">预算范围 <span class="required">*</span></label>
                <input type="number" id="budget" formControlName="budget" placeholder="请输入预算金额">
              </div>
            </div>

            <div class="form-row two-columns">
              <div class="form-group">
                <label for="area">房屋面积 <span class="required">*</span></label>
                <input type="number" id="area" formControlName="area" placeholder="请输入房屋面积（平方米）">
              </div>
              <div class="form-group">
                <label for="houseType">房屋类型</label>
                <input type="text" id="houseType" formControlName="houseType" placeholder="如：三室两厅">
              </div>
            </div>

            <div class="form-row two-columns">
              <div class="form-group">
                <label for="smallImageTime">小图时间</label>
                <input type="date" id="smallImageTime" formControlName="smallImageTime">
              </div>
              <div class="form-group">
                <label for="largeImageTime">大图时间</label>
                <input type="date" id="largeImageTime" formControlName="largeImageTime">
              </div>
            </div>

            <!-- 设计师选择 -->
            <div class="form-row single-column">
              <div class="form-group">
                <label for="preferredDesigner">选择设计师</label>
                <select id="preferredDesigner" formControlName="preferredDesigner" (change)="onDesignerSelected($event)">
                  <option value="">请选择设计师</option>
                  @for (designer of mockDesignerStatuses; track designer.id) {
                    <option [value]="designer.id">
                      {{ designer.name }} - 
                      @switch (designer.status) {
                        @case ('idle') { (空闲) }
                        @case ('busy') { (忙碌) }
                        @case ('vacation') { (休假) }
                        @case ('training') { (培训中) }
                      }
                      - {{ designer.currentProjects }}/{{ designer.maxCapacity }}个项目
                    </option>
                  }
                </select>
              </div>
            </div>

            <!-- 详细需求 - 单列布局 -->
            <div class="form-row single-column">
              <div class="form-group">
                <label for="spaceRequirements">涉及空间</label>
                <textarea 
                  id="spaceRequirements" 
                  formControlName="spaceRequirements" 
                  rows="3" 
                  placeholder="请描述涉及的空间，如：客厅、卧室、厨房等"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="designAngles">设计角度</label>
                <textarea 
                  id="designAngles" 
                  formControlName="designAngles" 
                  rows="3" 
                  placeholder="请明确各个空间的展示角度"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="specialAreaHandling">特殊区域处理</label>
                <textarea 
                  id="specialAreaHandling" 
                  formControlName="specialAreaHandling" 
                  rows="3" 
                  placeholder="请描述特殊区域的处理要求"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="materialRequirements">材质要求</label>
                <textarea 
                  id="materialRequirements" 
                  formControlName="materialRequirements" 
                  rows="3" 
                  placeholder="请描述对材质的具体要求"
                ></textarea>
              </div>
            </div>

            <div class="form-row single-column">
              <div class="form-group">
                <label for="lightingRequirements">灯光要求</label>
                <textarea 
                  id="lightingRequirements" 
                  formControlName="lightingRequirements" 
                  rows="3" 
                  placeholder="请描述对灯光的具体要求"
                ></textarea>
              </div>
            </div>

            <!-- 偏好标签 -->
            <div class="tags-section">
              <h4 class="tags-title">偏好标签</h4>
              <div class="tags-container">
                @for (tag of preferenceTags; track tag) {
                  <span class="tag">
                    {{ tag }}
                    <button type="button" class="remove-tag" (click)="removePreferenceTag(tag)">×</button>
                  </span>
                }
              </div>
              <div class="tag-input-container">
                <input 
                  type="text" 
                  [(ngModel)]="newTag" 
                  placeholder="添加偏好标签"
                  class="tag-input"
                  (keyup.enter)="addPreferenceTag(newTag)"
                />
                <button type="button" class="add-tag-btn" (click)="addPreferenceTag(newTag)">添加</button>
              </div>
            </div>
            </form>
          }
        </div>
      }
    </section>
  </div>
</div>

<!-- 团队分配弹窗 -->
<app-team-assignment-modal
  [isVisible]="showTeamAssignmentModal"
  (closeModal)="closeTeamAssignmentModal()"
  (confirmAssignment)="confirmTeamAssignment($event)">
</app-team-assignment-modal>