<template>
  <bz-page-wrapper title="BzButton 示例">
    <a-row :gutter="[20, 20]">
      <a-col :xl="10" :lg="24">
        <a-card title="BzButton Color">
          <div class="my-4">
            <h3>success</h3>
            <div class="py-4">
              <bz-button color="success"> 成功 </bz-button>
              <bz-button color="success" class="ml-4" disabled> 禁用 </bz-button>
              <bz-button color="success" class="ml-4" loading> loading </bz-button>
              <bz-button color="success" type="link" class="ml-4"> link </bz-button>
              <bz-button color="success" type="link" class="ml-4" loading> loading link </bz-button>
              <bz-button color="success" type="link" class="ml-4" disabled>
                disabled link
              </bz-button>
            </div>
          </div>

          <div class="my-4">
            <h3>warning</h3>
            <bz-button color="warning"> 警告 </bz-button>
            <bz-button color="warning" class="ml-4" disabled> 禁用 </bz-button>
            <bz-button color="warning" class="ml-4" loading> loading </bz-button>
            <bz-button color="warning" type="link" class="ml-4"> link </bz-button>
            <bz-button color="warning" type="link" class="ml-4" loading> loading link </bz-button>
            <bz-button color="warning" type="link" class="ml-4" disabled> disabled link </bz-button>
          </div>

          <div class="my-4">
            <h3>error</h3>
            <bz-button color="error"> 错误 </bz-button>
            <bz-button color="error" class="ml-4" disabled> 禁用 </bz-button>
            <bz-button color="error" class="ml-4" loading> loading </bz-button>
            <bz-button color="error" type="link" class="ml-4"> link </bz-button>
            <bz-button color="error" type="link" class="ml-4" loading> loading link </bz-button>
            <bz-button color="error" type="link" class="ml-4" disabled> disabled link </bz-button>
          </div>

          <div class="my-4">
            <h3>ghost</h3>
            <bz-button ghost color="success" class="ml-4"> 幽灵成功 </bz-button>
            <bz-button ghost color="warning" class="ml-4"> 幽灵警告 </bz-button>
            <bz-button ghost color="error" class="ml-4"> 幽灵错误 </bz-button>
            <bz-button ghost type="dashed" color="warning" class="ml-4"> 幽灵警告dashed </bz-button>
            <bz-button ghost danger class="ml-4"> 幽灵危险 </bz-button>
          </div>
        </a-card>
      </a-col>
      <a-col :xl="14" :lg="24">
        <a-card title="BzButton Types">
          <div class="my-4">
            <h3>primary</h3>
            <bz-button type="primary" preIcon="mdi:page-next-outline"> 主按钮 </bz-button>
            <bz-button type="primary" class="ml-4" disabled> 禁用 </bz-button>
            <bz-button type="primary" class="ml-4" danger preIcon="mdi:page-next-outline">
              危险
            </bz-button>
            <bz-button type="primary" class="ml-4" loading> loading </bz-button>
            <bz-button type="link" class="ml-4"> link </bz-button>
            <bz-button type="link" class="ml-4" loading> loading link </bz-button>
            <bz-button type="link" class="ml-4" disabled> disabled link </bz-button>
          </div>

          <div class="my-4">
            <h3>default</h3>
            <bz-button type="default"> 默认 </bz-button>
            <bz-button type="default" class="ml-4" disabled> 禁用 </bz-button>
            <bz-button type="default" class="ml-4" danger> 危险 </bz-button>
            <bz-button type="default" class="ml-4" loading> loading </bz-button>
            <bz-button type="link" class="ml-4"> link </bz-button>
            <bz-button type="link" class="ml-4" loading> loading link </bz-button>
            <bz-button type="link" class="ml-4" disabled> disabled link </bz-button>
          </div>

          <div class="my-4">
            <h3>dashed</h3>
            <bz-button type="dashed"> dashed </bz-button>
            <bz-button type="dashed" class="ml-4" disabled> 禁用 </bz-button>
            <bz-button type="dashed" class="ml-4" danger> 危险 </bz-button>
            <bz-button type="dashed" class="ml-4" loading> loading </bz-button>
          </div>

          <div class="my-4">
            <h3>ghost 常规幽灵按钮通常用于有色背景下</h3>
            <div class="py-4" style="background-color: #efefef">
              <bz-button ghost type="primary" class="ml-4"> 幽灵主要 </bz-button>
              <bz-button ghost type="default" class="ml-4"> 幽灵默认 </bz-button>
              <bz-button ghost type="dashed" class="ml-4"> 幽灵dashed </bz-button>
              <bz-button ghost type="primary" class="ml-4" disabled> 禁用 </bz-button>
              <bz-button ghost type="primary" class="ml-4" loading> loading </bz-button>
            </div>
            <!-- antd 按钮不能同时使用ghost和link -->
            <!-- <bz-button ghost type="link" class="ml-4"> link </bz-button>
            <bz-button ghost type="link" class="ml-4" loading> loading link </bz-button>
            <bz-button ghost type="link" class="ml-4" disabled> disabled link </bz-button> -->
          </div>
        </a-card>
      </a-col>
    </a-row>
  </bz-page-wrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Card, Row, Col } from 'ant-design-vue';
  export default defineComponent({
    components: { ACard: Card, ARow: Row, ACol: Col },
  });
</script>
