<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="button-group-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="button-group-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="button-group-demo-hero">
          <XtfText class="button-group-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" />
          <XtfText class="button-group-demo-title" level="display" color="inverse" text="Button Group" />
          <XtfText class="button-group-demo-intro" level="caption" color="inverse" text="组织同类按钮，统一控制排列、间距、尺寸与宽度。" />
        </view>

        <view class="button-group-demo-section">
          <XtfText class="button-group-demo-section-title" level="h3" text="水平排列" />
          <XtfText class="button-group-demo-section-desc" level="caption" color="secondary" text="默认按水平方向排列按钮。" />
          <XtfButtonGroup>
            <XtfButton label="新建" />
            <XtfButton label="编辑" type="light" />
            <XtfButton label="删除" type="outline" theme="danger" />
          </XtfButtonGroup>
        </view>

        <view class="button-group-demo-section">
          <XtfText class="button-group-demo-section-title" level="h3" text="垂直排列" />
          <XtfText class="button-group-demo-section-desc" level="caption" color="secondary" text="垂直方向使用顶部间距分隔相邻按钮。" />
          <XtfButtonGroup direction="vertical">
            <XtfButton label="继续" />
            <XtfButton label="稍后处理" type="light" />
            <XtfButton label="取消" type="ghost" theme="info" />
          </XtfButtonGroup>
        </view>

        <view class="button-group-demo-section">
          <XtfText class="button-group-demo-section-title" level="h3" text="自定义间距" />
          <XtfText class="button-group-demo-section-desc" level="caption" color="secondary" text="gap 支持数字 rpx 值和带单位字符串。" />
          <view class="button-group-demo-example">
            <XtfButtonGroup :gap="8">
              <XtfButton label="紧凑 A" size="sm" />
              <XtfButton label="紧凑 B" size="sm" type="light" />
            </XtfButtonGroup>
          </view>
          <XtfButtonGroup gap="32rpx">
            <XtfButton label="宽松 A" size="sm" />
            <XtfButton label="宽松 B" size="sm" type="outline" />
          </XtfButtonGroup>
        </view>

        <view class="button-group-demo-section">
          <XtfText class="button-group-demo-section-title" level="h3" text="尺寸继承与覆盖" />
          <XtfText class="button-group-demo-section-desc" level="caption" color="secondary" text="子按钮继承组尺寸，显式 size 可覆盖继承值。" />
          <XtfButtonGroup size="sm">
            <XtfButton label="继承 Small" />
            <XtfButton label="覆盖 Large" size="lg" type="light" />
          </XtfButtonGroup>
        </view>

        <view class="button-group-demo-section">
          <XtfText class="button-group-demo-section-title" level="h3" text="Block 均分" />
          <XtfText class="button-group-demo-section-desc" level="caption" color="secondary" text="水平 block 组占满容器，子按钮按相同比例分配宽度。" />
          <XtfButtonGroup block :gap="12">
            <XtfButton label="返回" type="outline" />
            <XtfButton label="保存" theme="success" />
            <XtfButton label="提交" />
          </XtfButtonGroup>
        </view>
        <view class="button-group-demo-section">
          <XtfText level="h3" text="动态操作栏" />
          <button id="basic-group-direction" @click="vertical = !vertical">切换方向</button>
          <button id="basic-group-reverse" @click="actions.reverse()">反转顺序</button>
          <button id="basic-group-remove" @click="actions.shift()">删除首项</button>
          <button id="basic-group-reset" @click="actions = ['保存', '预览', '发布']; vertical = false; lastAction = ''">恢复操作</button>
          <button id="basic-group-size" @click="small = !small">切换继承尺寸</button>
          <XtfButtonGroup id="basic-group" :direction="vertical ? 'vertical' : 'horizontal'" :size="small ? 'sm' : 'md'" gap="12px" block>
            <XtfButton v-for="action in actions" :key="action" :label="action" @click="lastAction = action" />
          </XtfButtonGroup>
          <text id="basic-group-result">{{ actions.join(' / ') }} · {{ lastAction }}</text>
          <XtfButtonGroup size="sm" :gap="8"><XtfButton label="外层" /><XtfButtonGroup size="xs" :gap="4"><XtfButton label="内层 A" /><XtfButton label="内层 B" /></XtfButtonGroup></XtfButtonGroup>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfButtonGroup from "@/uni_modules/xtf-linkuiunix/components/xtf-button-group/xtf-button-group.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const actions = ref(['保存', '预览', '发布']), vertical = ref(false), small = ref(true), lastAction = ref('')
</script>

<style>
.button-group-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.button-group-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.button-group-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.button-group-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.button-group-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.button-group-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.button-group-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.button-group-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.button-group-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.button-group-demo-example { display: flex; flex-direction: column; margin-bottom: 20rpx; }
</style>
