yss-project/src/app/pages/customer-service/consultation-order/consultation-order.ts

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ProjectService } from '../../../services/project.service';

// 定义客户信息接口
interface Customer {
  id: string;
  name: string;
  phone: string;
  wechat?: string;
  avatar?: string;
  customerType?: string; // 新客户/老客户/VIP客户
  source?: string; // 来源渠道
  remark?: string;
}

// 定义需求信息接口
interface Requirement {
  style: string;
  budget: string;
  area: number;
  houseType: string;
  floor: number;
  decorationType: string;
  preferredDesigner?: string;
  specialRequirements?: string;
  referenceCases?: string[];
}

@Component({
  selector: 'app-consultation-order',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
  templateUrl: './consultation-order.html',
  styleUrls: ['./consultation-order.scss', '../customer-service-styles.scss']
})
export class ConsultationOrder {
  // 搜索客户关键词
  searchKeyword = signal('');
  // 搜索结果列表
  searchResults = signal<Customer[]>([]);
  // 选中的客户
  selectedCustomer = signal<Customer | null>(null);
  // 报价范围
  estimatedPriceRange = signal<string>('');
  // 匹配的案例
  matchedCases = signal<any[]>([]);
  // 表单提交状态
  isSubmitting = signal(false);
  // 成功提示显示状态
  showSuccessMessage = signal(false);

  // 需求表单
  requirementForm: FormGroup;
  // 客户表单
  customerForm: FormGroup;

  // 样式选项
  styleOptions = [
    '现代简约', '北欧风', '工业风', '新中式', '法式轻奢', '日式', '美式', '混搭'
  ];
  
  // 户型选项
  houseTypeOptions = [
    '一室一厅', '两室一厅', '两室两厅', '三室一厅', '三室两厅', '四室两厅', '复式', '别墅', '其他'
  ];
  
  // 装修类型选项
  decorationTypeOptions = [
    '全包', '半包', '清包', '旧房翻新', '局部改造'
  ];

  constructor(
    private fb: FormBuilder,
    private projectService: ProjectService
  ) {
    // 初始化需求表单
    this.requirementForm = this.fb.group({
      style: ['', Validators.required],
      budget: ['', Validators.required],
      area: ['', [Validators.required, Validators.min(1)]],
      houseType: ['', Validators.required],
      floor: ['', Validators.min(1)],
      decorationType: ['', Validators.required],
      preferredDesigner: [''],
      specialRequirements: [''],
      referenceCases: [[]]
    });

    // 初始化客户表单
    this.customerForm = this.fb.group({
      name: ['', Validators.required],
      phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]],
      wechat: [''],
      customerType: ['新客户'],
      source: [''],
      remark: ['']
    });

    // 监听表单值变化，自动计算报价和匹配案例
    this.requirementForm.valueChanges.subscribe(() => {
      this.calculateEstimatedPrice();
      this.matchCases();
    });
  }

  // 搜索客户
  searchCustomer() {
    if (this.searchKeyword().length >= 2) {
      // 模拟搜索结果
      this.searchResults.set([
        {
          id: '1',
          name: '张先生',
          phone: '138****5678',
          customerType: '老客户',
          source: '官网咨询',
          avatar: 'https://picsum.photos/id/64/40/40'
        },
        {
          id: '2',
          name: '李女士',
          phone: '139****1234',
          customerType: 'VIP客户',
          source: '推荐介绍',
          avatar: 'https://picsum.photos/id/65/40/40'
        }
      ]);
    }
  }

  // 选择客户
  selectCustomer(customer: Customer) {
    this.selectedCustomer.set(customer);
    // 填充客户表单
    this.customerForm.patchValue({
      name: customer.name,
      phone: customer.phone,
      wechat: customer.wechat || '',
      customerType: customer.customerType || '新客户',
      source: customer.source || '',
      remark: customer.remark || ''
    });
    // 清空搜索结果
    this.searchResults.set([]);
    this.searchKeyword.set('');
  }

  // 清除选中的客户
  clearSelectedCustomer() {
    this.selectedCustomer.set(null);
    this.customerForm.reset({
      customerType: '新客户'
    });
  }

  // 计算预估报价
  calculateEstimatedPrice() {
    const { area, decorationType, style } = this.requirementForm.value;
    if (area && decorationType) {
      // 模拟报价计算逻辑
      let basePrice = 0;
      switch (decorationType) {
        case '全包': 
          basePrice = 1800;
          break;
        case '半包': 
          basePrice = 1200;
          break;
        case '清包': 
          basePrice = 800;
          break;
        case '旧房翻新': 
          basePrice = 2000;
          break;
        case '局部改造': 
          basePrice = 1500;
          break;
        default: 
          basePrice = 1200;
          break;
      }

      // 风格加价
      const stylePremium = ['法式轻奢', '新中式', '日式'].includes(style) ? 0.2 : 0;
      const totalPrice = area * basePrice * (1 + stylePremium);
      const lowerBound = Math.floor(totalPrice * 0.9);
      const upperBound = Math.ceil(totalPrice * 1.1);
      
      this.estimatedPriceRange.set(
        `¥${lowerBound.toLocaleString()} - ¥${upperBound.toLocaleString()}`
      );
    }
  }

  // 匹配案例
  matchCases() {
    const { style, houseType, area } = this.requirementForm.value;
    if (style && houseType && area) {
      // 模拟匹配案例
      this.matchedCases.set([
        {
          id: '101',
          name: `${style}风格 ${houseType}设计`,
          imageUrl: `https://picsum.photos/id/${30 + Math.floor(Math.random() * 10)}/300/200`,
          designer: '王设计师',
          area: area + '㎡',
          similarity: 92
        },
        {
          id: '102',
          name: `${houseType} ${style}案例展示`,
          imageUrl: `https://picsum.photos/id/${40 + Math.floor(Math.random() * 10)}/300/200`,
          designer: '张设计师',
          area: (area + 10) + '㎡',
          similarity: 85
        }
      ]);
    }
  }

  // 选择参考案例
  selectReferenceCase(caseItem: any) {
    const currentCases = this.requirementForm.get('referenceCases')?.value || [];
    if (!currentCases.includes(caseItem.id)) {
      this.requirementForm.patchValue({
        referenceCases: [...currentCases, caseItem.id]
      });
    }
  }

  // 移除参考案例
  removeReferenceCase(caseId: string) {
    const currentCases = this.requirementForm.get('referenceCases')?.value || [];
    this.requirementForm.patchValue({
      referenceCases: currentCases.filter((id: string) => id !== caseId)
    });
  }

  // 提交表单
  submitForm() {
    if (this.requirementForm.valid && this.customerForm.valid) {
      this.isSubmitting.set(true);
      
      const formData = {
        customerInfo: this.customerForm.value,
        requirementInfo: this.requirementForm.value,
        estimatedPriceRange: this.estimatedPriceRange(),
        createdAt: new Date()
      };

      // 模拟提交请求
      setTimeout(() => {
        console.log('提交的表单数据:', formData);
        this.isSubmitting.set(false);
        this.showSuccessMessage.set(true);
        
        // 3秒后隐藏成功提示
        setTimeout(() => {
          this.showSuccessMessage.set(false);
        }, 3000);
      }, 1500);
    }
  }

  // 一键拉群
  createProjectGroup() {
    // 模拟拉群功能
    console.log('创建项目群');
    alert('项目群已创建，并邀请了相应技术组长！');
  }
}