<template>
  <page-container title="Button 按钮">
    <template #content>
      标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
    </template>
    <h-card :bordered="false">
      <!-- 基础按钮 -->
      <h-row :gutter="16">
        <h-col :sm="24" :md="12">
          <h-card title="按钮类型" class="pro-examples-button">
            <h-button type="primary">Primary</h-button>
            <h-button>Default</h-button>
            <h-button type="dashed">Dashed</h-button>
            <h-button danger>Danger</h-button>
            <h-config-provider :auto-insert-space-in-button="false">
              <h-button type="primary">按钮</h-button>
            </h-config-provider>
            <h-button type="primary">按钮</h-button>
            <h-button type="link">Link</h-button>
          </h-card>
        </h-col>
        <h-col :sm="24" :md="12">
          <h-card title="按钮尺寸" class="pro-examples-button pro-examples-button-size">
            <h-radio-group :value="state.size" @change="handleSizeChange">
              <h-radio-button value="large">Large</h-radio-button>
              <h-radio-button value="default">Default</h-radio-button>
              <h-radio-button value="small">Small</h-radio-button>
            </h-radio-group>
            <br />
            <br />
            <h-button type="primary" :size="state.size">Primary</h-button>
            <h-button :size="state.size">Normal</h-button>
            <h-button type="dashed" :size="state.size">Dashed</h-button>
            <h-button danger :size="state.size">Danger</h-button>
            <h-button type="link" :size="state.size">Link</h-button>
            <br />
            <h-button type="primary" :size="state.size">
              <template #icon>
                <download-outlined />
              </template>
            </h-button>
            <h-button type="primary" shape="circle" :size="state.size">
              <template #icon>
                <download-outlined />
              </template>
            </h-button>
            <h-button type="primary" shape="round" :size="state.size">
              <template #icon>
                <download-outlined />
              </template>
              Download
            </h-button>
            <h-button type="primary" shape="round" :size="state.size">
              <template #icon>
                <download-outlined />
              </template>
            </h-button>
            <h-button type="primary" :size="state.size">
              <template #icon>
                <download-outlined />
              </template>
              Download
            </h-button>
          </h-card>
        </h-col>
      </h-row>
      <!-- 状态按钮 -->
      <h-row :gutter="16">
        <h-col :sm="24" :md="12">
          <h-card title="不可用状态" class="pro-examples-button pro-examples-button-disabled">
            <h-button type="primary">Primary</h-button>
            <h-button type="primary" disabled>Primary(disabled)</h-button>
            <br />
            <h-button>Default</h-button>
            <h-button disabled>Default(disabled)</h-button>
            <br />
            <h-button type="dashed">Dashed</h-button>
            <h-button type="dashed" disabled>Dashed(disabled)</h-button>
            <br />
            <h-button type="link">Link</h-button>
            <h-button type="link" disabled>Link(disabled)</h-button>
            <div
              :style="{
                padding: '8px 8px 0 8px',
                background: 'rgb(190, 200, 200)',
              }"
            >
              <h-button ghost>Ghost</h-button>
              <h-button ghost disabled>Ghost(disabled)</h-button>
            </div>
          </h-card>
        </h-col>
        <h-col :sm="24" :md="12">
          <h-card title="加载中状态" class="pro-examples-button pro-examples-button-loading">
            <h-button type="primary" loading>Loading</h-button>
            <h-button type="primary" size="small" loading>Loading</h-button>
            <br />
            <h-button type="primary" :loading="state.loading" @mouseenter="enterLoading">
              mouseenter me!
            </h-button>
            <h-button
              type="primary"
              icon="poweroff"
              :loading="state.iconLoading"
              @click="enterIconLoading"
            >
              延迟1s
            </h-button>
            <br />
            <h-button type="primary" loading />
            <h-button type="primary" shape="circle" loading />
            <h-button danger shape="round" loading />
          </h-card>
        </h-col>
      </h-row>
      <!-- 特殊按钮 -->
      <h-row :gutter="16">
        <h-col :sm="24" :md="12">
          <h-card title="多个按钮组合" class="pro-examples-button">
            <h-button type="primary">Primary</h-button>
            <h-button>secondary</h-button>
            <h-dropdown>
              <template #overlay>
                <h-menu @click="handleMenuClick">
                  <h-menu-item key="1">1st item</h-menu-item>
                  <h-menu-item key="2">2nd item</h-menu-item>
                  <h-menu-item key="3">3rd item</h-menu-item>
                </h-menu>
              </template>
              <h-button>
                Actions
                <down-outlined />
              </h-button>
            </h-dropdown>
          </h-card>
        </h-col>
        <h-col :sm="24" :md="12">
          <h-card title="block 按钮" class="pro-examples-button-block">
            <h-button type="primary" block>Primary</h-button>
            <h-button block>Default</h-button>
            <h-button type="dashed" block>Dashed</h-button>
            <h-button danger block>Danger</h-button>
            <h-button type="link" block>Link</h-button>
          </h-card>
        </h-col>
      </h-row>
    </h-card>
  </page-container>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { DownOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import type { SizeType } from 'ant-design-vue/es/config-provider';
import type { RadioChangeEvent } from 'ant-design-vue';

export default defineComponent({
  name: 'ButtonExample',
  setup() {
    const state = reactive({
      loading: false,
      iconLoading: false as boolean | { delay: number },
      size: 'large' as SizeType,
    });
    const enterLoading = () => {
      state.loading = true;
    };
    const enterIconLoading = () => {
      state.iconLoading = { delay: 1000 };
    };
    const handleMenuClick = () => {};
    const handleSizeChange = (e: RadioChangeEvent) => {
      state.size = (e.target as HTMLInputElement).value as SizeType;
    };
    return {
      state,

      enterLoading,
      enterIconLoading,
      handleMenuClick,
      handleSizeChange,
    };
  },
  components: {
    DownOutlined,
    DownloadOutlined,
  },
});
</script>

<style lang="less" scoped>
.ant-card {
  margin-bottom: 24px;
}
.pro-examples-button {
  :deep(.ant-btn) {
    margin-right: 8px;
    margin-bottom: 12px;
  }
}
.pro-examples-button-group {
  > h4 {
    margin: 16px 0;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;

    &:first-child {
      margin-top: 0;
    }
  }

  :deep(.ant-btn-group) {
    margin-right: 8px;
  }
}
.pro-examples-button-block {
  :deep(.ant-btn) {
    margin-bottom: 8px;
  }
}
</style>
