<script lang="ts" setup>
import { Loading, Page, Spinner } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { refAutoReset } from '@vueuse/core';
import { Button, Card, Spin } from 'antdv-next';

const spinning = refAutoReset(false, 3000);
const loading = refAutoReset(false, 3000);

const spinningV = refAutoReset(false, 3000);
const loadingV = refAutoReset(false, 3000);
</script>
<template>
  <Page
    title="Vben Loading"
    description="加载中状态组件。这个组件可以为其它作为容器的组件添加一个加载中的遮罩层。使用它们时，容器需要relative定位。"
  >
    <Card title="Antd Spin">
      <template #actions>这是Antd 组件库自带的Spin组件演示</template>
      <Spin :spinning="spinning" description="加载中...">
        <Button type="primary" @click="spinning = true">显示Spin</Button>
      </Spin>
    </Card>

    <Card title="Vben Loading" v-loading="loadingV" class="mt-4">
      <template #extra>
        <Button type="primary" @click="loadingV = true">
          v-loading 指令
        </Button>
      </template>
      <template #actions>
        Loading组件可以设置文字，并且也提供了icon插槽用于替换加载图标。
      </template>
      <div class="flex gap-4">
        <div class="size-40">
          <Loading
            :spinning="loading"
            text="正在加载..."
            class="flex-center size-full"
          >
            <Button type="primary" @click="loading = true">默认动画</Button>
          </Loading>
        </div>
        <div class="size-40">
          <Loading :spinning="loading" class="flex-center size-full">
            <Button type="primary" @click="loading = true">自定义动画1</Button>
            <template #icon>
              <IconifyIcon
                icon="svg-spinners:ring-resize"
                class="size-10 text-primary"
              />
            </template>
          </Loading>
        </div>
        <div class="size-40">
          <Loading :spinning="loading" class="flex-center size-full">
            <Button type="primary" @click="loading = true">自定义动画2</Button>
            <template #icon>
              <IconifyIcon
                icon="svg-spinners:bars-scale"
                class="size-10 text-primary"
              />
            </template>
          </Loading>
        </div>
      </div>
    </Card>

    <Card
      title="Vben Spinner"
      v-spinning="spinningV"
      class="mt-4 overflow-hidden"
      :styles="{
        body: {
          position: 'relative',
          overflow: 'hidden',
        },
      }"
    >
      <template #extra>
        <Button type="primary" @click="spinningV = true">
          v-spinning 指令
        </Button>
      </template>
      <template #actions>
        Spinner组件是Loading组件的一个特例，只有一个固定的统一样式。
      </template>
      <Spinner :spinning="spinning" class="flex-center size-40">
        <Button type="primary" @click="spinning = true">显示Spinner</Button>
      </Spinner>
    </Card>
  </Page>
</template>
