<template>
  <div class="TUISwiper-demo">
    <h1 class="page-title">TUISwiper 轮播图</h1>
    <p class="page-description">用于循环播放一组图片或内容的组件。</p>

    <!-- Basic Swiper -->
    <DemoBlock
      title="基础用法"
      description="基础的轮播图用法，支持自动播放和手势滑动。"
      :code="basicCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :current="currentIndex1"
          :height="180"
          @change="handleChange"
          @click="handleClick"
          @update:current="currentIndex1 = $event"
        >
          <TUISwiperItem v-for="(item, index) in items" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- Autoplay Control -->
    <DemoBlock
      title="自动播放"
      description="通过 autoplay 属性控制是否自动播放，interval 属性设置播放间隔。"
      :code="autoplayCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :autoplay="autoplayEnabled"
          :interval="3000"
          :height="180"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 3)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>间隔: 3000ms</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
      <TUIButton size="small" @click="autoplayEnabled = !autoplayEnabled">
        {{ autoplayEnabled ? '停止自动播放' : '开始自动播放' }}
      </TUIButton>
    </DemoBlock>

    <!-- Vertical Swiper -->
    <DemoBlock
      title="垂直方向"
      description="设置 direction='vertical' 可以使轮播图垂直滚动。"
      :code="verticalCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          direction="vertical"
          :height="180"
          :autoplay="false"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 3)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>垂直方向滑动</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- No Loop Swiper -->
    <DemoBlock
      title="禁用循环"
      description="设置 loop=false 禁用循环播放。到达边界时采用橡皮筋阻力效果，拖动阻力平滑渐进，回弹动画自然流畅。"
      :code="noLoopCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :loop="false"
          :autoplay="false"
          :height="180"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 4)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>滑到边界试试 👆</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- Custom Duration -->
    <DemoBlock
      title="动画时长"
      description="通过 duration 属性自定义滑动动画的时长（毫秒）。"
      :code="durationCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :duration="800"
          :autoplay="false"
          :height="180"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 3)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>动画时长: 800ms</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- Custom Navigation -->
    <DemoBlock
      title="导航配置"
      description="通过 navigation 属性配置导航按钮和指示器的显示、位置和样式。"
      :code="navigationCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :navigation="{ 
            showNavBtn: true, 
            showIndicators: true, 
            indicatorPosition: 'top',
            indicatorStyle: {
              size: 10,
              gap: 12,
              activeColor: 'var(--uikit-color-theme-6)',
              inactiveColor: 'var(--uikit-color-theme-2)',
              borderRadius: 2,
              margin: 8
            }
          }"
          :height="180"
          :autoplay="false"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 3)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>自定义指示器样式</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- No Navigation -->
    <DemoBlock
      title="隐藏导航"
      description="设置 navigation=false 隐藏所有导航元素。"
      :code="noNavCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :navigation="false"
          :height="180"
          :autoplay="false"
        >
          <TUISwiperItem v-for="(item, index) in items.slice(0, 3)" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>无导航按钮和指示器</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
    </DemoBlock>

    <!-- External Controls -->
    <DemoBlock
      title="外部控制"
      description="通过 current 属性和 update:current 事件实现外部控制。"
      :code="controlCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :current="controlledIndex"
          :autoplay="false"
          :height="180"
          @update:current="controlledIndex = $event"
        >
          <TUISwiperItem v-for="(item, index) in items" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>当前索引: {{ controlledIndex }}</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
      <div class="control-buttons">
        <TUIButton size="small" :disabled="controlledIndex === 0" @click="controlledIndex--">
          上一页
        </TUIButton>
        <TUIButton size="small" :disabled="controlledIndex === items.length - 1" @click="controlledIndex++">
          下一页
        </TUIButton>
        <TUIButton size="small" type="primary" @click="controlledIndex = 0">
          回到首页
        </TUIButton>
      </div>
    </DemoBlock>

    <!-- Two Pages No Loop -->
    <DemoBlock
      title="两页场景"
      description="只有两页内容的轮播图示例，适用于登录/注册切换、设置页面等场景。"
      :code="twoPagesCode"
    >
      <div class="swiper-wrapper">
        <TUISwiper 
          :loop="false"
          :autoplay="false"
          :height="180"
          :current="twoPagesIndex"
          :navigation="{
            showIndicators: true,
            indicatorPosition: 'bottom',
            indicatorStyle: {
              size: 6,
              gap: 6,
              activeColor: 'var(--uikit-color-green-6)',
              inactiveColor: 'var(--uikit-color-green-2)',
              margin: 8
            }
          }"
          @update:current="twoPagesIndex = $event"
        >
          <TUISwiperItem v-for="(item, index) in twoPageItems" :key="index">
            <div class="demo-slide" :style="{ backgroundColor: item.color }">
              <div class="slide-content">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <p class="tip">在边界处滑动可感受阻力效果 👆</p>
              </div>
            </div>
          </TUISwiperItem>
        </TUISwiper>
      </div>
      <div class="control-buttons">
        <TUIButton size="small" :disabled="twoPagesIndex === 0" @click="twoPagesIndex = 0">
          第一页
        </TUIButton>
        <TUIButton size="small" :disabled="twoPagesIndex === 1" @click="twoPagesIndex = 1">
          第二页
        </TUIButton>
      </div>
    </DemoBlock>

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

      <!-- TUISwiper Props -->
      <div class="api-table-wrapper">
        <h3>TUISwiper 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">animation</div>
            <div class="api-table-cell">动画效果</div>
            <div class="api-table-cell">'slide'</div>
            <div class="api-table-cell">'slide'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">autoplay</div>
            <div class="api-table-cell">是否自动播放</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">current</div>
            <div class="api-table-cell">当前显示的滑块索引</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">0</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">direction</div>
            <div class="api-table-cell enum-type" title="'horizontal' | 'vertical'">滑动方向</div>
            <div class="api-table-cell">'horizontal' | 'vertical'</div>
            <div class="api-table-cell">'horizontal'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">duration</div>
            <div class="api-table-cell">滑动动画时长 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">300</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">height</div>
            <div class="api-table-cell">轮播容器高度</div>
            <div class="api-table-cell">number | string</div>
            <div class="api-table-cell">200</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">interval</div>
            <div class="api-table-cell">自动播放间隔时间 (ms)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">5000</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">loop</div>
            <div class="api-table-cell">是否循环播放</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">navigation</div>
            <div class="api-table-cell">导航配置</div>
            <div class="api-table-cell">boolean | SwiperNavigation</div>
            <div class="api-table-cell">true</div>
          </div>
        </div>
      </div>

      <!-- SwiperNavigation Type -->
      <div class="api-table-wrapper">
        <h3>SwiperNavigation 类型</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">showNavBtn</div>
            <div class="api-table-cell">是否显示导航按钮</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">showIndicators</div>
            <div class="api-table-cell">是否显示指示器</div>
            <div class="api-table-cell">boolean</div>
            <div class="api-table-cell">true</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">indicatorPosition</div>
            <div class="api-table-cell">指示器位置</div>
            <div class="api-table-cell">'bottom' | 'top' | 'left' | 'right'</div>
            <div class="api-table-cell">'bottom'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">indicatorStyle</div>
            <div class="api-table-cell">指示器样式配置</div>
            <div class="api-table-cell">SwiperIndicatorStyle</div>
            <div class="api-table-cell">-</div>
          </div>
        </div>
      </div>

      <!-- SwiperIndicatorStyle Type -->
      <div class="api-table-wrapper">
        <h3>SwiperIndicatorStyle 类型</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">size</div>
            <div class="api-table-cell">指示器大小 (px)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">8</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">gap</div>
            <div class="api-table-cell">指示器间距 (px)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">8</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">activeColor</div>
            <div class="api-table-cell">激活状态颜色</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">'var(--uikit-color-white-1)'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">inactiveColor</div>
            <div class="api-table-cell">非激活状态颜色</div>
            <div class="api-table-cell">string</div>
            <div class="api-table-cell">'var(--uikit-color-white-4)'</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">borderRadius</div>
            <div class="api-table-cell">圆角大小 (px，50表示圆形)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">50</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">margin</div>
            <div class="api-table-cell">指示器容器与边缘的距离 (px)</div>
            <div class="api-table-cell">number</div>
            <div class="api-table-cell">12</div>
          </div>
        </div>
      </div>

      <!-- TUISwiper Events -->
      <div class="api-table-wrapper">
        <h3>TUISwiper 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">update:current</div>
            <div class="api-table-cell">当前索引变化时触发</div>
            <div class="api-table-cell">(current: number) => void</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">change</div>
            <div class="api-table-cell">滑块切换时触发</div>
            <div class="api-table-cell">(current: number, context: { source: SwiperChangeSource }) => void</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">(index: number) => void</div>
          </div>
        </div>
      </div>

      <!-- SwiperChangeSource Type -->
      <div class="api-table-wrapper">
        <h3>SwiperChangeSource 类型</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">'autoplay'</div>
            <div class="api-table-cell">自动播放触发的切换</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">'touch'</div>
            <div class="api-table-cell">手势滑动触发的切换</div>
          </div>
          <div class="api-table-row">
            <div class="api-table-cell">'nav'</div>
            <div class="api-table-cell">导航按钮/指示器触发的切换</div>
          </div>
        </div>
      </div>

      <!-- TUISwiperItem -->
      <div class="api-table-wrapper">
        <h3>TUISwiperItem 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>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TUISwiper, TUISwiperItem, TUIButton } from '../src/components';
import type { SwiperChangeSource } from '../src/components/Swiper/type';
import DemoBlock from './components/DemoBlock.vue';

// Reactive data
const currentIndex1 = ref(0);
const controlledIndex = ref(0);
const autoplayEnabled = ref(true);
const twoPagesIndex = ref(0);

// Demo data
const items = [
  { title: '轮播图 1', description: '这是第一张轮播图', color: 'var(--uikit-color-red-5)' },
  { title: '轮播图 2', description: '这是第二张轮播图', color: 'var(--uikit-color-theme-5)' },
  { title: '轮播图 3', description: '这是第三张轮播图', color: 'var(--uikit-color-theme-6)' },
  { title: '轮播图 4', description: '这是第四张轮播图', color: 'var(--uikit-color-green-5)' },
  { title: '轮播图 5', description: '这是第五张轮播图', color: 'var(--uikit-color-orange-5)' },
];

// Two pages demo data
const twoPageItems = [
  { title: '页面 A', description: '这是第一个页面的内容', color: 'var(--uikit-color-theme-7)' },
  { title: '页面 B', description: '这是第二个页面的内容', color: 'var(--uikit-color-orange-6)' },
];

// Event handlers
function handleChange(current: number, context: { source: SwiperChangeSource }) {
  console.log('Swiper changed:', current, 'Source:', context.source);
}

function handleClick(index: number) {
  console.log('Swiper item clicked:', index);
}

// Code examples
const basicCode = `<template>
  <TUISwiper 
    :current="currentIndex"
    :height="180"
    @change="handleChange"
    @click="handleClick"
    @update:current="currentIndex = $event"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide" :style="{ backgroundColor: item.color }">
        {{ item.title }}
      </div>
    </TUISwiperItem>
  </TUISwiper>
</template>

<script setup>
import { ref } from 'vue';
import { TUISwiper, TUISwiperItem } from '@tencentcloud/uikit-base-component-vue3';

const currentIndex = ref(0);
const items = [
  { title: '轮播图 1', color: 'var(--uikit-color-red-5)' },
  { title: '轮播图 2', color: 'var(--uikit-color-theme-5)' },
  { title: '轮播图 3', color: 'var(--uikit-color-theme-6)' },
];
<\/script>`;

const autoplayCode = `<template>
  <TUISwiper 
    :autoplay="true"
    :interval="3000"
    :height="180"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const verticalCode = `<template>
  <TUISwiper 
    direction="vertical"
    :height="180"
    :autoplay="false"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const noLoopCode = `<template>
  <TUISwiper 
    :loop="false"
    :autoplay="false"
    :height="180"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const durationCode = `<template>
  <TUISwiper 
    :duration="800"
    :autoplay="false"
    :height="180"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const navigationCode = `<template>
  <TUISwiper 
    :navigation="{
      showNavBtn: true,
      showIndicators: true,
      indicatorPosition: 'top',
      indicatorStyle: {
        size: 10,
        gap: 12,
        activeColor: 'var(--uikit-color-theme-6)',
        inactiveColor: 'var(--uikit-color-theme-2)',
        borderRadius: 2,
        margin: 8
      }
    }"
    :height="180"
    :autoplay="false"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const noNavCode = `<template>
  <TUISwiper 
    :navigation="false"
    :height="180"
    :autoplay="false"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
</template>`;

const controlCode = `<template>
  <TUISwiper 
    :current="controlledIndex"
    :autoplay="false"
    :height="180"
    @update:current="controlledIndex = $event"
  >
    <TUISwiperItem v-for="(item, index) in items" :key="index">
      <div class="slide">{{ item.title }}</div>
    </TUISwiperItem>
  </TUISwiper>
  
  <button @click="controlledIndex--">上一页</button>
  <button @click="controlledIndex++">下一页</button>
</template>

<script setup>
import { ref } from 'vue';
const controlledIndex = ref(0);
<\/script>`;

const twoPagesCode = `<template>
  <TUISwiper 
    :loop="false"
    :autoplay="false"
    :height="180"
    :current="twoPagesIndex"
    :navigation="{
      showIndicators: true,
      indicatorPosition: 'bottom',
      indicatorStyle: {
        size: 6,
        gap: 6,
        activeColor: 'var(--uikit-color-green-6)',
        inactiveColor: 'var(--uikit-color-green-2)',
        margin: 8
      }
    }"
    @update:current="twoPagesIndex = $event"
  >
    <TUISwiperItem v-for="(item, index) in twoPageItems" :key="index">
      <div class="slide" :style="{ backgroundColor: item.color }">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </TUISwiperItem>
  </TUISwiper>
  
  <button :disabled="twoPagesIndex === 0" @click="twoPagesIndex = 0">
    第一页
  </button>
  <button :disabled="twoPagesIndex === 1" @click="twoPagesIndex = 1">
    第二页
  </button>
</template>

<script setup>
import { ref } from 'vue';
import { TUISwiper, TUISwiperItem } from '@tencentcloud/uikit-base-component-vue3';

const twoPagesIndex = ref(0);
const twoPageItems = [
  { title: '页面 A', description: '这是第一个页面的内容', color: 'var(--uikit-color-theme-7)' },
  { title: '页面 B', description: '这是第二个页面的内容', color: 'var(--uikit-color-orange-6)' },
];
<\/script>`;
</script>

<style scoped lang="scss">
.TUISwiper-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);

  @media (max-width: 768px) {
    font-size: 22px;
  }
}

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

  @media (max-width: 768px) {
    margin: 0 0 20px;
    font-size: 13px;
  }
}

.swiper-wrapper {
  width: 100%;
  max-width: 600px;
}

.demo-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.slide-content {
  text-align: center;
  color: white;
  padding: 16px;

  h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 4px var(--bg-color-element-mask);

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

  p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
    text-shadow: 0 1px 2px var(--bg-color-element-mask);

    @media (max-width: 768px) {
      font-size: 12px;
    }

    &.tip {
      margin-top: 4px;
      font-size: 12px;
      opacity: 0.7;
      font-style: italic;

      @media (max-width: 768px) {
        font-size: 10px;
      }
    }
  }
}

.control-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

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

  @media (max-width: 768px) {
    margin-top: 32px;
    padding-top: 24px;
  }

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

    @media (max-width: 768px) {
      font-size: 18px;
      margin: 0 0 16px;
    }
  }

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

    @media (max-width: 768px) {
      margin: 16px 0 8px;
      font-size: 14px;
    }
  }
}

.api-table-wrapper {
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

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

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

  @media (max-width: 768px) {
    border-radius: 6px;
  }

  .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);

    @media (max-width: 768px) {
      padding: 10px 12px;
      font-size: 12px;
    }

    &: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;

      @media (max-width: 768px) {
        font-size: 11px;
      }
    }

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