<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { Button, Card, message, notification, Space, Form, Input, Drawer } from 'ant-design-vue';
import { ref } from 'vue';

import { useContentsPositionStore } from '@vben/stores';
const contentsPositionStore = useContentsPositionStore();

const drawerVisible = ref(false);

const showDrawer = () => {
  drawerVisible.value = true;
};

const closeDrawer = () => {
  drawerVisible.value = false;
};

type NotificationType = 'error' | 'info' | 'success' | 'warning';

function info() {
  message.info('How many roads must a man walk down');
}

function error() {
  message.error({
    content: 'Once upon a time you dressed so fine',
    duration: 2500,
  });
}

function warning() {
  message.warning('How many roads must a man walk down');
}
function success() {
  message.success('Cause you walked hand in hand With another man in my place');
}

function notify(type: NotificationType) {
  notification[type]({
    duration: 2500,
    message: '说点啥呢',
    type,
  });
}
</script>

<template>
  <Page
    description="支持多语言，主题功能集成切换等"
    title="Ant Design Vue组件使用演示"
  >
    <Card class="mb-5" title="设置">
      <Form layout="inline">
        <Form.Item label="JC 投注">
          <Input placeholder="请输入JC投注" />
        </Form.Item>
        <Form.Item label="JC 返点">
          <Input placeholder="请输入JC返点" />
        </Form.Item>
      </Form>
    </Card>
    <Card class="mb-5" title="按钮">
      <Space>
        <Button>Default</Button>
        <Button type="primary"> Primary </Button>
        <Button> Info </Button>
        <Button danger> Error </Button>
      </Space>
    </Card>
    <Card class="mb-5" title="Message">
      <Space>
        <Button @click="info"> 信息 </Button>
        <Button danger @click="error"> 错误 </Button>
        <Button @click="warning"> 警告 </Button>
        <Button @click="success"> 成功 </Button>
      </Space>
    </Card>

    <Card class="mb-5" title="Notification">
      <Space>
        <Button @click="notify('info')"> 信息 </Button>
        <Button danger @click="notify('error')"> 错误 </Button>
        <Button @click="notify('warning')"> 警告 </Button>
        <Button @click="notify('success')"> 成功 </Button>
      </Space>
    </Card>

    <Card class="mb-5" title="底部抽屉">
      <Space>
        <Button type="primary" @click="showDrawer">打开底部抽屉</Button>
      </Space>
    </Card>

    <Drawer
      title="底部抽屉"
      placement="bottom"
      :visible="drawerVisible"
      @close="closeDrawer"
    >
      <div style="padding: 20px">
        <h3>抽屉内容</h3>
        <p>这里可以放置任何内容</p>
      </div>
    </Drawer>
  </Page>
</template>
