<script setup lang="ts">
import type { CrmLeadBo, CrmLeadFollowBo, CrmLeadFollowVo, CrmLeadVo, CrmOpportunityVo, LeadConvertRequest } from '@/api/crm';
import type { UserInfo } from '@/api/user';
import type { CustomerVO } from '@/api/erp';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { addLeadFollow, assignLead, convertLeadToDealer, createLead, deleteLead, getLeadFollowRecords, getLeadList, getOpportunityList } from '@/api/crm';
import { getUserSelectList } from '@/api/user';
import { getCustomerList } from '@/api/erp';

// Tab切换
const activeTab = ref('pipeline'); // pipeline | leads

// Stats
const customerTotal = ref(0);

const crmStats = computed(() => [
  { label: '客户总数', value: customerTotal.value.toLocaleString(), icon: 'UserFilled' as const, change: '+5.2%', up: true, bg: '#eef5ff', color: '#1d5af3' },
  { label: '商机金额', value: '¥4,680万', icon: 'Money' as const, change: '+12.8%', up: true, bg: '#f0fdf4', color: '#16a34a' },
  { label: '本月赢单', value: '23', icon: 'Trophy' as const, change: '+15%', up: true, bg: '#fef3c7', color: '#d97706' },
  { label: '转化率', value: '32%', icon: 'DataLine' as const, change: '-2.1%', up: false, bg: '#fef2f2', color: '#dc2626' },
]);

// Pipeline
const activeStage = ref('all');

const pipeline = [
  { key: 'all', label: '全部', color: '#1d5af3', count: 0 },
  { key: 'lead', label: '线索', color: '#94a3b8', count: 0 },
  { key: 'negotiation', label: '谈判中', color: '#f59e0b', count: 0 },
  { key: 'proposal', label: '方案', color: '#8b5cf6', count: 0 },
  { key: 'closing', label: '赢单', color: '#22c55e', count: 0 },
];

// 商机列表数据（真实数据）
const opportunityList = ref<CrmOpportunityVo[]>([]);
const opportunityLoading = ref(false);
const opportunityFilters = ref({
  dealerId: undefined as number | undefined,
  stage: '',
  ownerUserId: undefined as number | undefined,
  pageNum: 1,
  pageSize: 100, // 商机管道加载所有数据
});

// 加载商机列表
async function loadOpportunities() {
  opportunityLoading.value = true;
  try {
    const params = {
      dealerId: opportunityFilters.value.dealerId,
      stage: opportunityFilters.value.stage,
      ownerUserId: opportunityFilters.value.ownerUserId,
      pageNum: opportunityFilters.value.pageNum,
      pageSize: opportunityFilters.value.pageSize,
    };
    const res = await getOpportunityList(params);
    opportunityList.value = res.rows || [];

    // 更新pipeline计数
    updatePipelineCounts();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载商机列表失败');
  }
  finally {
    opportunityLoading.value = false;
  }
}

// 更新pipeline计数
function updatePipelineCounts() {
  const counts = {
    all: opportunityList.value.length,
    lead: opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'lead').length,
    negotiation: opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'negotiation').length,
    proposal: opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'proposal').length,
    closing: opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'closing').length,
  };

  pipeline[0].count = counts.all;
  pipeline[1].count = counts.lead;
  pipeline[2].count = counts.negotiation;
  pipeline[3].count = counts.proposal;
  pipeline[4].count = counts.closing;
}

function getCardsForStage(stage: string) {
  if (stage === 'all')
    return opportunityList.value;
  return opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === stage);
}

// Customer table
const search = ref('');
const customers = ref<CustomerVO[]>([]);
const loading = ref(false);

const customerTableData = computed(() => {
  if (!search.value)
    return customers.value;
  const kw = search.value.toLowerCase();
  return customers.value.filter(c =>
    c.customerName.toLowerCase().includes(kw)
    || c.contactName.toLowerCase().includes(kw),
  );
});

function getLevelInfo(item: CustomerVO): { level: string; levelType?: 'danger' | 'info' } {
  if (item.pricePlanName?.includes('VIP'))
    return { level: 'VIP', levelType: 'danger' };
  if (item.isStop === 1)
    return { level: '停用', levelType: 'info' };
  return { level: 'A' };
}

function getStatusInfo(item: CustomerVO) {
  if (item.isStop === 1)
    return { status: '已停用', statusColor: '#dc2626' };
  return { status: '活跃', statusColor: '#22c55e' };
}

const logoGradients = [
  'linear-gradient(135deg, #1d5af3, #3378fc)',
  'linear-gradient(135deg, #8b5cf6, #a78bfa)',
  'linear-gradient(135deg, #16a34a, #22c55e)',
  'linear-gradient(135deg, #d97706, #f59e0b)',
  'linear-gradient(135deg, #dc2626, #ef4444)',
  'linear-gradient(135deg, #0ea5e9, #38bdf8)',
];

function getAvatarBg(item: CustomerVO) {
  const idx = item.customerCode.charCodeAt(item.customerCode.length - 1) % logoGradients.length;
  return logoGradients[idx];
}

async function loadCustomers() {
  loading.value = true;
  try {
    const res = await getCustomerList({ pageNum: 1, pageSize: 50, keyword: '' });
    customers.value = res.rows || [];
    customerTotal.value = res.total || 0;
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载客户列表失败');
  }
  finally {
    loading.value = false;
  }
}

// Add customer dialog
const showAddCustomer = ref(false);
const customerForm = ref({ name: '', industry: '', contact: '', phone: '', source: '', estimatedAmount: 0, remark: '' });

function handleAddCustomer() {
  ElMessage.success('客户创建成功');
  showAddCustomer.value = false;
  customerForm.value = { name: '', industry: '', contact: '', phone: '', source: '', estimatedAmount: 0, remark: '' };
}

// ============== 线索管理模块（新增） ==============

// 线索列表数据
const leadList = ref<CrmLeadVo[]>([]);
const leadLoading = ref(false);
const leadTotal = ref(0);

// 线索筛选参数
const leadFilters = ref({
  keyword: '',
  intentLevel: '',
  ownerUserId: '',
  leadStatus: '',
  pageNum: 1,
  pageSize: 10,
});

// 线索详情Drawer
const showDetailDrawer = ref(false);
const currentLead = ref<CrmLeadVo | null>(null);
const followRecords = ref<CrmLeadFollowVo[]>([]);

// 跟进记录Drawer
const showFollowDrawer = ref(false);
const followForm = ref<CrmLeadFollowBo>({
  leadId: 0,
  followType: 'phone',
  content: '',
  nextFollowTime: undefined,
});

// 新建线索Dialog
const showAddLeadDialog = ref(false);
const leadForm = ref<CrmLeadBo>({
  companyName: '',
  contactName: '',
  mobile: '',
  wechat: '',
  province: '',
  city: '',
  regionId: undefined,
  sourceType: '',
  activityName: '',
  referrerName: '',
  industry: '',
  companyScale: '',
  storeCount: undefined,
  ownerUserId: undefined,
  remark: '',
});

// 手机号验证规则
const mobileValidator = (value: string) => {
  if (!value) {
    return '请输入手机号';
  }
  const mobileRegex = /^1[3-9]\d{9}$/;
  if (!mobileRegex.test(value)) {
    return '手机号格式不正确';
  }
  return '';
};

// 分配线索Dialog
const showAssignDialog = ref(false);
const assignForm = ref({
  leadId: 0,
  ownerUserId: 0,
});
const userList = ref<UserInfo[]>([]);
const userLoading = ref(false);

// 转经销商Dialog
const showConvertDialog = ref(false);
const convertForm = ref<LeadConvertRequest>({
  leadId: 0,
  dealerName: '',
  dealerCode: '',
  customerCode: '',
  signedAt: '',
  level: 'C',
});

// 加载线索列表
async function loadLeads() {
  leadLoading.value = true;
  try {
    const params = {
      companyName: leadFilters.value.keyword,
      intentLevel: leadFilters.value.intentLevel,
      ownerUserId: leadFilters.value.ownerUserId ? Number(leadFilters.value.ownerUserId) : undefined,
      leadStatus: leadFilters.value.leadStatus,
      pageNum: leadFilters.value.pageNum,
      pageSize: leadFilters.value.pageSize,
    };
    const res = await getLeadList(params);
    leadList.value = res.rows || [];
    leadTotal.value = res.total || 0;
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载线索列表失败');
  }
  finally {
    leadLoading.value = false;
  }
}

// 手机号脱敏
function maskPhone(phone: string) {
  if (!phone || phone.length < 7)
    return phone || '--';
  return `${phone.slice(0, 3)}****${phone.slice(-4)}`;
}

// AI意向Badge类型
function getIntentBadgeType(level: string): 'danger' | 'warning' | 'info' {
  if (level === 'high')
    return 'danger';
  if (level === 'medium')
    return 'warning';
  return 'info';
}

// 查看ERP客户详情
function viewErpCustomer(lead: CrmLeadVo) {
  if (lead.customerCode) {
    // 跳转到经销商页面，筛选该客户
    // 暂时提示用户
    ElMessage.info(`ERP客户编码：${lead.customerCode}，可在经销商页面查看详情`);
  }
}

// 线索详情
async function showLeadDetail(lead: CrmLeadVo) {
  currentLead.value = lead;
  showDetailDrawer.value = true;
  await loadFollowRecords(lead.leadId);
}

// 加载跟进记录
async function loadFollowRecords(leadId: number) {
  try {
    const res = await getLeadFollowRecords(leadId);
    followRecords.value = res.data || [];
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载跟进记录失败');
  }
}

// 打开跟进Drawer
function openFollowDrawer(lead: CrmLeadVo) {
  followForm.value.leadId = lead.leadId;
  followForm.value.followType = 'phone';
  followForm.value.content = '';
  followForm.value.nextFollowTime = undefined;
  showFollowDrawer.value = true;
}

// 提交跟进记录
async function submitFollow() {
  if (!followForm.value.content) {
    ElMessage.warning('请输入跟进内容');
    return;
  }
  try {
    await addLeadFollow(followForm.value);
    ElMessage.success('跟进记录已保存');
    showFollowDrawer.value = false;
    // 重新加载线索列表
    await loadLeads();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '保存跟进记录失败');
  }
}

// 打开新建线索Dialog
function openAddLeadDialog() {
  leadForm.value = {
    companyName: '',
    contactName: '',
    mobile: '',
    wechat: '',
    province: '',
    city: '',
    regionId: undefined,
    sourceType: '',
    activityName: '',
    referrerName: '',
    industry: '',
    companyScale: '',
    storeCount: undefined,
    ownerUserId: undefined,
    remark: '',
  };
  showAddLeadDialog.value = true;
}

// 提交新建线索
async function submitLead() {
  if (!leadForm.value.companyName || !leadForm.value.contactName || !leadForm.value.mobile) {
    ElMessage.warning('请填写必填信息');
    return;
  }

  // 验证手机号格式
  const mobileError = mobileValidator(leadForm.value.mobile);
  if (mobileError) {
    ElMessage.warning(mobileError);
    return;
  }

  try {
    await createLead(leadForm.value);
    ElMessage.success('线索创建成功');
    showAddLeadDialog.value = false;
    await loadLeads();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '创建线索失败');
  }
}

// 分配线索（暂未实现）
// function openAssignDialog(lead: CrmLeadVo) {
//   assignForm.value.leadId = lead.leadId;
//   assignForm.value.ownerUserId = 0;
//   showAssignDialog.value = true;
// }

// 打开转化Dialog
function convertToDealer(lead: CrmLeadVo) {
  convertForm.value = {
    leadId: lead.leadId,
    dealerName: lead.companyName, // 默认为线索公司名称
    dealerCode: '',
    customerCode: lead.customerCode || '',
    signedAt: '',
    level: 'C',
  };
  showConvertDialog.value = true;
}

// 提交转化
async function submitConvert() {
  if (!convertForm.value.dealerName || !convertForm.value.dealerCode) {
    ElMessage.warning('请填写经销商名称和编码');
    return;
  }

  try {
    await convertLeadToDealer(convertForm.value);
    ElMessage.success('线索转化成功，已创建经销商');
    showConvertDialog.value = false;
    loadLeads(); // 刷新线索列表
  }
  catch (error: any) {
    ElMessage.error(error?.message || '转化失败');
  }
}

// 加载用户列表（用于分配）
async function loadUserList(keyword?: string) {
  userLoading.value = true;
  try {
    const res = await getUserSelectList(keyword);
    userList.value = res.data || [];
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载用户列表失败');
  }
  finally {
    userLoading.value = false;
  }
}

// 打开分配Dialog
function openAssignDialog(lead: CrmLeadVo) {
  assignForm.value.leadId = lead.leadId;
  assignForm.value.ownerUserId = lead.ownerUserId || 0;
  showAssignDialog.value = true;
  loadUserList(); // 加载用户列表
}

// 提交分配
async function submitAssign() {
  if (!assignForm.value.ownerUserId) {
    ElMessage.warning('请选择负责人');
    return;
  }

  try {
    await assignLead({ leadId: assignForm.value.leadId, ownerUserId: assignForm.value.ownerUserId });
    ElMessage.success('分配成功');
    showAssignDialog.value = false;
    loadLeads(); // 刷新线索列表
  }
  catch (error: any) {
    ElMessage.error(error?.message || '分配失败');
  }
}

// 删除线索
async function handleDeleteLead(lead: CrmLeadVo) {
  try {
    await ElMessageBox.confirm(`确定要删除线索"${lead.companyName}"吗？删除后无法恢复。`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });

    await deleteLead(lead.leadId.toString());
    ElMessage.success('删除成功');
    loadLeads(); // 刷新线索列表
  }
  catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error?.message || '删除失败');
    }
  }
}

onMounted(() => {
  loadCustomers();
  loadOpportunities(); // 加载商机列表
  // 如果默认Tab是线索管理，加载线索列表
  if (activeTab.value === 'leads') {
    loadLeads();
  }
});
</script>

<template>
  <div class="crm-page">
    <!-- Header Stats -->
    <div class="crm-stats">
      <div v-for="s in crmStats" :key="s.label" class="crm-stat-card">
        <div class="stat-icon-wrap" :style="{ background: s.bg }">
          <el-icon :size="22" :style="{ color: s.color }">
            <component :is="s.icon" />
          </el-icon>
        </div>
        <div class="stat-body">
          <span class="stat-num">{{ s.value }}</span>
          <span class="stat-lbl">{{ s.label }}</span>
        </div>
        <div class="stat-change" :class="s.up ? 'up' : 'down'">
          <el-icon :size="12">
            <component :is="s.up ? 'Top' : 'Bottom'" />
          </el-icon>
          {{ s.change }}
        </div>
      </div>
    </div>

    <!-- Tab切换（新增） -->
    <el-tabs v-model="activeTab" class="crm-tabs" @tab-change="(tab: string | number) => { if (tab === 'leads') loadLeads(); }">
      <!-- 商机管道Tab -->
      <el-tab-pane label="商机管道" name="pipeline">
        <!-- Tabs & Filters -->
        <div class="crm-toolbar">
          <div class="toolbar-left">
            <div class="pipeline-tabs">
              <div
                v-for="stage in pipeline"
                :key="stage.key"
                class="pipe-tab"
                :class="{ active: activeStage === stage.key }"
                @click="activeStage = stage.key"
              >
                <span class="pipe-dot" :style="{ background: stage.color }" />
                {{ stage.label }}
                <span class="pipe-count">{{ stage.count }}</span>
              </div>
            </div>
          </div>
          <div class="toolbar-right">
            <el-input v-model="search" placeholder="搜索客户、联系人..." clearable style="width: 220px" />
            <el-button type="primary" round @click="showAddCustomer = true">
              <el-icon><Plus /></el-icon> 新建客户
            </el-button>
          </div>
        </div>

        <!-- Pipeline View -->
        <div v-loading="opportunityLoading" class="pipeline-view">
          <div v-for="stage in pipeline" :key="stage.key" class="pipeline-col">
            <div class="col-header">
              <span class="col-title">
                <span class="col-dot" :style="{ background: stage.color }" />
                {{ stage.label }}
              </span>
              <span class="col-count">{{ stage.count }}</span>
            </div>
            <div class="col-cards">
              <div v-for="opp in getCardsForStage(stage.key)" :key="opp.opportunityId" class="opportunity-card">
                <div class="opp-header">
                  <span class="opp-name">{{ opp.opportunityName }}</span>
                  <el-tag v-if="opp.stage === 'closing'" type="success" size="small" effect="plain" round>
                    赢单
                  </el-tag>
                  <el-tag v-else-if="opp.stage === 'lead'" type="info" size="small" effect="plain" round>
                    线索
                  </el-tag>
                </div>
                <div class="opp-company">
                  {{ opp.dealerName || '经销商' }}
                </div>
                <div class="opp-details">
                  <div class="opp-detail">
                    <el-icon :size="13">
                      <User />
                    </el-icon>
                    <span>{{ opp.ownerUserName || '--' }}</span>
                  </div>
                  <div class="opp-detail">
                    <el-icon :size="13">
                      <Calendar />
                    </el-icon>
                    <span>{{ opp.expectedCloseDate || '--' }}</span>
                  </div>
                </div>
                <div class="opp-footer">
                  <span class="opp-amount">{{ opp.amount ? `¥${opp.amount.toLocaleString()}` : '--' }}</span>
                  <div class="opp-progress">
                    <el-progress :percentage="opp.probability || 0" :stroke-width="4" :show-text="false" :color="stage.color" />
                  </div>
                </div>
                <div class="opp-avatars">
                  <div v-if="opp.ownerUserName" class="mini-avatar" :style="{ background: '#1d5af3' }">
                    {{ opp.ownerUserName.charAt(0) }}
                  </div>
                </div>
              </div>
              <div class="add-card-placeholder" @click="showAddCustomer = true">
                <el-icon :size="20">
                  <Plus />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- Customer Table -->
        <div v-loading="loading" class="customer-section">
          <div class="section-header">
            <h3 class="section-title">
              客户列表
            </h3>
            <el-button text type="primary" size="small">
              管理客户
            </el-button>
          </div>
          <el-table :data="customerTableData" stripe style="width: 100%">
            <el-table-column prop="customerName" label="客户名称" min-width="180">
              <template #default="{ row }">
                <div class="cust-name-cell">
                  <div class="cust-avatar" :style="{ background: getAvatarBg(row) }">
                    {{ row.customerName.charAt(0) }}
                  </div>
                  <div>
                    <span class="cust-name">{{ row.customerName }}</span>
                    <span class="cust-industry">{{ row.brandName || '--' }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="客户等级" width="120">
              <template #default="{ row }">
                <el-tag :type="getLevelInfo(row).levelType" size="small" effect="light" round>
                  {{ getLevelInfo(row).level }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="contactName" label="联系人" width="100" />
            <el-table-column prop="salesAreaName" label="销区" width="120" />
            <el-table-column label="状态" width="100" align="center">
              <template #default="{ row }">
                <div class="status-dot-wrap">
                  <span class="status-dot" :style="{ background: getStatusInfo(row).statusColor }" />
                  {{ getStatusInfo(row).status }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default>
                <el-button type="primary" link size="small">
                  详情
                </el-button>
                <el-button type="primary" link size="small">
                  跟进
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 线索管理Tab（新增） -->
      <el-tab-pane label="线索管理" name="leads">
        <div class="leads-section">
          <!-- 筛选栏 -->
          <div class="leads-filter-bar">
            <el-input v-model="leadFilters.keyword" placeholder="搜索公司、联系人..." clearable style="width: 240px" @keyup.enter="loadLeads" />
            <el-select v-model="leadFilters.intentLevel" placeholder="AI意向等级" clearable style="width: 140px" @change="loadLeads">
              <el-option label="高意向" value="high" />
              <el-option label="中意向" value="medium" />
              <el-option label="低意向" value="low" />
            </el-select>
            <el-select v-model="leadFilters.leadStatus" placeholder="线索状态" clearable style="width: 140px" @change="loadLeads">
              <el-option label="新线索" value="new" />
              <el-option label="跟进中" value="following" />
              <el-option label="已转化" value="converted" />
              <el-option label="已作废" value="invalid" />
            </el-select>
            <el-button type="primary" @click="loadLeads">
              搜索
            </el-button>
            <el-button type="success" @click="openAddLeadDialog">
              <el-icon><Plus /></el-icon> 新建线索
            </el-button>
          </div>

          <!-- 线索列表表格 -->
          <el-table v-loading="leadLoading" :data="leadList" stripe style="width: 100%">
            <el-table-column prop="companyName" label="公司名称" min-width="180">
              <template #default="{ row }">
                <div class="lead-name-cell">
                  <el-tag v-if="row.intentLevel === 'high'" type="danger" effect="plain">
                    {{ row.companyName }}
                  </el-tag>
                  <span v-else>{{ row.companyName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="contactName" label="联系人" width="100" />
            <el-table-column prop="mobile" label="手机" width="120">
              <template #default="{ row }">
                {{ maskPhone(row.mobile) }}
              </template>
            </el-table-column>
            <el-table-column prop="customerCode" label="ERP编码" width="120">
              <template #default="{ row }">
                <el-link v-if="row.customerCode" type="primary" @click="viewErpCustomer(row)">
                  {{ row.customerCode }}
                </el-link>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="intentLevelName" label="AI意向" width="100">
              <template #default="{ row }">
                <el-badge :value="row.aiScore || 0" :type="row.intentLevel ? getIntentBadgeType(row.intentLevel) : 'info'">
                  {{ row.intentLevelName || '--' }}
                </el-badge>
              </template>
            </el-table-column>
            <el-table-column prop="ownerUserName" label="负责人" width="100">
              <template #default="{ row }">
                <el-avatar v-if="row.ownerUserName" :size="32">
                  {{ row.ownerUserName.charAt(0) }}
                </el-avatar>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="leadStatusName" label="状态" width="100" />
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="280" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link size="small" @click="showLeadDetail(row)">
                  详情
                </el-button>
                <el-button type="primary" link size="small" @click="openFollowDrawer(row)">
                  跟进
                </el-button>
                <el-button
                  v-if="row.leadStatus !== 'converted'"
                  type="warning"
                  link
                  size="small"
                  @click="openAssignDialog(row)"
                >
                  分配
                </el-button>
                <el-button
                  v-if="row.leadStatus !== 'converted'"
                  type="success"
                  link
                  size="small"
                  @click="convertToDealer(row)"
                >
                  转经销商
                </el-button>
                <el-button type="danger" link size="small" @click="handleDeleteLead(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            v-model:current-page="leadFilters.pageNum"
            v-model:page-size="leadFilters.pageSize"
            :total="leadTotal"
            layout="total, prev, pager, next, jumper"
            style="margin-top: 16px; justify-content: flex-end"
            @current-change="loadLeads"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 线索详情Drawer（新增） -->
    <el-drawer v-model="showDetailDrawer" title="线索详情" size="50%">
      <el-descriptions v-if="currentLead" :column="2" border>
        <el-descriptions-item label="公司名称">
          {{ currentLead.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ currentLead.contactName }}
        </el-descriptions-item>
        <el-descriptions-item label="手机">
          {{ currentLead.mobile }}
        </el-descriptions-item>
        <el-descriptions-item label="ERP客户编码">
          <el-link v-if="currentLead.customerCode" type="primary" @click="viewErpCustomer(currentLead)">
            {{ currentLead.customerCode }}
          </el-link>
          <span v-else>--</span>
        </el-descriptions-item>
        <el-descriptions-item label="来源">
          {{ currentLead.sourceTypeName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="行业">
          {{ currentLead.industryName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="门店数">
          {{ currentLead.storeCount || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="AI意向等级">
          <el-progress :percentage="currentLead.aiScore || 0" :color="currentLead.intentLevel ? getIntentBadgeType(currentLead.intentLevel) === 'danger' ? '#dc2626' : getIntentBadgeType(currentLead.intentLevel) === 'warning' ? '#f59e0b' : '#0ea5e9' : '#0ea5e9'" />
        </el-descriptions-item>
        <el-descriptions-item label="风险等级">
          <el-tag :type="currentLead.riskLevel === 'high' ? 'danger' : currentLead.riskLevel === 'medium' ? 'warning' : 'info'">
            {{ currentLead.riskLevelName || '--' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="负责人">
          {{ currentLead.ownerUserName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ currentLead.leadStatusName || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="下次跟进时间">
          {{ currentLead.nextFollowTime || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ currentLead.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ currentLead.remark || '--' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 跟进记录Timeline -->
      <el-divider content-position="left">
        跟进记录
      </el-divider>
      <el-timeline>
        <el-timeline-item v-for="follow in followRecords" :key="follow.followId" :timestamp="follow.createTime" placement="top">
          <el-card>
            <div class="follow-header">
              <span class="follow-type">{{ follow.followTypeName || '--' }}</span>
              <span class="follow-user">{{ follow.followUserName || '--' }}</span>
            </div>
            <div class="follow-content">
              {{ follow.content }}
            </div>
            <div v-if="follow.aiSummary" class="follow-ai-summary">
              <el-icon><MagicStick /></el-icon> AI摘要：{{ follow.aiSummary }}
            </div>
            <div v-if="follow.nextFollowTime" class="follow-next">
              下次跟进：{{ follow.nextFollowTime }}
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-drawer>

    <!-- 跟进记录Drawer（新增） -->
    <el-drawer v-model="showFollowDrawer" title="跟进记录" size="40%">
      <el-form :model="followForm" label-width="100px">
        <el-form-item label="跟进方式">
          <el-select v-model="followForm.followType" placeholder="选择跟进方式">
            <el-option label="电话" value="phone" />
            <el-option label="企业微信" value="wecom" />
            <el-option label="拜访" value="visit" />
            <el-option label="邮件" value="email" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进内容">
          <el-input v-model="followForm.content" type="textarea" :rows="4" placeholder="请输入跟进内容" />
        </el-form-item>
        <el-form-item label="下次跟进时间">
          <el-date-picker
            v-model="followForm.nextFollowTime"
            type="datetime"
            placeholder="选择下次跟进时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showFollowDrawer = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitFollow">
          保存跟进
        </el-button>
      </template>
    </el-drawer>

    <!-- 新建线索Dialog（新增） -->
    <el-dialog v-model="showAddLeadDialog" title="新建线索" width="600px" :close-on-click-modal="false">
      <el-form :model="leadForm" label-width="100px">
        <el-form-item label="公司名称" required>
          <el-input v-model="leadForm.companyName" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="联系人" required>
          <el-input v-model="leadForm.contactName" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="leadForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="leadForm.wechat" placeholder="请输入微信号（可选）" />
        </el-form-item>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="省份">
              <el-input v-model="leadForm.province" placeholder="请输入省份" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市">
              <el-input v-model="leadForm.city" placeholder="请输入城市" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="来源类型">
          <el-select v-model="leadForm.sourceType" placeholder="选择来源类型" style="width: 100%">
            <el-option label="活动" value="activity" />
            <el-option label="推荐" value="referral" />
            <el-option label="网站" value="website" />
            <el-option label="展会" value="exhibition" />
            <el-option label="企业微信" value="wecom" />
            <el-option label="ERP客户" value="erp" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="leadForm.sourceType === 'activity'" label="活动名称">
          <el-input v-model="leadForm.activityName" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item v-if="leadForm.sourceType === 'referral'" label="推荐人">
          <el-input v-model="leadForm.referrerName" placeholder="请输入推荐人" />
        </el-form-item>
        <el-form-item label="行业">
          <el-input v-model="leadForm.industry" placeholder="请输入行业" />
        </el-form-item>
        <el-form-item label="门店数">
          <el-input-number v-model="leadForm.storeCount" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="leadForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddLeadDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitLead">
          创建线索
        </el-button>
      </template>
    </el-dialog>

    <!-- 分配线索Dialog（新增） -->
    <el-dialog v-model="showAssignDialog" title="分配线索" width="400px">
      <el-form :model="assignForm" label-width="100px">
        <el-form-item label="负责人">
          <el-input v-model="assignForm.ownerUserId" placeholder="请输入负责人ID（暂用输入框，后续改为用户选择器）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAssignDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="() => { ElMessage.info('功能开发中'); showAssignDialog = false; }">
          确认分配
        </el-button>
      </template>
    </el-dialog>

    <!-- 转经销商Dialog（新增） -->
    <el-dialog v-model="showConvertDialog" title="线索转经销商" width="600px" :close-on-click-modal="false">
      <el-alert type="info" :closable="false" style="margin-bottom: 16px">
        将线索转化为正式经销商，创建经销商档案
      </el-alert>

      <el-form :model="convertForm" label-width="120px">
        <el-form-item label="经销商名称" required>
          <el-input v-model="convertForm.dealerName" placeholder="默认为线索公司名称" />
        </el-form-item>
        <el-form-item label="经销商编码" required>
          <el-input v-model="convertForm.dealerCode" placeholder="请输入经销商编码，如DL20260001" />
        </el-form-item>
        <el-form-item label="ERP客户编码">
          <el-input v-model="convertForm.customerCode" placeholder="可选，关联ERP客户" />
        </el-form-item>
        <el-form-item label="签约时间">
          <el-date-picker
            v-model="convertForm.signedAt"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择签约时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="经销商等级">
          <el-select v-model="convertForm.level" style="width: 100%">
            <el-option label="A级经销商" value="A" />
            <el-option label="B级经销商" value="B" />
            <el-option label="C级经销商（默认）" value="C" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showConvertDialog = false">
          取消
        </el-button>
        <el-button type="success" @click="submitConvert">
          确认转化
        </el-button>
      </template>
    </el-dialog>

    <!-- 分配线索Dialog（新增） -->
    <el-dialog v-model="showAssignDialog" title="分配线索" width="500px" :close-on-click-modal="false">
      <el-alert type="info" :closable="false" style="margin-bottom: 16px">
        选择负责人来跟进此线索
      </el-alert>

      <el-form :model="assignForm" label-width="100px">
        <el-form-item label="负责人" required>
          <el-select
            v-model="assignForm.ownerUserId"
            placeholder="请选择负责人"
            filterable
            :loading="userLoading"
            style="width: 100%"
            @filter-change="(keyword: string) => loadUserList(keyword)"
          >
            <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="`${user.nickName}（${user.userName}）${user.deptName ? ' - ' + user.deptName : ''}`"
              :value="user.userId"
            >
              <div style="display: flex; align-items: center; justify-content: space-between">
                <span>{{ user.nickName }}（{{ user.userName }}）</span>
                <span v-if="user.deptName" style="color: #8492a6; font-size: 13px">{{ user.deptName }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showAssignDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitAssign">
          确认分配
        </el-button>
      </template>
    </el-dialog>

    <!-- Add Customer Dialog -->
    <el-dialog v-model="showAddCustomer" title="新建客户" width="560px" :close-on-click-modal="false">
      <el-form :model="customerForm" label-position="top">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-input v-model="customerForm.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业">
              <el-input v-model="customerForm.industry" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="customerForm.contact" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="customerForm.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户来源">
              <el-select v-model="customerForm.source" placeholder="请选择" style="width:100%">
                <el-option label="主动咨询" value="1" />
                <el-option label="展会获取" value="2" />
                <el-option label="老客推荐" value="3" />
                <el-option label="网络推广" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估金额">
              <el-input-number v-model="customerForm.estimatedAmount" :min="0" :step="10000" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="customerForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddCustomer = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleAddCustomer">
          创建客户
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.crm-page {
  padding: 20px;
}

.crm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.crm-stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;

  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.stat-lbl {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.stat-change {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;

  &.up { color: #16a34a; }
  &.down { color: #dc2626; }
}

.crm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pipeline-tabs {
  display: flex;
  gap: 4px;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.pipe-tab {
  padding: 7px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;

  &:hover {
    color: var(--color-text-primary);
    background: #f8f7f5;
  }

  &.active {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(29, 90, 243, 0.3);
  }
}

.pipe-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pipe-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.06);

  .active > .pipe-count { background: rgba(255, 255, 255, 0.2); }
}

.pipeline-view {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 24px;
}

.pipeline-col {
  min-width: 280px;
  flex: 1;
}

.col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}

.col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.col-count {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.col-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opportunity-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  cursor: pointer;

  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.opp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.opp-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--color-text-primary);
}

.opp-company {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.opp-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.opp-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.opp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opp-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
}

.opp-progress {
  width: 80px;
}

.opp-avatars {
  display: flex;
  margin-top: 10px;
}

.mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -6px;
  border: 2px solid #fff;
}

.add-card-placeholder {
  border: 2px dashed #e8e6e1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  cursor: pointer;
  color: #c4c0b8;
  transition: all 0.25s ease;

  &:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: #f8faff;
  }
}

.customer-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.cust-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cust-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cust-industry {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.status-dot-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  justify-content: center;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* 线索管理样式（新增） */
.crm-tabs {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.leads-section {
  padding: 0;
}

.leads-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.lead-name-cell {
  display: flex;
  align-items: center;
}

.follow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.follow-type {
  font-weight: 600;
  color: var(--color-text-primary);
}

.follow-user {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.follow-content {
  margin-bottom: 8px;
  color: var(--color-text-primary);
}

.follow-ai-summary {
  padding: 8px 12px;
  background: #f8f7f5;
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.follow-next {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

@media (max-width: 1200px) {
  .crm-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .crm-stats {
    grid-template-columns: 1fr;
  }

  .crm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-right {
    justify-content: space-between;
  }

  .leads-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
