<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <scroll-view class="action-sheet-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="action-sheet-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <XtfText level="title" text="Action Sheet" />
        <view class="action-sheet-demo-desc"><XtfText level="body" color="secondary" text="声明式动作面板：布局、关闭策略、滚动和事件。" /></view>

        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="服务调用与背景滚动" />
          <XtfButton id="as-service-open" label="打开模糊遮罩服务面板" @click="openService" />
          <XtfText id="as-service-state" level="caption" :text="serviceState" />
        </view>
        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="基础" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-basic-open" label="打开基础面板" @click="basicShow = true"><template #prefix><XtfIcon name="more" size="sm" theme="inverse" /></template></XtfButton></view></view>
        </view>
        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="标题、图标和状态" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton type="outline" label="危险和禁用项" @click="richShow = true" /></view></view>
        </view>
        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="四种布局" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-layout-card" size="sm" type="light" label="Card" @click="openLayout('card')" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton id="as-layout-native" size="sm" type="light" label="Native" @click="openLayout('native')" /></view></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-layout-compact" size="sm" type="light" label="Compact" @click="openLayout('compact')" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton id="as-layout-system" size="sm" type="light" label="System" @click="openLayout('system')" /></view></view>
        </view>
        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="滚动与关闭控制" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="visibleCount" @click="scrollShow = true" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="取消和关闭按钮" @click="closeShow = true" /></view></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="无遮罩" @click="noOverlayShow = true" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="遮罩不可关闭" @click="protectedShow = true" /></view></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="选择不关闭" @click="keepOpenShow = true" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton size="sm" type="outline" label="同步关闭拦截" @click="interceptShow = true" /></view></view>
        </view>
        <view class="action-sheet-demo-section">
          <XtfText level="h4" text="层级与自定义颜色" />
          <XtfText level="caption" color="secondary" text="side-gap 统一左右间距；side-gap-left / side-gap-right 可分别控制两侧。" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton type="light" label="对称 32rpx" @click="openSymmetricGap" /></view><view class="action-sheet-demo-gap action-sheet-demo-item"></view><view class="action-sheet-demo-item"><XtfButton type="light" label="左 24 / 右 64" @click="openAsymmetricGap" /></view></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton type="outline" label="自定义动作" @click="customShow = true" /></view></view>
        </view>
        <view id="as-style-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="样式优先级与共享对象" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-style-open" label="打开样式场景" @click="openStyle" /></view></view>
          <view id="as-style-source" class="action-sheet-demo-output"><XtfText level="caption" :text="styleSnapshot" /></view>
        </view>
        <view id="as-initial-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="条件挂载初始显示" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-initial-mount" label="挂载并打开" @click="mountInitial" /></view></view>
          <view id="as-initial-result" class="action-sheet-demo-output"><XtfText level="caption" :text="initialResult" /></view>
        </view>
        <view id="as-rapid-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="快速开关" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-rapid-run" label="运行快速开关" :disabled="rapidRunning" @click="runRapid" /></view></view>
          <view id="as-rapid-result" class="action-sheet-demo-output"><XtfText level="caption" :text="rapidResult" /></view>
        </view>
        <view id="as-state-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="禁用、忙碌与选择策略" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfText level="caption" text="禁用第一项" /></view><switch class="action-sheet-demo-item" id="as-disabled-toggle" :checked="stateDisabled" @change="stateDisabled = $event.detail.value" /></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfText level="caption" text="业务忙碌" /></view><switch class="action-sheet-demo-item" id="as-loading-toggle" :checked="stateLoading" @change="stateLoading = $event.detail.value" /></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfText level="caption" text="选择后关闭" /></view><switch class="action-sheet-demo-item" id="as-close-action-toggle" :checked="stateAutoClose" @change="stateAutoClose = $event.detail.value" /></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-state-open" label="打开状态场景" @click="stateShow = true" /></view></view>
        </view>
        <view id="as-guard-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="同步 Guard 拒绝" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfText level="caption" text="允许关闭" /></view><switch class="action-sheet-demo-item" id="as-guard-toggle" :checked="guardAllowed" @change="guardAllowed = $event.detail.value" /></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-guard-open" label="打开 Guard 场景" @click="guardShow = true" /></view></view>
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-guard-reset" type="outline" label="外部关闭" @click="guardShow = false" /></view></view>
          <view id="as-guard-result" class="action-sheet-demo-output"><XtfText level="caption" :text="guardResult" /></view>
        </view>
        <view id="as-method-scene" class="action-sheet-demo-section">
          <XtfText level="h4" text="实例边界与布局动画" />
          <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-method-check" type="outline" label="核对实例能力" @click="checkMethods" /></view></view>
          <view class="action-sheet-demo-row"><view v-for="value in animations" :key="value" class="action-sheet-demo-item"><XtfButton :id="'as-animation-' + value" size="sm" type="light" :label="value" @click="openAnimation(value)" /></view></view>
          <view id="as-method-result" class="action-sheet-demo-output"><XtfText level="caption" :text="methodResult" /></view>
        </view>
        <view id="as-result" class="action-sheet-demo-result"><XtfText level="caption" :text="result" /></view>
        <view class="action-sheet-demo-row"><view class="action-sheet-demo-item"><XtfButton id="as-log-clear" size="sm" type="outline" label="清空日志" @click="logs = []" /></view></view>
        <view id="as-event-log" class="action-sheet-demo-output"><XtfText level="caption" :text="logs.join('\n')" /></view>
      </view>
    </scroll-view>

    <XtfActionSheet ref="sheetRef" v-model:show="basicShow" :actions="basicActions" @select="handleSelect" @open="recordOpen" @opened="recordOpened" @close="recordClose" @closed="recordClosed" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="richShow" title="管理订单" description="不可恢复的操作会以危险状态显示" :actions="richActions" :show-close="true" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="layoutShow" :title="layoutTitle" description="相同数据在不同布局中的呈现" :actions="basicActions" :layout="layout" :animation="animation" @select="handleSelect" @cancel="recordCancel" @open="recordEvent('layout', 'open')" @opened="recordEvent('layout', 'opened')" @close="recordEvent('layout', 'close')" @closed="recordEvent('layout', 'closed')" />
    <XtfActionSheet v-model:show="scrollShow" title="长列表" description="最多显示三项，其余项在 scroll-view 中滚动" :actions="longActions" :visible-count="3" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="closeShow" title="关闭入口" description="可使用右上角关闭图标或取消按钮" :actions="basicActions" :show-close="true" :show-cancel="true" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="noOverlayShow" title="无遮罩层" :actions="basicActions" :overlay="false" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="protectedShow" title="遮罩不可关闭" description="请使用取消按钮关闭" :actions="basicActions" :close-on-click-overlay="false" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="keepOpenShow" title="选择后保持打开" description="closeOnClickAction 为 false" :actions="basicActions" :close-on-click-action="false" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="interceptShow" title="同步关闭拦截" description="取消会被 beforeClose 阻止" :actions="basicActions" :before-close="blockCancel" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="gapShow" title="带侧边距的面板" :description="gapDescription" :actions="basicActions" :side-gap="gap" :side-gap-left="gapLeft" :side-gap-right="gapRight" :z-index="2600" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="customShow" title="自定义动作颜色" description="颜色、图标颜色和文字样式直接应用到动作项" :actions="customActions" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="styleShow" title="样式优先级" :description="styleSnapshot" :actions="styleActions" :visible-count="3" :close-on-click-action="false" @select="selectStyle" @open="recordEvent('style', 'open')" @opened="recordStyleOpened" @cancel="recordCancel" />
    <XtfActionSheet v-if="initialMounted" v-model:show="initialShow" title="初始 show=true" :actions="basicActions" @open="recordInitial('open')" @opened="recordInitial('opened')" @close="recordInitial('close')" @closed="unmountInitial" @select="handleSelect" @cancel="recordCancel" />
    <XtfActionSheet v-model:show="rapidShow" title="快速切换" :actions="basicActions" :duration="240" @open="recordEvent('rapid', 'open')" @opened="rapidOpened" @close="recordEvent('rapid', 'close')" @closed="rapidClosed" @select="handleSelect" />
    <XtfActionSheet v-model:show="stateShow" title="状态与关闭策略" :actions="stateActions" :close-on-click-action="stateAutoClose" @select="handleSelect" @cancel="recordCancel" @update:show="recordEvent('state', 'update:show=' + $event)" @open="recordStateOpen" />
    <XtfActionSheet v-model:show="guardShow" title="同步关闭校验" :actions="basicActions" :overlay="false" show-close :before-close="guardClose" @select="handleSelect" @cancel="recordCancel" @update:show="recordEvent('guard', 'update:show=' + $event)" />
    <XtfActionSheet service @select="handleServiceSelect" />
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, nextTick, onBeforeUnmount, ref } from "vue"
import { actionSheetManager } from "@/uni_modules/xtf-linkuiunix/components/xtf-action-sheet/service.uts"
import XtfActionSheet from "@/uni_modules/xtf-linkuiunix/components/xtf-action-sheet/xtf-action-sheet.uvue"
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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"

const serviceState = computed((): string => JSON.stringify(actionSheetManager.state.value))
function openService(): void {
  actionSheetManager.show({ title: "service-sheet", overlayBlur: 5, lockScroll: true, closeOnClickAction: false, visibleCount: 3, actions: [
    { key: "lock", label: "切换背景滚动锁定" }, { key: "close", label: "关闭服务面板" },
    { key: "disabled", label: "禁用操作", disabled: true }, ...longActions
  ] })
}
function handleServiceSelect(payload: UTSJSONObject): void {
  const action = payload["action"] as UTSJSONObject
  if (action["key"] == "lock") actionSheetManager.update({ lockScroll: actionSheetManager.state.value["lockScroll"] != true })
  if (action["key"] == "close") actionSheetManager.close()
  handleSelect(payload)
}
const basicShow = ref(false)
const richShow = ref(false)
const layoutShow = ref(false)
const scrollShow = ref(false)
const closeShow = ref(false)
const noOverlayShow = ref(false)
const protectedShow = ref(false)
const keepOpenShow = ref(false)
const interceptShow = ref(false)
const gapShow = ref(false)
const gap = ref(32)
const gapLeft = ref(-1)
const gapRight = ref(-1)
const gapDescription = computed((): string => {
  const left = gapLeft.value >= 0 ? gapLeft.value : gap.value
  const right = gapRight.value >= 0 ? gapRight.value : gap.value
  return "当前左侧 " + left.toString() + "rpx，右侧 " + right.toString() + "rpx"
})
const customShow = ref(false)
const layout = ref("card")
const layoutTitle = ref("Card 布局")
const result = ref("等待操作")
const logs = ref([] as string[])
let logSequence = 0
const sheetRef = ref<UTSJSONObject | null>(null)
const styleShow = ref(false)
const sharedTextStyle = ref({ fontWeight: "700" } as UTSJSONObject)
const priorityTextStyle = ref({ color: "#be185d", fontWeight: "700" } as UTSJSONObject)
const actionColors = ref(true)
const styleActions = computed(() => [
  { key: "shared-green", label: "共享样式 A", color: actionColors.value ? "#16a34a" : "", textStyle: sharedTextStyle.value },
  { key: "shared-blue", label: "共享样式 B", color: actionColors.value ? "#2563eb" : "", textStyle: sharedTextStyle.value },
  { key: "priority", label: "textStyle 优先", color: actionColors.value ? "#16a34a" : "", textStyle: priorityTextStyle.value },
  { key: "clear", label: "清除 / 恢复动作颜色" },
  { key: "clear-text", label: "清除 / 恢复 textStyle 颜色" }
])
const styleSnapshot = computed((): string => "shared=" + JSON.stringify(sharedTextStyle.value) + "; priority=" + JSON.stringify(priorityTextStyle.value) + "; action.color=" + (actionColors.value ? "green/blue" : "空"))
const initialMounted = ref(false)
const initialShow = ref(false)
const initialEvents = ref([] as string[])
const initialResult = ref("未挂载")
const rapidShow = ref(false)
const rapidRunning = ref(false)
const rapidResult = ref("未运行")
let rapidOpenCount = 0
let rapidClosedCount = 0
let rapidRunId = 0
const stateShow = ref(false)
const stateDisabled = ref(true)
const stateLoading = ref(true)
const stateAutoClose = ref(true)
const stateActions = computed(() => [
  { key: "disabled", label: "受禁用开关控制", disabled: stateDisabled.value },
  { key: "busy", label: stateLoading.value ? "业务处理中" : "业务已就绪", disabled: stateLoading.value },
  { key: "normal", label: "正常操作", description: "始终可选" }
])
const guardShow = ref(false)
const guardAllowed = ref(false)
const guardResult = ref("等待关闭请求")
const animation = ref("slide-up")
const animations = ["slide-up", "fade", "scale", "fade-up", "none"]
const methodResult = ref("未核对")

onBeforeUnmount(() => { rapidRunId += 1; actionSheetManager.close() })

function recordEvent(scene: string, event: string): void {
  logSequence += 1
  const line = logSequence.toString() + " [" + scene + "] " + event
  logs.value = logs.value.concat([line]).slice(-40)
  result.value = line
  console.log("[action-sheet-demo] " + line)
}

function openStyle(): void {
  styleShow.value = true
  recordEvent("style", styleSnapshot.value)
}

function recordStyleOpened(): void {
  recordEvent("style", "opened; shared-clean=" + (sharedTextStyle.value["color"] == null).toString() + "; " + styleSnapshot.value)
}

function selectStyle(event: UTSJSONObject): void {
  const action = event["action"] as UTSJSONObject
  if (action["key"] == "clear") actionColors.value = !actionColors.value
  if (action["key"] == "clear-text") {
    if (priorityTextStyle.value["color"] != null) delete priorityTextStyle.value["color"]
    else priorityTextStyle.value["color"] = "#be185d"
  }
  handleSelect(event)
  nextTick(() => { recordEvent("style", styleSnapshot.value) })
}

function mountInitial(): void {
  initialEvents.value = []
  initialResult.value = "等待 open → opened"
  initialShow.value = true
  initialMounted.value = true
}

function recordInitial(event: string): void {
  initialEvents.value = initialEvents.value.concat([event])
  initialResult.value = initialEvents.value.join(" → ")
  recordEvent("initial", event)
}

function unmountInitial(): void {
  recordInitial("closed")
  initialMounted.value = false
}

function runRapid(): void {
  if (rapidRunning.value) return
  rapidRunId += 1
  const runId = rapidRunId
  rapidRunning.value = true
  rapidOpenCount = 0
  rapidClosedCount = 0
  rapidResult.value = "运行中"
  rapidShow.value = true
  // 两次切换均短于 240ms，旧入场和旧退场完成事件都应失效。
  setTimeout(() => { if (runId == rapidRunId) rapidShow.value = false }, 40)
  setTimeout(() => { if (runId == rapidRunId) rapidShow.value = true }, 80)
  setTimeout(() => { if (runId == rapidRunId) rapidShow.value = false }, 420)
  setTimeout(() => {
    if (runId != rapidRunId) return
    rapidRunning.value = false
    rapidResult.value = (rapidOpenCount == 1 && rapidClosedCount == 1 && !rapidShow.value ? "PASS" : "FAIL") + ": opened=" + rapidOpenCount.toString() + ", closed=" + rapidClosedCount.toString() + ", show=" + rapidShow.value.toString()
    recordEvent("rapid", rapidResult.value)
  }, 760)
}

function rapidOpened(): void { rapidOpenCount += 1; recordEvent("rapid", "opened") }
function rapidClosed(): void { rapidClosedCount += 1; recordEvent("rapid", "closed") }

function recordStateOpen(): void {
  recordEvent("state", "disabled=" + stateDisabled.value.toString() + "; busy→disabled=" + stateLoading.value.toString() + "; closeOnClickAction=" + stateAutoClose.value.toString() + "; action loading/click/getmore 不属于现有契约")
}

function guardClose(context: UTSJSONObject): boolean {
  guardResult.value = "type=" + (context["type"] as string) + "; allowed=" + guardAllowed.value.toString() + "; index=" + JSON.stringify(context["index"])
  recordEvent("guard", guardResult.value)
  return guardAllowed.value
}

function checkMethods(): void {
  const instance = sheetRef.value
  const hasOpen = instance != null && typeof instance["open"] == "function"
  methodResult.value = "open=" + hasOpen.toString() + "; 当前声明式实例未暴露 open；参考 open(options) 仅 service 有效"
  recordEvent("methods", methodResult.value)
}

function openAnimation(value: string): void {
  animation.value = value
  layoutTitle.value = layout.value + " / " + value
  layoutShow.value = true
  recordEvent("layout", "layout=" + layout.value + "; animation=" + value)
}

const basicActions = [
  { key: "share", label: "分享", icon: "share" },
  { key: "favorite", name: "收藏", desc: "保存到常用操作", icon: "favorite" },
  { key: "download", label: "下载", icon: "download" }
]
const richActions = [
  { key: "copy", label: "复制订单号", description: "复制到剪贴板", icon: "download" },
  { key: "archive", label: "归档订单", icon: "favorite" },
  { key: "delete", label: "删除订单", description: "此操作不可撤销", icon: "error", danger: true },
  { key: "disabled", label: "当前不可用", description: "权限不足", icon: "info", disabled: true }
]
const longActions = [
  { key: "1", label: "操作 1", icon: "info" }, { key: "2", label: "操作 2", icon: "info" }, { key: "3", label: "操作 3", icon: "info" },
  { key: "4", label: "操作 4", icon: "info" }, { key: "5", label: "操作 5", icon: "info" }, { key: "6", label: "操作 6", icon: "info" }
]
const customActions = [
  { key: "success", label: "标记完成", description: "自定义绿色文字和图标", icon: "success", color: "#16a34a", iconColor: "#16a34a", textStyle: { fontWeight: "700" } as UTSJSONObject },
  { key: "warning", label: "稍后处理", description: "自定义橙色文字", icon: "warning", color: "#d97706", iconColor: "#d97706" }
]

function openLayout(value: string): void {
  layout.value = value
  layoutTitle.value = value + " 布局"
  layoutShow.value = true
  recordEvent("layout", "layout=" + value + "; animation=" + animation.value)
}

function openSymmetricGap(): void {
  gap.value = 32
  gapLeft.value = -1
  gapRight.value = -1
  gapShow.value = true
}

function openAsymmetricGap(): void {
  gap.value = 0
  gapLeft.value = 24
  gapRight.value = 64
  gapShow.value = true
}

function handleSelect(event: UTSJSONObject): void {
  const action = event["action"] as UTSJSONObject
  recordEvent("select", "index=" + JSON.stringify(event["index"]) + "; key=" + (action["key"] as string) + "; label=" + (action["label"] as string ?? action["name"] as string))
}

function blockCancel(context: UTSJSONObject): boolean {
  if (context["type"] as string == "cancel") {
    recordEvent("guard", "beforeClose: 已同步拦截取消")
    return false
  }
  return true
}

function recordOpen(): void { recordEvent("basic", "open") }
function recordOpened(): void { recordEvent("basic", "opened") }
function recordClose(): void { recordEvent("basic", "close") }
function recordClosed(): void { recordEvent("basic", "closed") }
function recordCancel(): void { recordEvent("cancel", "cancel") }
</script>

<style>
.action-sheet-demo-scroll { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.action-sheet-demo-page { display: flex; flex-direction: column; padding: 32rpx; background-color: var(--xtf-color-page, #f8fafc); }
.action-sheet-demo-desc { display: flex; flex-direction: column; margin-top: 12rpx; }
.action-sheet-demo-section { display: flex; flex-direction: column; margin-top: 32rpx; }
.action-sheet-demo-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 10rpx -6rpx -6rpx; }
.action-sheet-demo-item { margin: 6rpx; }
.action-sheet-demo-gap { display: flex; flex-direction: row; width: 16rpx; }
.action-sheet-demo-result { display: flex; flex-direction: column; margin-top: 32rpx; padding-bottom: 48rpx; }
.action-sheet-demo-output { display: flex; flex-direction: column; min-width: 0; margin-top: 16rpx; }
</style>
