<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <scroll-view class="menu-demo-scroll" direction="vertical" @scroll="menu?.close()">
      <view class="menu-demo-page">
        <text class="menu-demo-title">Dropdown Menu</text>
        <XtfDropdownMenu ref="menu" v-model:active-key="active" :overlay="overlay" :close-on-click-overlay="overlayClose" :duration="0" @change="log('change', $event)" @open="log('open', $event)" @opened="log('opened', $event)" @close="log('close', $event)" @closed="log('closed', $event)" @update:active-key="log('update:activeKey', $event)">
          <XtfDropdownItem ref="categoryItem" title="分类" v-model="category" :disabled="disabled" :options="categoryOptions"><text class="menu-demo-empty">分类选项为空</text></XtfDropdownItem>
          <XtfDropdownItem title="固定禁用" disabled :options="sortOptions" />
          <XtfDropdownItem v-if="mountedFirst" title="排序" v-model="sort" :options="sortOptions" />
        </XtfDropdownMenu>
        <text id="dm-state" class="menu-demo-state">{{ JSON.stringify({ active, sort, category, mountedFirst, disabled }) }}</text>
        <view class="menu-demo-tools">
          <button id="dm-open-first" @click="menu?.open(2)">打开排序</button>
          <button id="dm-open-category" @click="categoryItem?.open()">打开分类</button>
          <button id="dm-close-item" @click="categoryItem?.close()">关闭分类</button>
          <button id="dm-close" @click="menu?.close()">关闭菜单</button>
          <button id="dm-controlled" @click="active = 0">受控分类</button>
          <button id="dm-unmount" @click="mountedFirst = !mountedFirst">挂载/卸载排序</button>
          <button id="dm-disabled" @click="disabled = !disabled">禁用/启用分类</button>
          <button id="dm-options" @click="categoryOptions = [{ text: '分类已更新', value: 0 }, { text: '第二分类', value: 1 }]">更新分类</button>
          <button id="dm-empty" @click="categoryOptions = []">清空分类</button>
        </view>
        <view class="menu-demo-setting"><text>遮罩</text><switch id="dm-overlay" :checked="overlay" @change="overlay = $event.detail.value" /></view>
        <view class="menu-demo-setting"><text>点击遮罩关闭</text><switch id="dm-overlay-close" :checked="overlayClose" @change="overlayClose = $event.detail.value" /></view>
        <text id="dm-events" class="menu-demo-events">{{ events.join('\n') }}</text>
      </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 XtfDropdownMenu from "../../../uni_modules/xtf-linkuiunix/components/xtf-dropdown-menu/xtf-dropdown-menu.uvue"
import XtfDropdownItem from "../../../uni_modules/xtf-linkuiunix/components/xtf-dropdown-item/xtf-dropdown-item.uvue"
const menu = ref<{ open: (index: number) => void; close: () => void } | null>(null)
const categoryItem = ref<{ open: () => void; close: () => void } | null>(null)
const active = ref(-1)
const sort = ref("all")
const category = ref(0)
const mountedFirst = ref(true)
const disabled = ref(false)
const overlay = ref(true)
const overlayClose = ref(true)
const sortOptions = [{ text: "综合", value: "all" }, { text: "最新", value: "new" }]
const categoryOptions = ref<any[]>([{ text: "全部分类", value: 0 }, { text: "餐饮", value: 1 }])
const events = ref<string[]>([])
function log(name: string, index: number): void { events.value.push(name + ":" + index.toString()); if (events.value.length > 30) events.value.shift() }
</script>
<style>
.menu-demo-scroll { display: flex; flex-direction: column; flex: 1; height: 100%; }
.menu-demo-page { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.menu-demo-title { font-size: 24px; font-weight: 700; color: var(--xtf-color-text, #172033); margin-bottom: 20px; }
.menu-demo-state { font-size: 14px; color: #166534; margin-top: 16px; word-break: break-all; }
.menu-demo-tools { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
.menu-demo-setting { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 0; }
.menu-demo-empty { color: var(--xtf-color-text-secondary, #64748b); font-size: 14px; }
.menu-demo-events { font-size: 12px; color: var(--xtf-color-text-secondary, #475569); margin-top: 16px; white-space: pre-wrap; word-break: break-all; }
</style>
