<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><scroll-view class="xtf-page-scroll" direction="vertical"><view class="sheet-demo-page xtf-page-scroll-content">
    <view class="sheet-demo-hero"><XtfText class="sheet-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="sheet-demo-title" level="display" color="inverse" text="Home Sheet" /><XtfText class="sheet-demo-intro" level="caption" color="inverse" text="多档位拖拽底部面板，适合首页与地图信息流。" /></view>
    <view class="sheet-demo-controls"><XtfButton id="sheet-collapse" class="sheet-demo-control" label="收起" type="light" @click="collapse" /><XtfButton id="sheet-expand" class="sheet-demo-control sheet-demo-control-last" label="展开" @click="expand" /></view>
    <XtfText class="sheet-demo-status" level="body" :text="'当前档位：' + sheetIndex.toString()" />
    <XtfHomeSheet ref="sheet" v-model="sheetIndex" :stops="compact ? [0.22, 0.7] : [0.22, 0.5, 0.88]" :draggable="draggable" :mask-closable="maskClosable" :lock-scroll-until-expanded="lockScroll" @change="recordChange" @update:modelValue="recordUpdate">
      <template #header><view class="sheet-demo-header"><XtfText level="h3" text="附近服务" /><XtfText level="caption" color="secondary" :text="changeText" /><view class="sheet-demo-controls"><XtfButton id="sheet-header-collapse" class="sheet-demo-control" size="sm" label="收起" type="light" @click="collapse" /><XtfButton id="sheet-header-expand" class="sheet-demo-control sheet-demo-control-last" size="sm" label="展开" @click="expand" /></view></view></template>
      <view class="sheet-demo-option"><text>允许拖动</text><switch id="sheet-draggable" :checked="draggable" @change="draggable = $event.detail.value" /></view>
      <view class="sheet-demo-option"><text>点击遮罩收起</text><switch id="sheet-mask" :checked="maskClosable" @change="maskClosable = $event.detail.value" /></view>
      <view class="sheet-demo-option"><text>展开后允许滚动</text><switch id="sheet-lock" :checked="lockScroll" @change="lockScroll = $event.detail.value" /></view>
      <view class="sheet-demo-option"><text>改为两档</text><switch id="sheet-stops" :checked="compact" @change="compact = $event.detail.value" /></view>
      <view class="sheet-demo-controls"><XtfButton id="sheet-open" class="sheet-demo-control" label="实例 open(1)" @click="sheet?.open(1)" /><XtfButton id="sheet-refresh" class="sheet-demo-control sheet-demo-control-last" label="重新测量" @click="sheet?.refresh()" /></view>
      <text id="sheet-events" class="sheet-demo-status">update:modelValue={{ updateText }} / change={{ changeText }}</text>
      <view v-for="item in services" :key="item" class="sheet-demo-service"><XtfText level="body" :text="item" /><XtfText level="caption" color="secondary" text="查看详情" /></view>
    </XtfHomeSheet>
  </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 XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfHomeSheet from "@/uni_modules/xtf-linkuiunix/components/xtf-home-sheet/xtf-home-sheet.uvue"
const sheetIndex = ref(1)
const changeText = ref("可拖动手柄切换档位")
const updateText = ref("等待事件")
const sheet = ref<any>(null)
const draggable = ref(true)
const maskClosable = ref(true)
const lockScroll = ref(true)
const compact = ref(false)
const services = ["账单管理", "资金账户", "消费统计", "报销中心", "通知设置", "帮助中心"]
function collapse(): void { sheet.value?.collapse() }
function expand(): void { sheet.value?.expand() }
function recordChange(index: number): void { changeText.value = JSON.stringify(index) }
function recordUpdate(index: number): void { updateText.value = JSON.stringify(index) }
</script>
<style>.sheet-demo-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; }</style>
<style>.sheet-demo-page { display: flex; flex: 1; flex-direction: column; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.sheet-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }.sheet-demo-kicker { color: #ffffff; font-size: 20rpx; }.sheet-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }.sheet-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; }.sheet-demo-controls { display: flex; flex-direction: row; margin-top: 24rpx; }.sheet-demo-control { flex: 1; }.sheet-demo-control-last { margin-left: 16rpx; }.sheet-demo-status { margin-top: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 26rpx; }.sheet-demo-header { display: flex; flex-direction: column; }.sheet-demo-service { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 96rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); }</style>
