<template>
  <div class="TUIButton-demo">
    <h1 class="page-title">TUIButton 按钮</h1>
    <p class="page-description">常用的操作按钮组件。</p>

    <!-- Button Types -->
    <DemoBlock
      title="按钮类型"
      description="按钮有三种类型：默认按钮、主要按钮和文本按钮。"
      :code="typeCode"
    >
      <TUIButton>默认按钮</TUIButton>
      <TUIButton type="primary">主要按钮</TUIButton>
      <TUIButton type="text">文本按钮</TUIButton>
    </DemoBlock>

    <!-- Button Colors -->
    <DemoBlock
      title="按钮颜色"
      description="按钮支持多种颜色：蓝色、绿色、红色、橙色、灰色。"
      :code="colorCode"
    >
      <TUIButton color="blue">蓝色按钮</TUIButton>
      <TUIButton type="primary" color="blue">蓝色主要</TUIButton>
      <TUIButton color="green">绿色按钮</TUIButton>
      <TUIButton type="primary" color="green">绿色主要</TUIButton>
      <TUIButton color="red">红色按钮</TUIButton>
      <TUIButton type="primary" color="red">红色主要</TUIButton>
      <TUIButton color="orange">橙色按钮</TUIButton>
      <TUIButton type="primary" color="orange">橙色主要</TUIButton>
      <TUIButton color="gray">灰色按钮</TUIButton>
      <TUIButton type="primary" color="gray">灰色主要</TUIButton>
    </DemoBlock>

    <!-- Button Sizes -->
    <DemoBlock
      title="按钮尺寸"
      description="按钮有四种尺寸：large、big、medium、small。"
      :code="sizeCode"
    >
      <TUIButton size="large">大型按钮</TUIButton>
      <TUIButton size="big">较大按钮</TUIButton>
      <TUIButton size="medium">中等按钮</TUIButton>
      <TUIButton size="small">小型按钮</TUIButton>
    </DemoBlock>

    <!-- Button Radius -->
    <DemoBlock
      title="按钮形状"
      description="通过 radius 属性设置按钮的圆角样式。"
      :code="radiusCode"
    >
      <TUIButton radius="round">圆角按钮</TUIButton>
      <TUIButton radius="circle">圆形按钮</TUIButton>
      <TUIButton radius="rect">方形按钮</TUIButton>
    </DemoBlock>

    <!-- Button with Icon -->
    <DemoBlock
      title="带图标的按钮"
      description="通过 icon 属性添加图标，iconPosition 控制图标位置。"
      :code="iconCode"
    >
      <TUIButton iconPosition="start" :icon="IconKickOut">踢出房间</TUIButton>
      <TUIButton :icon="IconSearch" iconPosition="end">搜索</TUIButton>
    </DemoBlock>

    <!-- Disabled Button -->
    <DemoBlock
      title="禁用状态"
      description="通过 disabled 属性禁用按钮。"
      :code="disabledCode"
    >
      <TUIButton disabled>禁用按钮</TUIButton>
      <TUIButton type="primary" disabled>禁用主要按钮</TUIButton>
      <TUIButton type="text" disabled>禁用文本按钮</TUIButton>
      <TUIButton color="red" disabled>禁用红色按钮</TUIButton>
    </DemoBlock>

    <!-- Loading Button -->
    <DemoBlock
      title="加载状态"
      description="通过 loading 属性显示加载状态。"
      :code="loadingCode"
    >
      <TUIButton loading>加载中</TUIButton>
      <TUIButton type="primary" loading>加载中</TUIButton>
      <TUIButton type="text" loading>加载中</TUIButton>
    </DemoBlock>

    <!-- Block Button -->
    <DemoBlock
      title="块级按钮"
      description="通过 block 属性使按钮占满容器宽度。"
      :code="blockCode"
    >
      <div style="width: 300px;">
        <TUIButton block>块级按钮</TUIButton>
        <TUIButton type="primary" block style="margin-top: 12px;">块级主要按钮</TUIButton>
      </div>
    </DemoBlock>

    <!-- API Documentation -->
    <section class="api-section">
      <h2>API</h2>

      <!-- Props -->
      <div class="api-table-wrapper">
        <h3>Props</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">属性名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">类型</div>
            <div class="api-table-cell">默认值</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">type</div>
            <div class="api-table-cell">按钮类型</div>
            <div class="api-table-cell">'primary' | 'default' | 'text'</div>
            <div class="api-table-cell">'default'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">color</div>
            <div class="api-table-cell">按钮颜色</div>
            <div class="api-table-cell">'blue' | 'green' | 'red' | 'orange' | 'gray'</div>
            <div class="api-table-cell">'blue'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">size</div>
            <div class="api-table-cell">按钮尺寸</div>
            <div class="api-table-cell">'large' | 'big' | 'medium' | 'small'</div>
            <div class="api-table-cell">'medium'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">radius</div>
            <div class="api-table-cell">按钮圆角样式</div>
            <div class="api-table-cell">'round' | 'circle' | 'rect'</div>
            <div class="api-table-cell">'round'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">icon</div>
            <div class="api-table-cell">图标组件或图标名称</div>
            <div class="api-table-cell">string | Component</div>
            <div class="api-table-cell">-</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">iconPosition</div>
            <div class="api-table-cell">图标位置</div>
            <div class="api-table-cell">'start' | 'end'</div>
            <div class="api-table-cell">'start'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">disabled</div>
            <div class="api-table-cell">是否禁用</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">loading</div>
            <div class="api-table-cell">是否显示加载状态</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">block</div>
            <div class="api-table-cell">是否块级按钮</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">autofocus</div>
            <div class="api-table-cell">是否自动聚焦</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">false</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">customClasses</div>
            <div class="api-table-cell">自定义 CSS 类名数组</div>
            <div class="api-table-cell">string[]</div>
            <div class="api-table-cell">[]</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">customStyle</div>
            <div class="api-table-cell">自定义样式对象</div>
            <div class="api-table-cell">CSSProperties</div>
            <div class="api-table-cell">{}</div>
          </div>
        </div>
      </div>

      <!-- Events -->
      <div class="api-table-wrapper">
        <h3>Events</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">事件名</div>
            <div class="api-table-cell">说明</div>
            <div class="api-table-cell">回调参数</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">click</div>
            <div class="api-table-cell">点击按钮时触发</div>
            <div class="api-table-cell">(event: MouseEvent) => void</div>
          </div>
        </div>
      </div>

      <!-- Slots -->
      <div class="api-table-wrapper">
        <h3>Slots</h3>
        <div class="api-table">
          <div class="api-table-header">
            <div class="api-table-cell">插槽名</div>
            <div class="api-table-cell">说明</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">default</div>
            <div class="api-table-cell">按钮内容</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">loading</div>
            <div class="api-table-cell">自定义加载状态内容</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { TUIButton } from '@/components';
import { IconSearch, IconKickOut } from '@/components/Icon';
import DemoBlock from './components/DemoBlock.vue';

// Code examples
const typeCode = `<template>
  <TUIButton>默认按钮</TUIButton>
  <TUIButton type="primary">主要按钮</TUIButton>
  <TUIButton type="text">文本按钮</TUIButton>
</template>`;

const colorCode = `<template>
  <TUIButton color="blue">蓝色按钮</TUIButton>
  <TUIButton type="primary" color="blue">蓝色主要</TUIButton>
  <TUIButton color="green">绿色按钮</TUIButton>
  <TUIButton type="primary" color="green">绿色主要</TUIButton>
  <TUIButton color="red">红色按钮</TUIButton>
  <TUIButton type="primary" color="red">红色主要</TUIButton>
</template>`;

const sizeCode = `<template>
  <TUIButton size="large">大型按钮</TUIButton>
  <TUIButton size="big">较大按钮</TUIButton>
  <TUIButton size="medium">中等按钮</TUIButton>
  <TUIButton size="small">小型按钮</TUIButton>
</template>`;

const radiusCode = `<template>
  <TUIButton radius="round">圆角按钮</TUIButton>
  <TUIButton radius="circle">圆形按钮</TUIButton>
  <TUIButton radius="rect">方形按钮</TUIButton>
</template>`;

const iconCode = `<template>
  <TUIButton iconPosition="start" :icon="IconKickOut">
    踢出房间
  </TUIButton>
  <TUIButton :icon="IconSearch" iconPosition="end">
    搜索
  </TUIButton>
</template>

<script setup>
import { IconSearch, IconKickOut } from '@tencentcloud/uikit-base-component-vue3';
<\/script>`;

const disabledCode = `<template>
  <TUIButton disabled>禁用按钮</TUIButton>
  <TUIButton type="primary" disabled>禁用主要按钮</TUIButton>
  <TUIButton type="text" disabled>禁用文本按钮</TUIButton>
</template>`;

const loadingCode = `<template>
  <TUIButton loading>加载中</TUIButton>
  <TUIButton type="primary" loading>加载中</TUIButton>
  <TUIButton type="text" loading>加载中</TUIButton>
</template>`;

const blockCode = `<template>
  <TUIButton block>块级按钮</TUIButton>
  <TUIButton type="primary" block>块级主要按钮</TUIButton>
</template>`;
</script>

<style scoped lang="scss">
.TUIButton-demo {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.page-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color-primary, #303133);
}

.page-description {
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--text-color-secondary, #606266);
  line-height: 1.6;
}

// API Documentation
.api-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--stroke-color-primary, #e4e7ed);

  h2 {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color-primary, #303133);
  }

  h3 {
    margin: 24px 0 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color-secondary, #606266);
  }
}

.api-table-wrapper {
  margin-bottom: 24px;
}

.api-table {
  border: 1px solid var(--stroke-color-primary, #e4e7ed);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-color-operate, #fff);

  .api-table-header {
    display: flex;
    background: var(--bg-color-default, #fafafa);
    border-bottom: 1px solid var(--stroke-color-primary, #e4e7ed);
    font-weight: 600;
    color: var(--text-color-secondary, #606266);
  }

  .api-table-row {
    display: flex;
    border-bottom: 1px solid var(--stroke-color-secondary, #ebeef5);

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: var(--list-color-hover, #f5f7fa);
    }
  }

  .api-table-cell {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-color-primary, #303133);

    &:first-child {
      flex: 0.8;
      font-weight: 500;
      color: var(--text-color-link, #409eff);
    }

    &:nth-child(2) {
      flex: 1.4;
    }

    &:nth-child(3) {
      flex: 1.2;
      color: var(--text-color-warning, #e6a23c);
      font-family: 'Monaco', 'Menlo', monospace;
      font-size: 13px;
    }

    &:last-child {
      flex: 0.6;
      color: var(--text-color-tertiary, #909399);
    }
  }
}
</style>
