<script setup lang="tsx">
const data = [
  {
    title: '电动汽车远程服务于管理系统技术规范',
    description: '',
    image: '1.png',
  },
  {
    title: '住宅装饰装修工程施工规范',
    description: '',
    image: '/2.jpg',
  },

]
</script>

<template>
  <div class="flex flex-col pt-20">
    <main class="grid flex-1 gap-4 p-4 overflow-auto md:grid-cols-2 lg:grid-cols-6">
      <div class="relative flex-col items-start hidden gap-8 md:flex">
        <form class="grid items-start w-full gap-6">
          <fieldset class="grid gap-6 p-4 border rounded-lg">
            <legend class="px-1 -ml-1 text-sm font-medium">
              搜索条件
            </legend>
            <div class="grid gap-3">
              <Label for="model">标准来源</Label>
              <Select>
                <SelectTrigger
                  id="model"
                  class="items-start [&_[data-description]]:hidden"
                >
                  <SelectValue placeholder="Select a model" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="genesis">
                    <div class="flex items-start gap-3 text-muted-foreground">
                      <Rabbit class="size-5" />
                      <div class="grid gap-0.5">
                        <p>
                          Neural
                          <span class="font-medium text-foreground">
                            Genesis
                          </span>
                        </p>
                        <p class="text-xs" data-description>
                          Our fastest model for general use cases.
                        </p>
                      </div>
                    </div>
                  </SelectItem>
                  <SelectItem value="explorer">
                    <div class="flex items-start gap-3 text-muted-foreground">
                      <Bird class="size-5" />
                      <div class="grid gap-0.5">
                        <p>
                          Neural
                          <span class="font-medium text-foreground">
                            Explorer
                          </span>
                        </p>
                        <p class="text-xs" data-description>
                          Performance and speed for efficiency.
                        </p>
                      </div>
                    </div>
                  </SelectItem>
                  <SelectItem value="quantum">
                    <div class="flex items-start gap-3 text-muted-foreground">
                      <Turtle class="size-5" />
                      <div class="grid gap-0.5">
                        <p>
                          Neural
                          <span class="font-medium text-foreground">
                            Quantum
                          </span>
                        </p>
                        <p class="text-xs" data-description>
                          The most powerful model for complex computations.
                        </p>
                      </div>
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div class="grid gap-3">
              <Label for="temperature">Temperature</Label>
              <Input id="temperature" type="number" placeholder="0.4" />
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="grid gap-3">
                <Label for="top-p">Top P</Label>
                <Input id="top-p" type="number" placeholder="0.7" />
              </div>
              <div class="grid gap-3">
                <Label for="top-k">Top K</Label>
                <Input id="top-k" type="number" placeholder="0.0" />
              </div>
            </div>
          </fieldset>
          <fieldset class="grid gap-6 p-4 border rounded-lg">
            <legend class="px-1 -ml-1 text-sm font-medium">
              Messages
            </legend>
            <div class="grid gap-3">
              <Label for="role">Role</Label>
              <Select default-value="system">
                <SelectTrigger>
                  <SelectValue placeholder="Select a role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="system">
                    System
                  </SelectItem>
                  <SelectItem value="user">
                    User
                  </SelectItem>
                  <SelectItem value="assistant">
                    Assistant
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div class="grid gap-3">
              <Label for="content">Content</Label>
              <Textarea
                id="content"
                placeholder="You are a..."
                class="min-h-[9.5rem]"
              />
            </div>
          </fieldset>
        </form>
      </div>
      <div class="relative flex h-full col-span-5 p-4">
        <div class="grid w-full grid-cols-2 gap-4 mx-auto md:grid-cols-3 lg:grid-cols-5">
          <Card v-for="item in data" :key="item.title" class="overflow-hidden">
            <CardContent class="p-0">
              <img :src="item.image" alt="news" class="w-full">
            </CardContent>
            <CardHeader>
              <CardTitle>{{ item.title }}</CardTitle>
              <CardDescription>{{ item.description }}</CardDescription>
            </CardHeader>
          </Card>
        </div>
      </div>
    </main>
  </div>
</template>
