<script setup lang="ts">
import type { WorkbenchProjectItem } from '../typing';
import { Card, CardContent, CardHeader, CardTitle } from '@vben-core/shadcn-ui';

interface Props {
  items: WorkbenchProjectItem[];
  title: string;
}

defineOptions({
  name: 'WorkbenchProject',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});

defineEmits(['click']);
</script>

<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-0">
      <div class="border-border w-full border-b border-r border-t p-5 transition-all hover:shadow-xl">
        <div class="flex w-full">
          <div class="text-foreground/80 leading-2  flex h-4 p-1 md:w-1/2">
            <span class="font-bold">总充值金额:</span>
          </div>
          <div class="text-foreground/80 leading-2 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.charge">
                <slot name="charge"></slot>
              </span>
            </div>
          </div>
        </div>
        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">最大充值金额:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.maxCharge">
                <slot name="maxCharge"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">场景:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.AreaId">
                <slot name="AreaId"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">注册时间:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.RegisterTime">
                <slot name="RegisterTime"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">最后登录:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.logintime">
                <slot name="logintime"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">累计在线:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.Cumulative">
                <slot name="Cumulative"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">今日累计在线:</span>
          </div>
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.TodayCumulative">
                <slot name="TodayCumulative"></slot>
              </span>
            </div>
          </div>
        </div>

        <div class="flex w-full">
          <div class="text-foreground/80 leading-2 mt-3 flex h-4 p-1 md:w-1/2">
            <span class="font-bold">邀请码:</span>
          </div>
          <div class="text-foreground/80 leading-2 text-shadow mt-3 flex h-4 justify-start p-1 md:w-1/2">
            <div class="Value">
              <span v-if="$slots.Code">
                <slot name="Code"></slot>
              </span>
            </div>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</template>

<style lang="scss" scoped>
.Value {
  text-align: center;
}
</style>
