<script setup lang="ts">
definePageMeta({ layout: 'admin' })
const { activeTab } = useNav()
activeTab.value = 'product-marketing'

// 销售数据
const salesData = ref([
  { month: '1月', orders: 245, revenue: 128.5, target: 120 },
  { month: '2月', orders: 312, revenue: 156.8, target: 130 },
  { month: '3月', orders: 278, revenue: 142.3, target: 135 },
])

const stats = ref([
  { label: '本月订单', value: 156, unit: '单', change: '+12%', icon: '📋', color: '#6366f1' },
  { label: '本月营收', value: 86.5, unit: '万', change: '+8%', icon: '💰', color: '#10b981' },
  { label: '新增客户', value: 23, unit: '家', change: '+15%', icon: '🏢', color: '#f59e0b' },
  { label: '平均单价', value: 5546, unit: '元', change: '-2%', icon: '💎', color: '#3b82f6' },
])

// 客户列表
const customers = ref([
  { id: 'C001', name: '比亚迪股份有限公司', industry: '汽车制造', contact: '李经理', phone: '0755-89888888', orderCount: 45, amount: 280.5, status: 'VIP' },
  { id: 'C002', name: '宁德时代新能源', industry: '新能源', contact: '王经理', phone: '0591-87654321', orderCount: 32, amount: 198.2, status: 'VIP' },
  { id: 'C003', name: '华为技术有限公司', industry: '电子通信', contact: '张经理', phone: '0755-28780808', orderCount: 28, amount: 156.8, status: '重点' },
  { id: 'C004', name: '富士康科技集团', industry: '电子制造', contact: '刘经理', phone: '0755-28129999', orderCount: 21, amount: 125.3, status: '普通' },
  { id: 'C005', name: '美的集团', industry: '家电制造', contact: '陈经理', phone: '0757-26608888', orderCount: 18, amount: 98.6, status: '重点' },
])

// 跟进记录
const followRecords = ref([
  { id: 1, customer: '比亚迪股份有限公司', content: '拜访客户，沟通轴承采购需求，预计月订单量增加30%', contact: '李经理', nextDate: '2026-04-15', status: '跟进中' },
  { id: 2, customer: '宁德时代新能源', content: '技术方案对接完成，等待客户内部评审', contact: '王经理', nextDate: '2026-04-12', status: '待联系' },
  { id: 3, customer: '华为技术有限公司', content: '完成样品交付，客户反馈良好', contact: '张经理', nextDate: '-', status: '已完成' },
])

const statusColor: Record<string, string> = {
  'VIP': 'purple',
  '重点': 'blue',
  '普通': 'default',
}
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">营销管理</h2>
      <a-space>
        <a-button @click="() => {}">导出数据</a-button>
        <a-button type="primary" @click="() => {}">
          <template #icon><PlusOutlined /></template>
          新建客户
        </a-button>
      </a-space>
    </div>

    <!-- 统计卡片 -->
    <a-row :gutter="[16, 16]" class="mb-6">
      <a-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.label">
        <div class="stat-card" :style="{ '--accent': stat.color }">
          <div class="stat-icon">{{ stat.icon }}</div>
          <div class="stat-body">
            <div class="stat-value">{{ stat.value }}<span class="stat-unit">{{ stat.unit }}</span></div>
            <div class="stat-label">{{ stat.label }}</div>
            <div :class="['stat-change', stat.change.startsWith('+') ? 'up' : 'down']">{{ stat.change }}</div>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20, 20]">
      <a-col :xs="24" :xl="16">
        <!-- 客户列表 -->
        <div class="card">
          <div class="card-title">客户列表</div>
          <a-table :dataSource="customers" :pagination="{ pageSize: 8 }" size="small" rowKey="id">
            <a-table-column title="客户编码" dataIndex="id" width="90" />
            <a-table-column title="客户名称" dataIndex="name" />
            <a-table-column title="行业" dataIndex="industry" width="100" />
            <a-table-column title="联系人" dataIndex="contact" width="80" />
            <a-table-column title="订单数" dataIndex="orderCount" width="80" align="center" />
            <a-table-column title="累计金额(万)" dataIndex="amount" width="110" align="right" />
            <a-table-column title="等级" dataIndex="status" width="80" align="center">
              <template #default="{ text }">
                <a-tag :color="statusColor[text]">{{ text }}</a-tag>
              </template>
            </a-table-column>
            <a-table-column title="操作" width="100" align="center">
              <template #default>
                <a-space>
                  <a>详情</a>
                  <a-divider type="vertical" />
                  <a>跟进</a>
                </a-space>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </a-col>

      <a-col :xs="24" :xl="8">
        <!-- 跟进记录 -->
        <div class="card">
          <div class="card-title">跟进记录</div>
          <div class="follow-list">
            <div v-for="record in followRecords" :key="record.id" class="follow-item">
              <div class="follow-header">
                <span class="follow-customer">{{ record.customer }}</span>
                <a-tag size="small" :color="record.status === '已完成' ? 'success' : record.status === '跟进中' ? 'processing' : 'warning'">
                  {{ record.status }}
                </a-tag>
              </div>
              <div class="follow-content">{{ record.content }}</div>
              <div class="follow-meta">
                <span><UserOutlined /> {{ record.contact }}</span>
                <span v-if="record.nextDate !== '-'"><CalendarOutlined /> 下次: {{ record.nextDate }}</span>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.page-container { padding: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin: 0; }

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent);
}
.stat-icon { font-size: 28px; }
.stat-value { font-size: 22px; font-weight: 700; color: #1f2937; }
.stat-unit { font-size: 12px; color: #9ca3af; margin-left: 2px; }
.stat-label { font-size: 12px; color: #9ca3af; margin: 2px 0; }
.stat-change { font-size: 12px; }
.stat-change.up { color: #10b981; }
.stat-change.down { color: #ef4444; }

.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
.card-title { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 16px; }

.follow-list { display: flex; flex-direction: column; gap: 12px; }
.follow-item { padding: 12px; background: #fafafa; border-radius: 8px; }
.follow-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.follow-customer { font-size: 13px; font-weight: 600; color: #374151; }
.follow-content { font-size: 12px; color: #6b7280; margin-bottom: 8px; line-height: 1.5; }
.follow-meta { display: flex; gap: 16px; font-size: 11px; color: #9ca3af; }
.follow-meta span { display: flex; align-items: center; gap: 4px; }

.mb-6 { margin-bottom: 20px; }
</style>
