<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
    <scroll-view class="item-demo-scroll" direction="vertical" @scroll="menu?.close()">
      <view class="item-demo-page">
        <text class="item-demo-title">Dropdown Item</text>
        <XtfDropdownMenu ref="menu" v-model:active-key="active" :overlay="false" @change="log('menu', $event)">
          <XtfDropdownItem ref="single" v-model="value" title="单选" :options="options" :use-scroll-view="scroll" @change="log('change', $event)" @confirm="log('confirm', $event)" @input="log('input', $event)" @update:value="log('update:value', $event)" @update:modelValue="log('update:modelValue', $event)" @open="log('open', null)" @opened="log('opened', null)" @close="log('close', null)" @closed="log('closed', null)" />
          <XtfDropdownItem ref="multiple" v-model="values" title="多选" multiple :show-toolbar="toolbar" :options="options" :option-columns="2" @change="log('multi-change', $event)" @confirm="log('multi-confirm', $event)" @reset="log('reset', $event)" />
          <XtfDropdownItem ref="custom" title="自定义" :use-scroll-view="false"><view class="item-demo-slot"><input id="di-slot-input" class="item-demo-input" v-model="note" placeholder="备注" /><button id="di-slot-close" @click="custom?.close()">完成</button></view></XtfDropdownItem>
          <XtfDropdownItem title="空列表" empty-text="没有匹配项" />
        </XtfDropdownMenu>
        <text id="di-state" class="item-demo-state">{{ JSON.stringify({ active, value, values, note }) }}</text>
        <view class="item-demo-tools">
          <button id="di-open" @click="single?.open()">打开单选</button>
          <button id="di-close" @click="single?.close()">关闭单选</button>
          <button id="di-multi" @click="multiple?.open()">打开多选</button>
          <button id="di-confirm" @click="multiple?.confirm()">确认多选</button>
          <button id="di-reset" @click="multiple?.reset()">重置草稿</button>
          <button id="di-slot" @click="custom?.open()">打开备注</button>
          <button id="di-options" @click="replaceOptions">替换选项</button>
          <button id="di-clear-options" @click="options = []">清空选项</button>
          <button id="di-external" @click="value = false; values = [0, false]">外部赋值</button>
        </view>
        <view class="item-demo-setting"><text>工具栏</text><switch id="di-toolbar" :checked="toolbar" @change="toolbar = $event.detail.value" /></view>
        <view class="item-demo-setting"><text>内部滚动</text><switch id="di-scroll" :checked="scroll" @change="scroll = $event.detail.value" /></view>
        <text id="di-events" class="item-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"
type ItemRef = { open: () => void; close: () => void; confirm: () => void; reset: () => void }
const menu = ref<{ close: () => void } | null>(null)
const single = ref<ItemRef | null>(null)
const multiple = ref<ItemRef | null>(null)
const custom = ref<ItemRef | null>(null)
const active = ref(-1)
const value = ref<any>(0)
const values = ref<any[]>([])
const note = ref("")
const toolbar = ref(true)
const scroll = ref(true)
const options = ref<any[]>([{ text: "数字零", value: 0 }, { text: "布尔假", value: false }, { text: "字符串零", value: "0" }, { text: "禁止选择", value: "blocked", disabled: true }])
const events = ref<string[]>([])
function log(name: string, detail: any): void { events.value.push(name + ":" + JSON.stringify(detail)); if (events.value.length > 30) events.value.shift() }
function replaceOptions(): void { options.value = [{ text: "零已更新", value: 0 }, { text: "假已更新", value: false }, { text: "字符串零", value: "0" }, { text: "新选项", value: "new" }] }
</script>
<style>
.item-demo-scroll { display: flex; flex-direction: column; flex: 1; height: 100%; }
.item-demo-page { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.item-demo-title { font-size: 24px; font-weight: 700; color: var(--xtf-color-text, #172033); margin-bottom: 20px; }
.item-demo-state { font-size: 14px; color: #166534; margin-top: 16px; word-break: break-all; }
.item-demo-tools { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
.item-demo-setting { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 0; }
.item-demo-slot { display: flex; flex-direction: column; }
.item-demo-input { height: 40px; border: 1px solid var(--xtf-color-border, #94a3b8); color: var(--xtf-color-text, #0f172a); background-color: var(--xtf-color-surface, #ffffff); margin-bottom: 12px; }
.item-demo-events { font-size: 12px; color: var(--xtf-color-text-secondary, #475569); margin-top: 16px; white-space: pre-wrap; word-break: break-all; }
</style>
