<script setup lang="ts">
import type { CrmDealerVo, CrmOpportunityBo, CrmOpportunityVo } from '@/api/crm';
import type { UserInfo } from '@/api/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { createOpportunity, deleteOpportunity, getDealerSelectList, getOpportunityList, updateOpportunity } from '@/api/crm';
import { getUserSelectList } from '@/api/user';

// Stats
const opportunityTotal = ref(0);

// Stats - 使用真实数据计算
const crmStats = computed(() => {
  // 商机总数
  const total = opportunityList.value.length;

  // 商机金额总和（amount可能返回字符串，需转换为数字）
  const totalAmount = opportunityList.value.reduce((sum, o) => {
    const amount = typeof o.amount === 'string' ? parseFloat(o.amount) : (o.amount || 0);
    return sum + amount;
  }, 0);

  // 本月赢单数量（closing阶段）
  const now = new Date();
  const currentMonth = now.getMonth();
  const currentYear = now.getFullYear();
  const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;
  const lastMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;

  // 本月赢单
  const monthlyWins = opportunityList.value.filter((o) => {
    if (o.stage !== 'closing') return false;
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === currentMonth && createTime.getFullYear() === currentYear;
  }).length;

  // 上月赢单（用于计算环比）
  const lastMonthWins = opportunityList.value.filter((o) => {
    if (o.stage !== 'closing') return false;
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === lastMonth && createTime.getFullYear() === lastMonthYear;
  }).length;

  // 本月新增商机
  const monthlyNewOpps = opportunityList.value.filter((o) => {
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === currentMonth && createTime.getFullYear() === currentYear;
  }).length;

  // 上月新增商机（用于计算环比）
  const lastMonthNewOpps = opportunityList.value.filter((o) => {
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === lastMonth && createTime.getFullYear() === lastMonthYear;
  }).length;

  // 本月赢单金额
  const monthlyWinAmount = opportunityList.value.filter((o) => {
    if (o.stage !== 'closing') return false;
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === currentMonth && createTime.getFullYear() === currentYear;
  }).reduce((sum, o) => {
    const amount = typeof o.amount === 'string' ? parseFloat(o.amount) : (o.amount || 0);
    return sum + amount;
  }, 0);

  // 上月赢单金额
  const lastMonthWinAmount = opportunityList.value.filter((o) => {
    if (o.stage !== 'closing') return false;
    const createTime = new Date(o.createTime);
    return createTime.getMonth() === lastMonth && createTime.getFullYear() === lastMonthYear;
  }).reduce((sum, o) => {
    const amount = typeof o.amount === 'string' ? parseFloat(o.amount) : (o.amount || 0);
    return sum + amount;
  }, 0);

  // 转化率（closing阶段占比）
  const winCount = opportunityList.value.filter(o => o.stage === 'closing').length;
  const conversionRate = total > 0 ? Math.round((winCount / total) * 100) : 0;

  // 计算环比变化率
  function calcChangeRate(current: number, previous: number): { rate: string, up: boolean } {
    if (previous === 0) {
      // 上月无数据时，显示新增状态
      return { rate: current > 0 ? '+新增' : '0%', up: current > 0 };
    }
    const change = ((current - previous) / previous) * 100;
    const sign = change >= 0 ? '+' : '';
    return { rate: `${sign}${change.toFixed(1)}%`, up: change >= 0 };
  }

  // 商机总数变化（本月新增 vs 上月新增）
  const totalChange = calcChangeRate(monthlyNewOpps, lastMonthNewOpps);

  // 商机金额变化（本月赢单金额 vs 上月赢单金额）
  const amountChange = calcChangeRate(monthlyWinAmount, lastMonthWinAmount);

  // 本月赢单变化（本月赢单 vs 上月赢单）
  const winsChange = calcChangeRate(monthlyWins, lastMonthWins);

  // 转化率变化（基于closing阶段本月vs上月占比）
  const currentConversionBase = monthlyNewOpps > 0 ? Math.round((monthlyWins / monthlyNewOpps) * 100) : 0;
  const lastConversionBase = lastMonthNewOpps > 0 ? Math.round((lastMonthWins / lastMonthNewOpps) * 100) : 0;
  const conversionChange = calcChangeRate(currentConversionBase, lastConversionBase);

  return [
    { label: '商机总数', value: total.toString(), icon: 'TrendCharts' as const, change: totalChange.rate, up: totalChange.up, bg: '#eef5ff', color: '#1d5af3' },
    { label: '商机金额', value: formatAmount(totalAmount), icon: 'Money' as const, change: amountChange.rate, up: amountChange.up, bg: '#f0fdf4', color: '#16a34a' },
    { label: '本月赢单', value: monthlyWins.toString(), icon: 'Trophy' as const, change: winsChange.rate, up: winsChange.up, bg: '#fef3c7', color: '#d97706' },
    { label: '转化率', value: `${conversionRate}%`, icon: 'DataLine' as const, change: conversionChange.rate, up: conversionChange.up, bg: '#fef2f2', color: '#dc2626' },
  ];
});

// 格式化金额显示
function formatAmount(amount: number): string {
  if (amount >= 100000000) {
    return `¥${(amount / 100000000).toFixed(2)}亿`;
  }
  if (amount >= 10000) {
    return `¥${(amount / 10000).toFixed(2)}万`;
  }
  return `¥${amount.toLocaleString()}`;
}

// 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 searchKeyword = ref('');

// 加载商机列表
async function loadOpportunities() {
  opportunityLoading.value = true;
  try {
    const res = await getOpportunityList({ pageNum: 1, pageSize: 100 });
    opportunityList.value = res.rows || [];
    opportunityTotal.value = res.total || 0;
    updatePipelineCounts();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载商机列表失败');
  }
  finally {
    opportunityLoading.value = false;
  }
}

// 更新pipeline计数
function updatePipelineCounts() {
  pipeline[0].count = opportunityList.value.length;
  pipeline[1].count = opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'lead').length;
  pipeline[2].count = opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'negotiation').length;
  pipeline[3].count = opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'proposal').length;
  pipeline[4].count = opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === 'closing').length;
}

function getCardsForStage(stage: string) {
  // 先按阶段过滤
  let cards = stage === 'all'
    ? opportunityList.value
    : opportunityList.value.filter((o: CrmOpportunityVo) => o.stage === stage);

  // 再按搜索关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    cards = cards.filter((o: CrmOpportunityVo) =>
      o.opportunityName?.toLowerCase().includes(keyword)
      || o.dealerName?.toLowerCase().includes(keyword)
      || o.ownerUserName?.toLowerCase().includes(keyword)
      || o.productName?.toLowerCase().includes(keyword),
    );
  }

  return cards;
}

// 根据activeStage过滤显示的Pipeline列
const filteredPipeline = computed(() => {
  // 实际阶段列（排除"全部"虚拟列）
  const actualStages = pipeline.filter(s => s.key !== 'all');

  if (activeStage.value === 'all') {
    // 全部Tab显示所有实际阶段列（线索、谈判中、方案、赢单）
    return actualStages;
  }
  // 只显示选中阶段的列
  return actualStages.filter(s => s.key === activeStage.value);
});

// ============== 新建商机模块 ==============

const showAddOpportunityDialog = ref(false);
const opportunityForm = ref<CrmOpportunityBo>({
  dealerId: 0,
  opportunityName: '',
  stage: 'lead',
  amount: 0,
  probability: 10,
  expectedCloseDate: '',
  ownerUserId: 0,
  productName: '',
  description: '',
});
const dealerList = ref<CrmDealerVo[]>([]);
const dealerLoading = ref(false);
const userList = ref<UserInfo[]>([]);
const userLoading = ref(false);

// 打开新建商机Dialog
function openAddOpportunityDialog(stage?: string) {
  // 根据点击位置自动设置商机阶段
  // 如果在特定阶段的列中点击，自动设置该阶段
  // 如果在全部列或toolbar按钮点击，默认设置为"线索"
  const defaultStage = stage && stage !== 'all' ? stage : 'lead';

  opportunityForm.value = {
    dealerId: 0,
    opportunityName: '',
    stage: defaultStage,
    amount: 0,
    probability: getProbabilityByStage(defaultStage),
    expectedCloseDate: '',
    ownerUserId: 0,
    productName: '',
    description: '',
  };
  showAddOpportunityDialog.value = true;
  loadDealerList();
  loadUserList();
}

// 根据阶段获取默认概率
function getProbabilityByStage(stage: string): number {
  const probabilityMap: Record<string, number> = {
    lead: 10,
    negotiation: 30,
    proposal: 50,
    closing: 90,
  };
  return probabilityMap[stage] || 10;
}

// 加载经销商列表
async function loadDealerList(keyword?: string) {
  dealerLoading.value = true;
  try {
    const res = await getDealerSelectList(keyword);
    dealerList.value = res.data || [];
  }
  catch (error: any) {
    ElMessage.error(error?.message || '加载经销商列表失败');
  }
  finally {
    dealerLoading.value = false;
  }
}

// 加载用户列表
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;
  }
}

// 提交新建商机
async function submitOpportunity() {
  if (!opportunityForm.value.dealerId) {
    ElMessage.warning('请选择经销商');
    return;
  }
  if (!opportunityForm.value.opportunityName) {
    ElMessage.warning('请输入商机名称');
    return;
  }

  try {
    await createOpportunity(opportunityForm.value);
    ElMessage.success('商机创建成功');
    showAddOpportunityDialog.value = false;
    loadOpportunities();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '创建商机失败');
  }
}

// ============== 商机详情模块 ==============

const showDetailDialog = ref(false);
const currentOpportunity = ref<CrmOpportunityVo | null>(null);

// 打开商机详情
function openOpportunityDetail(opp: CrmOpportunityVo) {
  currentOpportunity.value = opp;
  showDetailDialog.value = true;
}

// ============== 商机编辑模块 ==============

const showEditDialog = ref(false);
const editForm = ref<CrmOpportunityBo>({
  opportunityId: 0,
  dealerId: 0,
  opportunityName: '',
  stage: '',
  amount: 0,
  probability: 0,
  expectedCloseDate: '',
  ownerUserId: 0,
  productName: '',
  description: '',
});

// 打开编辑Dialog
function openEditDialog() {
  if (!currentOpportunity.value)
    return;

  editForm.value = {
    opportunityId: currentOpportunity.value.opportunityId,
    dealerId: currentOpportunity.value.dealerId,
    opportunityName: currentOpportunity.value.opportunityName,
    stage: currentOpportunity.value.stage,
    amount: Number(currentOpportunity.value.amount) || 0,
    probability: currentOpportunity.value.probability || 0,
    expectedCloseDate: currentOpportunity.value.expectedCloseDate || '',
    ownerUserId: currentOpportunity.value.ownerUserId || 0,
    productName: currentOpportunity.value.productName || '',
    description: currentOpportunity.value.description || '',
  };
  showDetailDialog.value = false;
  showEditDialog.value = true;
  loadDealerList();
  loadUserList();
}

// 提交编辑
async function submitEdit() {
  if (!editForm.value.opportunityName) {
    ElMessage.warning('请输入商机名称');
    return;
  }

  try {
    await updateOpportunity(editForm.value);
    ElMessage.success('商机更新成功');
    showEditDialog.value = false;
    loadOpportunities();
  }
  catch (error: any) {
    ElMessage.error(error?.message || '更新商机失败');
  }
}

// ============== 商机删除模块 ==============

async function handleDeleteOpportunity() {
  if (!currentOpportunity.value)
    return;

  try {
    await ElMessageBox.confirm(
      `确定要删除商机"${currentOpportunity.value.opportunityName}"吗？删除后无法恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    );

    await deleteOpportunity(currentOpportunity.value.opportunityId.toString());
    ElMessage.success('商机删除成功');
    showDetailDialog.value = false;
    loadOpportunities();
  }
  catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error(error?.message || '删除商机失败');
    }
  }
}

onMounted(() => {
  loadOpportunities();
});
</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>

    <!-- Pipeline Section -->
    <div class="pipeline-section">
      <!-- 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="searchKeyword"
            placeholder="搜索商机..."
            clearable
            style="width: 220px"
            @keyup.enter="() => {}"
            @clear="() => {}"
          />
          <el-button type="primary" round @click="() => openAddOpportunityDialog()">
            <el-icon><Plus /></el-icon> 新建商机
          </el-button>
        </div>
      </div>

      <!-- Pipeline View -->
      <div v-loading="opportunityLoading" class="pipeline-view">
        <!-- 根据activeStage过滤显示的列 -->
        <div
          v-for="stage in filteredPipeline"
          :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" @click="openOpportunityDetail(opp)">
              <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 ? `¥${Number(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="() => openAddOpportunityDialog(stage.key)">
              <el-icon :size="20">
                <Plus />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建商机Dialog -->
    <el-dialog v-model="showAddOpportunityDialog" title="新建商机" width="600px" :close-on-click-modal="false">
      <el-alert type="info" :closable="false" style="margin-bottom: 16px">
        为经销商创建商机，记录具体的销售机会
      </el-alert>

      <el-form :model="opportunityForm" label-width="120px">
        <el-form-item label="经销商" required>
          <el-select
            v-model="opportunityForm.dealerId"
            placeholder="请选择经销商"
            filterable
            :loading="dealerLoading"
            style="width: 100%"
            @filter-change="(keyword: string) => loadDealerList(keyword)"
          >
            <el-option
              v-for="dealer in dealerList"
              :key="dealer.dealerId"
              :label="`${dealer.dealerName}（${dealer.dealerCode}）`"
              :value="dealer.dealerId"
            >
              <div style="display: flex; align-items: center; justify-content: space-between">
                <span>{{ dealer.dealerName }}</span>
                <span style="color: #8492a6; font-size: 13px">{{ dealer.dealerCode }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商机名称" required>
          <el-input v-model="opportunityForm.opportunityName" placeholder="请输入商机名称，如：首批进货订单" />
        </el-form-item>
        <el-form-item label="商机阶段">
          <el-select v-model="opportunityForm.stage" style="width: 100%">
            <el-option label="线索" value="lead" />
            <el-option label="谈判中" value="negotiation" />
            <el-option label="方案" value="proposal" />
            <el-option label="赢单" value="closing" />
          </el-select>
        </el-form-item>
        <el-form-item label="商机金额">
          <el-input-number v-model="opportunityForm.amount" :min="0" :precision="2" style="width: 100%" />
        </el-form-item>
        <el-form-item label="成功概率">
          <el-slider v-model="opportunityForm.probability" :min="0" :max="100" :step="5" show-input />
        </el-form-item>
        <el-form-item label="预计成交日期">
          <el-date-picker
            v-model="opportunityForm.expectedCloseDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择预计成交日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="负责人">
          <el-select
            v-model="opportunityForm.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}）`"
              :value="user.userId"
            >
              <div style="display: flex; align-items: center; justify-content: space-between">
                <span>{{ user.nickName }}</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-item label="产品名称">
          <el-input v-model="opportunityForm.productName" placeholder="请输入产品名称（可选）" />
        </el-form-item>
        <el-form-item label="商机描述">
          <el-input v-model="opportunityForm.description" type="textarea" :rows="3" placeholder="请输入商机描述（可选）" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showAddOpportunityDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitOpportunity">
          创建商机
        </el-button>
      </template>
    </el-dialog>

    <!-- 商机详情Dialog -->
    <el-dialog v-model="showDetailDialog" title="商机详情" width="600px" :close-on-click-modal="false">
      <el-form label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商机名称">
              <span>{{ currentOpportunity?.opportunityName || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经销商">
              <span>{{ currentOpportunity?.dealerName || '--' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商机阶段">
              <el-tag :type="currentOpportunity?.stage === 'closing' ? 'success' : currentOpportunity?.stage === 'lead' ? 'info' : 'warning'" size="small">
                {{ currentOpportunity?.stageName || currentOpportunity?.stage || '--' }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag type="primary" size="small" effect="plain">
                {{ currentOpportunity?.statusName || '进行中' }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商机金额">
              <span class="amount-value">{{ currentOpportunity?.amount ? `¥${Number(currentOpportunity.amount).toLocaleString()}` : '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成功概率">
              <el-progress :percentage="currentOpportunity?.probability || 0" :stroke-width="6" style="width: 120px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人">
              <span>{{ currentOpportunity?.ownerUserName || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计成交日期">
              <span>{{ currentOpportunity?.expectedCloseDate || '--' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品名称">
              <span>{{ currentOpportunity?.productName || '--' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{ currentOpportunity?.createTime || '--' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商机描述">
          <span>{{ currentOpportunity?.description || '--' }}</span>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showDetailDialog = false">
          关闭
        </el-button>
        <el-button type="primary" @click="openEditDialog">
          <el-icon><Edit /></el-icon> 编辑
        </el-button>
        <el-button type="danger" @click="handleDeleteOpportunity">
          <el-icon><Delete /></el-icon> 删除
        </el-button>
      </template>
    </el-dialog>

    <!-- 编辑商机Dialog -->
    <el-dialog v-model="showEditDialog" title="编辑商机" width="600px" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="经销商" required>
          <el-select
            v-model="editForm.dealerId"
            placeholder="请选择经销商"
            filterable
            :loading="dealerLoading"
            style="width: 100%"
            @filter-change="(keyword: string) => loadDealerList(keyword)"
          >
            <el-option
              v-for="dealer in dealerList"
              :key="dealer.dealerId"
              :label="`${dealer.dealerName}（${dealer.dealerCode}）`"
              :value="dealer.dealerId"
            >
              <div style="display: flex; align-items: center; justify-content: space-between">
                <span>{{ dealer.dealerName }}</span>
                <span style="color: #8492a6; font-size: 13px">{{ dealer.dealerCode }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商机名称" required>
          <el-input v-model="editForm.opportunityName" placeholder="请输入商机名称" />
        </el-form-item>
        <el-form-item label="商机阶段">
          <el-select v-model="editForm.stage" style="width: 100%">
            <el-option label="线索" value="lead" />
            <el-option label="谈判中" value="negotiation" />
            <el-option label="方案" value="proposal" />
            <el-option label="赢单" value="closing" />
          </el-select>
        </el-form-item>
        <el-form-item label="商机金额">
          <el-input-number v-model="editForm.amount" :min="0" :precision="2" style="width: 100%" />
        </el-form-item>
        <el-form-item label="成功概率">
          <el-slider v-model="editForm.probability" :min="0" :max="100" :step="5" show-input />
        </el-form-item>
        <el-form-item label="预计成交日期">
          <el-date-picker
            v-model="editForm.expectedCloseDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择预计成交日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="负责人">
          <el-select
            v-model="editForm.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}）`"
              :value="user.userId"
            >
              <div style="display: flex; align-items: center; justify-content: space-between">
                <span>{{ user.nickName }}</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-item label="产品名称">
          <el-input v-model="editForm.productName" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="商机描述">
          <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="请输入商机描述" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showEditDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitEdit">
          保存修改
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

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

.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; }
}

.pipeline-section {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.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;
}

.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;
  }
}

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

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

  .toolbar-left,
  .toolbar-right {
    width: 100%;
  }

  .pipeline-tabs {
    flex-wrap: wrap;
  }
}
</style>