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

import { Component, signal, Inject, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, RouterModule } from '@angular/router';
import { ProjectService } from '../../../services/project.service';
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDialog, MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { ProjectGroupDialog } from './project-group-dialog.component';

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

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

// 标签选项定义
const DEMAND_TYPES = [
  { value: 'price', label: '价格敏感' },
  { value: 'quality', label: '质量敏感' },
  { value: 'comprehensive', label: '综合要求' }
];

const FOLLOW_UP_STATUS = [
  { value: 'quotation', label: '待报价' },
  { value: 'confirm', label: '待确认需求' },
  { value: 'lost', label: '已失联' }
];

// 预设的偏好标签选项
const PREFERENCE_TAG_OPTIONS = [
  // 颜色偏好
  '柔和色系', '明亮色系', '深色系', '中性色系',
  // 材质偏好
  '环保材料', '实木', '大理石', '瓷砖', '地板', '墙纸',
  // 风格偏好
  '现代简约', '北欧风格', '中式风格', '美式风格', '工业风',
  // 其他偏好
  '智能家电', '收纳空间', '开放式厨房', '大窗户'
];

@Component({
  selector: 'app-consultation-order',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    MatChipsModule,
    MatIconModule,
    MatSnackBarModule,
    MatDialogModule,
    MatProgressSpinnerModule
  ],
  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);
  // 下单时间（自动生成）
  orderTime = signal<string>('');
  // 项目需求卡片展开状态
  isRequirementCardExpanded = signal(false);

  // 订单创建成功事件
  @Output() orderCreated = new EventEmitter<any>();

  // 需求表单
  requirementForm: FormGroup;
  // 客户表单
  customerForm: FormGroup;
  // 项目配置表单
  projectForm: FormGroup;

  // 样式选项
  styleOptions = [
    '现代简约', '北欧风', '工业风', '新中式', '法式轻奢', '日式', '美式', '混搭'
  ];
  
  // 装修风格选项（用于项目配置）
  decorationStyles = [
    { value: 'modern', label: '现代简约' },
    { value: 'nordic', label: '北欧风' },
    { value: 'industrial', label: '工业风' },
    { value: 'chinese', label: '新中式' },
    { value: 'french', label: '法式轻奢' },
    { value: 'japanese', label: '日式' },
    { value: 'american', label: '美式' },
    { value: 'mixed', label: '混搭' }
  ];

  // 项目小组选项
  projectGroups = [
    { value: 'design1', label: '设计一组' },
    { value: 'design2', label: '设计二组' },
    { value: 'design3', label: '设计三组' },
    { value: 'premium', label: '高端定制组' },
    { value: 'soft', label: '软装设计组' }
  ];

  // 项目小组选项（兼容性）
  projectGroupOptions = [
    '设计一组', '设计二组', '设计三组', '高端定制组', '软装设计组'
  ];

  // 标签系统
  demandTypes = DEMAND_TYPES;
  followUpStatus = FOLLOW_UP_STATUS;
  preferenceTagOptions = PREFERENCE_TAG_OPTIONS;
  addOnBlur = true;
  readonly separatorKeysCodes = [ENTER, COMMA] as const;
  preferenceTags: string[] = [];

  constructor(
    private fb: FormBuilder,
    private projectService: ProjectService,
    private snackBar: MatSnackBar,
    private dialog: MatDialog,
    private router: Router
  ) {
    // 初始化需求表单（保留兼容性）
    this.requirementForm = this.fb.group({
      decorationType: ['', Validators.required], // 装修类型（必填）
      downPayment: ['', [Validators.required, Validators.min(0)]], // 首付款（必填）
      firstDraftDate: ['', Validators.required], // 首稿时间（必填）
      style: [''], // 装修风格（选填）
      projectGroup: [''], // 项目小组（选填）
      budget: ['', Validators.required],
      area: ['', [Validators.required, Validators.min(1)]],
      houseType: [''], // 改为非必填
      floor: ['', Validators.min(1)],
      preferredDesigner: [''],
      specialRequirements: [''],
      referenceCases: [[]],
      priceDetails: [''] // 价格明细
    });

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

    // 初始化项目配置表单
    this.projectForm = this.fb.group({
      style: ['', Validators.required], // 风格选择
      projectGroup: ['', Validators.required], // 项目组匹配
      downPaymentSetting: ['', Validators.required], // 首付款设置
      downPaymentAmount: ['', [Validators.required, Validators.min(0)]], // 首付款填写
      firstDraftConfirm: [false, Validators.requiredTrue], // 首稿时间确认
      firstDraftDate: ['', Validators.required] // 首稿时间设置
    });

    // 自动生成下单时间
    this.orderTime.set(new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    }));

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

  // 添加偏好标签
  addPreferenceTag(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // 添加标签，如果它不是空的，并且不在已有标签中
    if (value && !this.preferenceTags.includes(value)) {
      this.preferenceTags.push(value);
    }

    // 清空输入框
    if (event.input) {
      event.input.value = '';
    }
  }

  // 删除偏好标签
  removePreferenceTag(tag: string): void {
    const index = this.preferenceTags.indexOf(tag);
    if (index >= 0) {
      this.preferenceTags.splice(index, 1);
    }
  }

  // 从预设选项中添加标签
  addFromPreset(tag: string): void {
    if (!this.preferenceTags.includes(tag)) {
      this.preferenceTags.push(tag);
    }
  }

  // 搜索客户
  searchCustomer() {
    if (this.searchKeyword().length >= 2) {
      // 模拟搜索结果
      this.searchResults.set([
        {
          id: '1',
          name: '张先生',
          phone: '138****5678',
          customerType: '老客户',
          source: '官网咨询',
          avatar: "data:image/svg+xml,%3Csvg width='64' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23E6E6E6'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='13.333333333333334' font-weight='bold' text-anchor='middle' fill='%23555555' dy='0.3em'%3EIMG%3C/text%3E%3C/svg%3E"
        },
        {
          id: '2',
          name: '李女士',
          phone: '139****1234',
          customerType: 'VIP客户',
          source: '推荐介绍',
          avatar: "data:image/svg+xml,%3Csvg width='65' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23DCDCDC'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='13.333333333333334' font-weight='bold' text-anchor='middle' fill='%23555555' dy='0.3em'%3EIMG%3C/text%3E%3C/svg%3E"
        }
      ]);
    }
  }

  // 选择客户
  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 || ''
    });
    
    // 如果是老客户，自动填充历史信息
    if (customer.customerType === '老客户' || customer.customerType === 'VIP客户') {
      this.loadCustomerHistory(customer.id);
    }
    
    // 清空搜索结果
    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.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);
        
        // 1秒后隐藏成功提示并跳转
        setTimeout(() => {
          this.showSuccessMessage.set(false);
          
          // 发出订单创建成功事件，用于关闭弹窗
          const orderData = {
            orderId: 'mock-9',
            customerName: formData.customerInfo.name,
            projectId: 'mock-9'
          };
          this.orderCreated.emit(orderData);
          
          // 跳转到设计师项目详情页面，传递客服角色标识
          this.router.navigate(['/designer/project-detail/mock-9'], { 
            queryParams: { role: 'customer-service' } 
          });
        }, 1000);
      }, 1500);
    }
  }

  // 基于六项核心字段的最小创建可用性判断
  minimalReady(): boolean {
    const nameCtrl = this.customerForm.get('name');
    const phoneCtrl = this.customerForm.get('phone');
    const styleCtrl = this.requirementForm.get('style');
    const groupCtrl = this.requirementForm.get('projectGroup');
    const downPaymentCtrl = this.requirementForm.get('downPayment');
    const firstDraftDateCtrl = this.requirementForm.get('firstDraftDate');

    const nameOk = !!nameCtrl?.value && nameCtrl.valid;
    const phoneOk = !!phoneCtrl?.value && phoneCtrl.valid;
    const styleOk = !!styleCtrl?.value;
    const groupOk = !!groupCtrl?.value;
    const downPaymentOk = downPaymentCtrl != null && downPaymentCtrl.valid && downPaymentCtrl.value !== null && downPaymentCtrl.value !== '';
    const firstDraftOk = !!firstDraftDateCtrl?.value;

    return !!(nameOk && phoneOk && styleOk && groupOk && downPaymentOk && firstDraftOk);
  }

  // 创建项目（最小必填：姓名、手机、风格、项目组、首付款、首稿时间）
  createProjectMinimal() {
    const nameCtrl = this.customerForm.get('name');
    const phoneCtrl = this.customerForm.get('phone');
    const styleCtrl = this.requirementForm.get('style');
    const groupCtrl = this.requirementForm.get('projectGroup');
    const downPaymentCtrl = this.requirementForm.get('downPayment');
    const firstDraftDateCtrl = this.requirementForm.get('firstDraftDate');

    if (!nameCtrl?.value || !phoneCtrl?.value || !styleCtrl?.value || !groupCtrl?.value || downPaymentCtrl?.value === null || !firstDraftDateCtrl?.value) {
      this.snackBar.open('请完整填写姓名、手机、风格、项目组、首付款、首稿时间', '关闭', { duration: 3000 });
      return;
    }

    this.isSubmitting.set(true);

    const payload = {
      customerId: 'temp-' + Date.now(),
      customerName: nameCtrl.value,
      requirement: {
        style: styleCtrl.value,
        projectGroup: groupCtrl.value,
        downPayment: Number(downPaymentCtrl?.value ?? 0),
        firstDraftDate: firstDraftDateCtrl?.value
      },
      referenceCases: [],
      tags: { followUpStatus: '待分配' }
    };

    this.projectService.createProject(payload).subscribe(
      (res: any) => {
        this.isSubmitting.set(false);
        if (res?.success) {
          this.showSuccessMessage.set(true);
          this.snackBar.open('项目创建成功', '关闭', { duration: 2000 });
          
          // 延迟跳转到项目详情页面
          setTimeout(() => {
            this.showSuccessMessage.set(false);
            
            // 发出订单创建成功事件，用于关闭弹窗
            const orderData = {
              orderId: 'mock-9',
              customerName: nameCtrl.value,
              projectId: 'mock-9'
            };
            this.orderCreated.emit(orderData);
            
            // 跳转到设计师项目详情页面，传递客服角色标识
            this.router.navigate(['/designer/project-detail/mock-9'], { 
              queryParams: { role: 'customer-service' } 
            });
          }, 1000);
        } else {
          this.snackBar.open('创建失败，请稍后重试', '关闭', { duration: 3000 });
        }
      },
      () => {
        this.isSubmitting.set(false);
        this.snackBar.open('创建失败，请稍后重试', '关闭', { duration: 3000 });
      }
    );
  }

  /**
   * 创建项目群
   */
  createProjectGroup() {
    // 先检查是否选择了客户
    if (!this.selectedCustomer()) {
      this.snackBar.open('请先选择客户', '确定', { duration: 2000 });
      return;
    }
    
    // 显示弹窗
    this.dialog.open(ProjectGroupDialog, {
      width: '500px',
      data: {
        selectedCustomer: this.selectedCustomer(),
        demandType: this.customerForm.get('demandType')?.value,
        preferenceTags: this.preferenceTags,
        followUpStatus: this.customerForm.get('followUpStatus')?.value
      }
    }).afterClosed().subscribe(result => {
      if (result && result.confirm) {

        const tags = {
          demandType: result.demandType,
          preferenceTags: result.preferenceTags,
          followUpStatus: result.followUpStatus
        };

        this.isSubmitting.set(true);
        this.projectService.createProjectGroup({
          customerId: result.customerId,
          customerName: result.customerName,
          tags
        }).subscribe(
          (response: any) => {
            if (response.success) {
              this.snackBar.open(`项目群创建成功，群ID: ${response.groupId}`, '确定', { duration: 3000 });
            } else {
              this.snackBar.open('项目群创建失败，请稍后重试', '确定', { duration: 2000 });
            }
            this.isSubmitting.set(false);
          },
          (error: any) => {
            this.snackBar.open('创建项目群时出错，请稍后重试', '确定', { duration: 2000 });
            this.isSubmitting.set(false);
          }
        );
      }
    });
  }



  /**
   * 快速填写客户信息（通过姓名或手机号）
   */
  quickFillCustomerInfo(keyword: string) {
    if (!keyword.trim()) {
      return;
    }

    // 模拟根据姓名或手机号查询客户信息
    setTimeout(() => {
      // 这里应该调用实际的API来查询客户信息
      const mockCustomer = {
        id: 'quick_' + Date.now(),
        name: keyword.includes('1') ? '李四' : keyword,
        phone: keyword.includes('1') ? keyword : '13900139000',
        wechat: 'lisi_wx',
        customerType: '老客户',
        source: '推荐介绍',
        avatar: '',
        demandType: 'quality',
        preferenceTags: ['北欧风格', '实木'],
        followUpStatus: 'confirm'
      };

      this.selectedCustomer.set(mockCustomer);
      this.customerForm.patchValue({
        name: mockCustomer.name,
        phone: mockCustomer.phone,
        wechat: mockCustomer.wechat,
        customerType: mockCustomer.customerType,
        source: mockCustomer.source,
        demandType: mockCustomer.demandType,
        followUpStatus: mockCustomer.followUpStatus
      });

      this.preferenceTags = [...mockCustomer.preferenceTags];
      this.snackBar.open('客户信息填写完成', '确定', { duration: 2000 });
    }, 1000);
  }

  // 加载客户历史信息
  loadCustomerHistory(customerId: string) {
    // 模拟加载客户历史信息
    const mockHistory = {
      projects: [
        { id: '1', name: '三室两厅装修', style: '现代简约', status: '已完成' },
        { id: '2', name: '厨房改造', style: '北欧风', status: '进行中' }
      ],
      feedback: [
        '对设计师服务很满意',
        '希望能加快施工进度',
        '材料质量很好'
      ],
      preferences: {
        style: 'modern',
        projectGroup: 'design1'
      }
    };

    // 根据历史偏好预填充项目配置
    if (mockHistory.preferences) {
      this.projectForm.patchValue({
        style: mockHistory.preferences.style,
        projectGroup: mockHistory.preferences.projectGroup
      });
    }

    this.snackBar.open('已自动填充客户历史偏好信息', '关闭', {
      duration: 3000,
      horizontalPosition: 'center',
      verticalPosition: 'top'
    });
  }

  // 创建新客户
  createNewCustomer() {
    // 重置表单为新客户状态
    this.selectedCustomer.set(null);
    this.customerForm.reset({
      customerType: '新客户'
    });
    this.projectForm.reset();
    this.searchKeyword.set('');
    this.searchResults.set([]);
  }

  // 验证项目配置表单
  isProjectFormValid(): boolean {
    return this.projectForm.valid && this.customerForm.valid;
  }

  // 获取首付款设置选项
  getDownPaymentOptions() {
    return [
      { value: '30', label: '30%' },
      { value: '50', label: '50%' },
      { value: '70', label: '70%' },
      { value: 'custom', label: '自定义' }
    ];
  }

  // 提交简化的订单
  submitSimplifiedOrder() {
    if (!this.isProjectFormValid()) {
      this.snackBar.open('请完善必填信息', '关闭', {
        duration: 3000,
        horizontalPosition: 'center',
        verticalPosition: 'top'
      });
      return;
    }

    this.isSubmitting.set(true);

    const orderData = {
      customer: this.customerForm.value,
      project: this.projectForm.value,
      orderTime: this.orderTime(),
      orderId: 'mock-' + Date.now(), // 模拟订单ID
      status: 'created'
    };

    // 模拟提交
    setTimeout(() => {
      this.isSubmitting.set(false);
      this.showSuccessMessage.set(true);
      
      this.snackBar.open('订单创建成功！', '关闭', {
        duration: 3000,
        horizontalPosition: 'center',
        verticalPosition: 'top'
      });

      // 发射订单创建成功事件
      this.orderCreated.emit(orderData);

      // 3秒后隐藏成功消息
      setTimeout(() => {
        this.showSuccessMessage.set(false);
      }, 3000);
    }, 2000);
  }

  // 返回项目列表页面
  goBackToProjectList() {
    this.router.navigate(['/customer-service/project-list']);
  }
}