users/components/data-integration/data-preview.tsx

"use client"

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function DataPreview() {
  // 模拟数据
  const previewData = [
    {
      id: "1",
      name: "张三",
      phone: "13812345678",
      idCard: "3101********1234",
      imei: "86723*****5432",
      address: "上海市浦东新区张江高科技园区",
      registerDate: "2023-01-15",
      lastActive: "2023-07-12",
      source: "CRM系统",
      status: "matched",
    },
    {
      id: "2",
      name: "李四",
      phone: "13987654321",
      idCard: "4401********5678",
      imei: "35871*****7890",
      address: "广州市天河区珠江新城",
      registerDate: "2022-11-20",
      lastActive: "2023-07-10",
      source: "电商平台",
      status: "matched",
    },
    {
      id: "3",
      name: "王五",
      phone: "13765432198",
      idCard: "1101********7890",
      imei: "",
      address: "北京市海淀区中关村",
      registerDate: "2023-03-05",
      lastActive: "2023-07-15",
      source: "营销活动",
      status: "partial",
    },
    {
      id: "4",
      name: "赵六",
      phone: "13698765432",
      idCard: "",
      imei: "86723*****1234",
      address: "深圳市南山区科技园",
      registerDate: "2023-05-18",
      lastActive: "2023-07-14",
      source: "APP注册",
      status: "partial",
    },
    {
      id: "5",
      name: "钱七",
      phone: "",
      idCard: "",
      imei: "",
      address: "杭州市西湖区",
      registerDate: "2023-06-30",
      lastActive: "2023-07-01",
      source: "社交媒体",
      status: "unmatched",
    },
  ]

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "matched":
        return <Badge className="bg-green-100 text-green-800">已匹配</Badge>
      case "partial":
        return <Badge className="bg-yellow-100 text-yellow-800">部分匹配</Badge>
      case "unmatched":
        return <Badge className="bg-red-100 text-red-800">未匹配</Badge>
    }
  }

  return (
    <div className="space-y-4">
      <Tabs defaultValue="preview">
        <TabsList>
          <TabsTrigger value="preview">数据预览</TabsTrigger>
          <TabsTrigger value="matched">已匹配</TabsTrigger>
          <TabsTrigger value="partial">部分匹配</TabsTrigger>
          <TabsTrigger value="unmatched">未匹配</TabsTrigger>
        </TabsList>

        <TabsContent value="preview" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                  <TableHead>匹配状态</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.name}</TableCell>
                    <TableCell>{item.phone || "-"}</TableCell>
                    <TableCell>{item.idCard || "-"}</TableCell>
                    <TableCell>{item.imei || "-"}</TableCell>
                    <TableCell>{item.address}</TableCell>
                    <TableCell>{item.registerDate}</TableCell>
                    <TableCell>{item.lastActive}</TableCell>
                    <TableCell>{item.source}</TableCell>
                    <TableCell>{getStatusBadge(item.status)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="matched" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "matched")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="partial" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "partial")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="unmatched" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "unmatched")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}