<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <view class="drawer-demo-page">
      <scroll-view class="drawer-demo-scroll" direction="vertical">
        <view class="drawer-demo-body">
          <text class="drawer-demo-title">Drawer 抽屉</text>
          <text class="drawer-demo-heading">方向</text>
          <view class="drawer-demo-actions">
            <view v-for="item in positions" :key="item" class="drawer-demo-action"><XtfButton :id="'drawer-direction-' + item" :label="item" type="outline" block @click="openDirection(item)" /></view>
          </view>
          <text class="drawer-demo-heading">尺寸</text>
          <view class="drawer-demo-actions">
            <view v-for="item in sizes" :key="item" class="drawer-demo-action"><XtfButton :id="'drawer-size-' + item" :label="item" :type="size == item ? 'solid' : 'outline'" block @click="size = item" /></view>
          </view>
          <view class="drawer-demo-row"><text class="drawer-demo-label">遮罩</text><switch id="drawer-overlay" :checked="overlay" @change="overlay = $event.detail.value" /></view>
          <view class="drawer-demo-row"><text class="drawer-demo-label">点击遮罩关闭</text><switch id="drawer-overlay-close" :checked="overlayClose" @change="overlayClose = $event.detail.value" /></view>
          <view class="drawer-demo-row"><text class="drawer-demo-label">关闭按钮</text><switch id="drawer-closeable" :checked="closeable" @change="closeable = $event.detail.value" /></view>
          <view class="drawer-demo-row"><text class="drawer-demo-label">底部插槽</text><switch id="drawer-footer" :checked="footer" @change="footer = $event.detail.value" /></view>
          <view class="drawer-demo-row"><text class="drawer-demo-label">关闭拦截</text><switch id="drawer-block" :checked="blocked" @change="blocked = $event.detail.value" /></view>
          <view class="drawer-demo-actions">
            <view class="drawer-demo-action"><XtfButton id="drawer-open-model" label="v-model 打开" block @click="model = true" /></view>
            <view class="drawer-demo-action"><XtfButton id="drawer-open-show" label="show 打开" block @click="show = true" /></view>
            <view class="drawer-demo-action"><XtfButton id="drawer-custom" label="自定义 240px" type="outline" block @click="openCustom" /></view>
            <view class="drawer-demo-action"><XtfButton id="drawer-invalid" label="无效方向回退" type="outline" block @click="openDirection('invalid')" /></view>
          </view>
          <text id="drawer-state" class="drawer-demo-state">model={{ model }} / show={{ show }} / {{ position }} / {{ size }}</text>
          <text id="drawer-events" class="drawer-demo-state">{{ events }}</text>
          <text id="drawer-counts" class="drawer-demo-state">open={{ opens }} opened={{ opened }} close={{ closes }} closed={{ closed }}</text>
        </view>
      </scroll-view>
      <XtfDrawer v-model="model" :position="position" :size="size" :width="width" :height="height" title="订单筛选"
        :overlay="overlay" :close-on-click-overlay="overlayClose" :closeable="closeable" :before-close="beforeClose"
        @open="record('open')" @opened="record('opened')" @close="record('close')" @closed="record('closed')"
        @update:show="record('update:show=' + $event)" @update:modelValue="record('update:modelValue=' + $event)">
        <view class="drawer-demo-content">
          <text class="drawer-demo-label">订单状态</text>
          <view class="drawer-demo-actions">
            <view v-for="item in filters" :key="item" class="drawer-demo-action"><XtfButton :id="'drawer-filter-' + item" :label="item" :type="filter == item ? 'solid' : 'outline'" block @click="filter = item" /></view>
          </view>
          <XtfButton id="drawer-reopen" label="关闭后立即重开" type="outline" @click="reopen" />
          <view class="drawer-demo-spacer"></view>
          <XtfButton id="drawer-body-close" label="关闭" @click="model = false" />
          <text v-for="row in 16" :key="row" class="drawer-demo-item">订单 {{ row }} · {{ filter }}</text>
          <text id="drawer-slot-end" class="drawer-demo-label">订单列表结束</text>
        </view>
        <template v-if="footer" #footer><XtfButton id="drawer-confirm" :label="'确认：' + filter" block @click="model = false" /></template>
      </XtfDrawer>
      <XtfDrawer :show="show" :model-value="undefined" position="bottom" size="sm" title="show 绑定" :show-handle="false"
        @update:show="show = $event" @open="record('show:open')" @closed="record('show:closed')">
        <view class="drawer-demo-content"><text class="drawer-demo-label">当前筛选：{{ filter }}</text><XtfButton id="drawer-show-close" label="完成" block @click="show = false" /></view>
      </XtfDrawer>
    </view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { nextTick, onUnmounted, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfDrawer from "@/uni_modules/xtf-linkuiunix/components/xtf-drawer/xtf-drawer.uvue"

const positions = ["left", "right", "top", "bottom"]
const sizes = ["sm", "md", "lg"]
const filters = ["全部", "待付款", "已完成"]
const model = ref(false)
const show = ref(false)
const position = ref("right")
const size = ref("md")
const width = ref("78vw")
const height = ref("62vh")
const overlay = ref(true)
const overlayClose = ref(true)
const closeable = ref(true)
const footer = ref(true)
const blocked = ref(false)
const filter = ref("全部")
const events = ref("")
const opens = ref(0)
const opened = ref(0)
const closes = ref(0)
const closed = ref(0)
let timer = 0
function record(value: string): void {
  if (value == "open") opens.value++
  if (value == "opened") opened.value++
  if (value == "close") closes.value++
  if (value == "closed") closed.value++
  events.value = (events.value + " > " + value).slice(-240)
}
function beforeClose(_: UTSJSONObject): boolean {
  if (blocked.value) record("blocked")
  return !blocked.value
}
function openDirection(value: string): void { position.value = value; model.value = true }
function openCustom(): void { size.value = ""; width.value = "240px"; height.value = "240px"; model.value = true }
function reopen(): void {
  clearTimeout(timer)
  model.value = false
  nextTick(() => { timer = setTimeout(() => { model.value = true }, 80) })
}
onUnmounted(() => { clearTimeout(timer) })
</script>

<style>
.drawer-demo-page { display: flex; flex: 1; flex-direction: column; background-color: var(--xtf-color-page, #f1f5f9); }
.drawer-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; }
.drawer-demo-body { display: flex; flex-direction: column; padding: 20px; }
.drawer-demo-title { color: var(--xtf-color-text, #0f172a); font-size: 24px; font-weight: 700; }
.drawer-demo-heading { margin-top: 20px; margin-bottom: 10px; color: var(--xtf-color-text, #334155); font-size: 16px; font-weight: 700; }
.drawer-demo-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.drawer-demo-action { display: flex; flex-direction: column; width: 48%; margin-bottom: 10px; }
.drawer-demo-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; }
.drawer-demo-label { color: var(--xtf-color-text-secondary, #334155); font-size: 14px; margin-bottom: 12px; }
.drawer-demo-state { margin-top: 12px; color: var(--xtf-color-text-secondary, #64748b); font-size: 12px; }
.drawer-demo-content { display: flex; flex-direction: column; }
.drawer-demo-item { margin-top: 16px; color: var(--xtf-color-text-secondary, #475569); font-size: 14px; }
.drawer-demo-spacer { display: flex; flex-direction: column; height: 12px; }
</style>
