<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="calendar-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical">
      <view class="calendar-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="calendar-demo-hero"><XtfText class="calendar-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="calendar-demo-title" level="display" color="inverse" text="Calendar" /><XtfText class="calendar-demo-intro" level="caption" color="inverse" text="日期选择、预约区间与业务排期的统一日历组件。" /></view>
        <view class="calendar-demo-section"><XtfText class="calendar-demo-section-title" level="h3" text="单选与月份导航" /><XtfText class="calendar-demo-section-desc" level="caption" color="secondary" text="可切换月份，边界外日期与指定日期不可选择。" /><XtfCalendar v-model="singleValue" current="2026-09-01" min-date="2026-09-03" max-date="2026-10-26" :disabled-dates="disabledDates" :marks="marks" :statuses="statuses" @select="onSelect" @change="onChange" /><XtfText class="calendar-demo-result" level="caption" color="secondary" :text="'当前选择：' + singleValue" /></view>
        <view class="calendar-demo-section"><XtfText class="calendar-demo-section-title" level="h3" text="范围与确认操作" /><XtfText class="calendar-demo-section-desc" level="caption" color="secondary" text="点击两天形成日期区间，最多8天；只读时拖拽和快捷项都不改值。" /><XtfCalendar id="calendar-range" v-model="rangeValue" range :readonly="rangeReadonly" :max-range="8" show-selection show-clear show-cancel show-confirm show-today-button show-header-clear :shortcuts="rangeShortcuts" :marks="marks" @confirm="onConfirm" @cancel="onCancel" @change="onChange" @shortcut-click="onShortcut" /><button id="calendar-range-readonly" class="calendar-demo-toggle" @click="rangeReadonly = !rangeReadonly">{{ rangeReadonly ? '启用选择' : '设为只读' }}</button><button id="calendar-range-clear" class="calendar-demo-toggle" @click="rangeValue = []">外部清空范围</button><XtfText class="calendar-demo-result" level="caption" color="secondary" :text="'范围：' + rangeResult" /></view>
        <view class="calendar-demo-section"><XtfText class="calendar-demo-section-title" level="h3" text="多选与周起始" /><XtfText class="calendar-demo-section-desc" level="caption" color="secondary" text="周日作为每周第一天，可反复点击日期增减选择。" /><XtfCalendar v-model="multipleValue" multiple :week-start="0" show-footer show-selection show-clear :disabled-dates="disabledDates" active-color="#0f766e" range-color="#ccfbf1" @select="onSelect" @change="onChange" /><XtfText class="calendar-demo-result" level="caption" color="secondary" :text="'已选 ' + multipleValue.length.toString() + ' 天'" /></view>
        <view class="calendar-demo-section"><XtfText class="calendar-demo-section-title" level="h3" text="事件记录" /><XtfText class="calendar-demo-section-desc" level="caption" color="secondary" text="select、change、confirm 与 cancel 的最近一次回调。" /><view class="calendar-demo-log"><XtfText class="calendar-demo-log-text" level="caption" color="primary" :text="eventLog" /></view></view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
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 XtfCalendar from "@/uni_modules/xtf-linkuiunix/components/xtf-calendar/xtf-calendar.uvue"
import { computed, ref } from "vue"
const rangeReadonly = ref(false)
const singleValue = ref("2026-09-08")
const rangeValue = ref(["2026-09-10", "2026-09-14"] as Array<string>)
const committedRange = ref(["2026-09-10", "2026-09-14"] as Array<string>)
const multipleValue = ref(["2026-09-02", "2026-09-05"] as Array<string>)
const eventLog = ref("等待日期操作")
const disabledDates = ["2026-09-12", ["2026-09-18", "2026-09-19"]]
const marks = [{ date: "2026-09-08", label: "预约", color: "#2563eb" }, { date: "2026-09-15", label: "发售", color: "#16a34a" }]
const statuses = [{ date: "2026-09-20", label: "满约", type: "busy" }]
const rangeShortcuts = [{ key: "week", label: "最近一周", value: ["2026-09-10", "2026-09-16"] }, { key: "campaign", label: "活动期", value: ["2026-09-20", "2026-09-25"] }]
const rangeResult = computed((): string => rangeValue.value.length == 0 ? "未选择" : rangeValue.value.join(" 至 "))
function onSelect(payload: any): void { eventLog.value = "select: " + (payload.day.value as string) }
function onChange(payload: any): void { eventLog.value = "change: " + (payload.type as string) }
function onConfirm(payload: any): void { committedRange.value = rangeValue.value.slice(); eventLog.value = "confirm: " + (payload.completed ? "已确认当前范围" : "范围未完成") }
function onCancel(): void { rangeValue.value = committedRange.value.slice(); eventLog.value = "cancel: 已恢复上次确认范围" }
function onShortcut(payload: any): void { eventLog.value = "shortcut: " + (payload.item["label"] as string) }
</script>

<style>
.calendar-demo-toggle { margin-top: 12rpx; font-size: 24rpx; }
.calendar-demo-scroll { flex: 1; width: 100%; height: 100%; min-height: 0; }
.calendar-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.calendar-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: var(--xtf-color-primary, #2563eb); }
.calendar-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.calendar-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }
.calendar-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; opacity: 0.88; }
.calendar-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.calendar-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }
.calendar-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }
.calendar-demo-result { margin-top: 18rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.calendar-demo-log { display: flex; flex-direction: row; align-items: center; min-height: 72rpx; padding: 16rpx; border-radius: 10rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }
.calendar-demo-log-text { color: var(--xtf-color-primary, #2563eb); font-size: 24rpx; }
</style>
