<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="datetime-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="datetime-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="datetime-demo-hero"><text class="datetime-demo-kicker">XTF LINKUI / COMPONENTS</text><text class="datetime-demo-title">Datetime Picker</text><text class="datetime-demo-intro">日期、时间、范围和快捷项的滚轮选择。</text></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">日期触发器</text><XtfDatetimePicker id="datetime-controlled" ref="datePicker" v-model="dateValue" show-trigger trigger-label="记账日期" trigger-placeholder="选择日期" title="选择记账日期" mode="date" :show="dateVisible" :disabled="disabled" cancel-button-bg-color="#f1f5f9" cancel-button-border-color="#cbd5e1" confirm-button-bg-color="#2563eb" confirm-button-text-color="#ffffff" confirm-button-border-color="#1d4ed8" @update:show="dateVisible = $event" @confirm="recordConfirm" @cancel="eventLog = '已取消，草稿已恢复'" /><text class="datetime-demo-result">{{ dateValue }}</text><view class="datetime-demo-mode-row"><XtfButton id="datetime-external-fill" size="sm" label="回填日期" @click="dateValue = '2027-02-28'" /><XtfButton id="datetime-external-clear" size="sm" label="外部清空" @click="dateValue = ''" /><XtfButton id="datetime-disabled" size="sm" label="切换禁用" @click="disabled = !disabled" /><XtfButton id="datetime-api-confirm" size="sm" label="confirm()" @click="datePicker?.confirm()" /></view></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">日期范围与快捷项</text><XtfDatetimePicker v-model="rangeValue" show-trigger trigger-label="账单周期" mode="date" range :show="rangeVisible" :shortcuts="rangeShortcuts" @update:show="rangeVisible = $event" @confirm="recordConfirm" /><XtfButton label="打开范围选择" type="outline" block @click="rangeVisible = true" /></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">日期时间、秒与边界</text><XtfDatetimePicker v-model="datetimeValue" show-trigger trigger-label="执行时间" mode="datetime" show-seconds variant="ocean" min-date="2026-09-01 08:00:00" max-date="2026-09-30 22:00:00" :min-hour="8" :max-hour="22" @confirm="recordConfirm"><template #current-summary="scope"><view class="datetime-demo-custom-summary"><text class="datetime-demo-custom-summary-label">自定义摘要</text><text class="datetime-demo-custom-summary-value">{{ scope.currentLabel }}</text></view></template></XtfDatetimePicker></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">System 布局</text><XtfDatetimePicker v-model="systemValue" show-trigger trigger-label="结算月份" mode="year-month" layout="system" variant="minimal" /></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">模式预览</text><view class="datetime-demo-mode-row"><XtfButton size="sm" type="light" label="时间" @click="mode = 'time'; modeVisible = true" /><XtfButton size="sm" type="light" label="年月" @click="mode = 'year-month'; modeVisible = true" /><XtfButton size="sm" type="light" label="月日" @click="mode = 'month-day'; modeVisible = true" /><XtfButton size="sm" type="light" label="时分" @click="mode = 'hour-minute'; modeVisible = true" /></view><XtfDatetimePicker v-model="modeValue" :mode="mode" title="模式选择" :show="modeVisible" @update:show="modeVisible = $event" @confirm="recordConfirm" /></view>
        <view class="datetime-demo-section"><text class="datetime-demo-section-title">过滤结果为空</text><XtfDatetimePicker id="datetime-filtered" v-model="filteredValue" :filter="filterOptions" show-trigger trigger-label="可选日期" @confirm="recordConfirm" /><button id="datetime-filter-toggle" class="datetime-demo-filter-button" @click="emptyFilter = !emptyFilter">{{ emptyFilter ? '恢复可选项' : '过滤全部选项' }}</button><text class="datetime-demo-result">{{ emptyFilter ? '没有可选项，确认按钮禁用；取消仍可关闭' : '恢复后可正常选择并确认' }}</text></view>
         <view class="datetime-demo-log"><text class="datetime-demo-log-text">{{ eventLog }}</text></view>
      </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 XtfDatetimePicker from "@/uni_modules/xtf-linkuiunix/components/xtf-datetime-picker/xtf-datetime-picker.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const datePicker = ref<any>(null)
const emptyFilter = ref(false)
const filteredValue = ref("2026-09-05")
function filterOptions(_type: string, _value: number): boolean { return !emptyFilter.value }
const disabled = ref(false)
const dateValue = ref("2026-09-05")
const rangeValue = ref(["2026-09-01", "2026-09-05"] as any[])
const modeValue = ref("12:30")
const datetimeValue = ref("2026-09-18 12:30:45")
const systemValue = ref("2026-09")
const mode = ref("time")
const dateVisible = ref(false)
const rangeVisible = ref(false)
const modeVisible = ref(false)
const eventLog = ref("等待操作")
const rangeShortcuts = [{ key: "week", label: "最近一周", value: ["2026-09-01", "2026-09-05"] }, { key: "month", label: "本月", value: ["2026-09-01", "2026-09-30"] }]
function recordConfirm(payload: any): void { eventLog.value = "confirm: " + (payload.value as any).toString() }
</script>

<style>
.datetime-demo-filter-button { margin-top: 12rpx; font-size: 24rpx; }
.datetime-demo-scroll { flex: 1; width: 100%; min-height: 0; }.datetime-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.datetime-demo-hero { display: flex; flex-direction: column; padding: 30rpx 26rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }.datetime-demo-kicker { color: #ffffff; font-size: 19rpx; font-weight: 700; }.datetime-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 44rpx; font-weight: 700; }.datetime-demo-intro { margin-top: 12rpx; color: #ffffff; font-size: 23rpx; }.datetime-demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 14rpx; background-color: var(--xtf-color-surface, #ffffff); }.datetime-demo-section-title { margin-bottom: 16rpx; color: var(--xtf-color-text, #0f172a); font-size: 28rpx; font-weight: 700; }.datetime-demo-result { margin-top: 14rpx; color: var(--xtf-color-primary, #2563eb); font-size: 23rpx; }.datetime-demo-mode-row { display: flex; flex-direction: row; flex-wrap: wrap; }.datetime-demo-custom-summary { display: flex; flex-direction: column; margin-top: 10rpx; padding: 16rpx; border-radius: 10rpx; background-color: var(--xtf-color-surface-muted, #dbeafe); }.datetime-demo-custom-summary-label { color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; }.datetime-demo-custom-summary-value { margin-top: 6rpx; color: #2563eb; font-size: 30rpx; font-weight: 700; }.datetime-demo-log { display: flex; flex-direction: row; margin-top: 18rpx; padding: 18rpx; border-radius: 10rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }.datetime-demo-log-text { color: var(--xtf-color-primary, #2563eb); font-size: 23rpx; }
</style>
