lty/qy-lty-admin/components/props/export-cards-dialog.tsx

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { FileDown, Loader2 } from "lucide-react"

interface ExportCardsDialogProps {
  propId: string
}

export function ExportCardsDialog({ propId }: ExportCardsDialogProps) {
  const [open, setOpen] = useState(false)
  const [format, setFormat] = useState("csv")
  const [exportScope, setExportScope] = useState("all")
  const [includeHeaders, setIncludeHeaders] = useState(true)
  const [includeMetadata, setIncludeMetadata] = useState(true)
  const [isExporting, setIsExporting] = useState(false)

  const handleExport = async () => {
    setIsExporting(true)
    // 模拟导出操作
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsExporting(false)
    setOpen(false)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="border-purple-200 hover:bg-purple-50 hover:text-purple-700">
          <FileDown className="mr-2 h-4 w-4" />
          导出卡牌ID
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
            导出卡牌ID
          </DialogTitle>
          <DialogDescription>
            选择导出格式并下载道具 <span className="font-medium">{propId}</span> 的卡牌ID。
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <Label htmlFor="format">导出格式</Label>
            <Select value={format} onValueChange={setFormat}>
              <SelectTrigger id="format">
                <SelectValue placeholder="选择格式" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="csv">CSV文件</SelectItem>
                <SelectItem value="excel">Excel文件</SelectItem>
                <SelectItem value="pdf">PDF文件</SelectItem>
                <SelectItem value="json">JSON文件</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label>导出范围</Label>
            <RadioGroup value={exportScope} onValueChange={setExportScope} className="flex flex-col space-y-1">
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="all" id="all" />
                <Label htmlFor="all" className="font-normal">
                  所有卡牌ID
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="unused" id="unused" />
                <Label htmlFor="unused" className="font-normal">
                  未激活的卡牌ID
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="used" id="used" />
                <Label htmlFor="used" className="font-normal">
                  已激活的卡牌ID
                </Label>
              </div>
            </RadioGroup>
          </div>

          <div className="space-y-3 pt-2">
            <Label>导出选项</Label>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="headers"
                checked={includeHeaders}
                onCheckedChange={(checked) => setIncludeHeaders(!!checked)}
              />
              <Label htmlFor="headers" className="text-sm font-normal">
                包含表头
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="metadata"
                checked={includeMetadata}
                onCheckedChange={(checked) => setIncludeMetadata(!!checked)}
              />
              <Label htmlFor="metadata" className="text-sm font-normal">
                包含元数据（创建时间、批次信息等）
              </Label>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={isExporting}>
            取消
          </Button>
          <Button
            className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
            onClick={handleExport}
            disabled={isExporting}
          >
            {isExporting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                导出中...
              </>
            ) : (
              <>
                <FileDown className="mr-2 h-4 w-4" />
                导出
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}