<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="collapse-demo-scroll xtf-page-scroll" direction="vertical">
      <view id="collapse-demo" class="collapse-demo-page xtf-page-scroll-content">
        <view class="collapse-demo-hero">
          <text class="collapse-demo-kicker">XTF LINKUI / COMPONENTS</text>
          <text class="collapse-demo-title">Collapse 折叠面板</text>
        </view>

        <view id="collapse-basic" class="collapse-demo-section">
          <text class="collapse-demo-heading">01 普通模式与禁用项</text>
          <XtfCollapse v-model:value="active" :items="items" @input="record('普通', 'input', $event)" @update:value="record('普通', 'update:value', $event)" @change="record('普通', 'change', $event)" @toggle="record('普通', 'toggle', $event)" />
          <text id="collapse-basic-value" class="collapse-demo-state">value: {{ JSON.stringify(active) }}</text>
        </view>

        <view id="collapse-accordion" class="collapse-demo-section">
          <text class="collapse-demo-heading">02 手风琴与模式切换</text>
          <view class="collapse-demo-toolbar"><text class="collapse-demo-label">手风琴</text><switch id="collapse-mode-switch" :checked="accordion" @change="accordion = $event.detail.value" /></view>
          <XtfCollapse v-model:value="accordionActive" :items="items" :accordion="accordion" borderless @toggle="record('手风琴', 'toggle', $event)" />
          <text id="collapse-accordion-value" class="collapse-demo-state">value: {{ JSON.stringify(accordionActive) }}</text>
        </view>

        <view id="collapse-controlled" class="collapse-demo-section">
          <text class="collapse-demo-heading">03 父级控制</text>
          <view class="collapse-demo-toolbar">
            <XtfButton id="collapse-expand-all" label="全部展开" @click="controlled = ['account', 'notice']" />
            <XtfButton id="collapse-close-all" label="全部收起" @click="controlled = []" />
          </view>
          <XtfCollapse v-model:value="controlled" :items="items" radius="8px" @toggle="record('父级控制', 'toggle', $event)" />
          <text id="collapse-controlled-value" class="collapse-demo-state">value: {{ JSON.stringify(controlled) }}</text>
        </view>

        <view id="collapse-faq" class="collapse-demo-section">
          <text class="collapse-demo-heading">04 FAQ · 左箭头与业务插槽</text>
          <XtfCollapse v-model:value="faqActive" :items="faqItems" icon-position="left" @toggle="record('FAQ', 'toggle', $event)">
            <template #title="{ item, index }">
              <view class="collapse-demo-faq-title"><XtfIcon :name="item.icon" size="sm" /><text class="collapse-demo-label">{{ index + 1 }}. {{ item.title }}</text></view>
              <text class="collapse-demo-state">{{ item.category }} / {{ item.ticket }}</text>
            </template>
            <template #content="{ item }">
              <view class="collapse-demo-content">
                <text class="collapse-demo-copy">{{ item.content }}</text>
                <XtfButton :id="'collapse-faq-action-' + item.name" :label="item.actionLabel" @click="handleFaq(item)" />
              </view>
            </template>
          </XtfCollapse>
          <text id="collapse-faq-result" class="collapse-demo-state">{{ faqResult }}</text>
        </view>

        <view id="collapse-long" class="collapse-demo-section">
          <text class="collapse-demo-heading">05 长内容与显式 px 单位</text>
          <XtfCollapse v-model:value="longActive" :items="longItems" radius="12px" content-max-height="1600px" @toggle="record('长内容', 'toggle', $event)" />
          <text class="collapse-demo-state">value: {{ JSON.stringify(longActive) }}</text>
        </view>

        <view id="collapse-animation" class="collapse-demo-section">
          <text class="collapse-demo-heading">06 独立折叠动画</text>
          <XtfButton id="collapse-animation-toggle" :label="animationShow ? '收起内容' : '展开内容'" block @click="animationShow = !animationShow" />
          <XtfCollapseAnimation v-model="animationShow" :duration="220" easing="ease-out" lazy-render>
            <view class="collapse-demo-content"><text class="collapse-demo-copy">本月账单已汇总，待核对 3 笔，已确认 12 笔。</text></view>
          </XtfCollapseAnimation>
          <view class="collapse-demo-toolbar"><text class="collapse-demo-state">允许实例关闭</text><switch id="collapse-guard-allow" :checked="animationAllowed" @change="animationAllowed = $event.detail.value" /></view>
          <XtfButton id="collapse-guard-toggle" label="经守卫切换" type="outline" @click="guardedAnimation?.toggle()" />
          <XtfCollapseAnimation ref="guardedAnimation" v-model="guardedShow" :before-change="beforeAnimation" :destroy-on-close="true" :duration="220" @change="record('动画', 'change', $event)" @opened="record('动画', 'opened', $event)" @closed="record('动画', 'closed', $event)">
            <view class="collapse-demo-content"><text class="collapse-demo-copy">关闭动画结束后销毁；外部绑定更新与实例守卫分开演示。</text></view>
          </XtfCollapseAnimation>
          <text id="collapse-guard-result" class="collapse-demo-state">{{ animationGuardResult }} / show={{ guardedShow }}</text>
        </view>

        <view class="collapse-demo-section">
          <view class="collapse-demo-toolbar"><text class="collapse-demo-heading">事件明细</text><XtfButton id="collapse-clear-events" label="清空" @click="events = []" /></view>
          <view id="collapse-events" class="collapse-demo-content">
            <text v-if="events.length == 0" class="collapse-demo-state">暂无事件</text>
            <text v-for="entry in events" :key="entry" class="collapse-demo-event">{{ entry }}</text>
          </view>
        </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 XtfCollapse from "@/uni_modules/xtf-linkuiunix/components/xtf-collapse/xtf-collapse.uvue"
import XtfCollapseAnimation from "@/uni_modules/xtf-linkuiunix/components/xtf-collapse-animation/xtf-collapse-animation.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"

const active = ref<any>(["account"])
const accordion = ref(true)
const accordionActive = ref<any>("account")
const controlled = ref<any>([])
const faqActive = ref<any>(["invoice"])
const longActive = ref<any>(["height"])
const animationShow = ref(true)
const guardedAnimation = ref<any>(null)
const guardedShow = ref(true)
const animationAllowed = ref(false)
const animationGuardResult = ref("等待守卫")
function beforeAnimation(payload: any): boolean { animationGuardResult.value = JSON.stringify(payload) + " / allowed=" + animationAllowed.value.toString(); return animationAllowed.value }
const faqResult = ref("尚未提交申请")
const events = ref([] as Array<string>)
let eventSequence = 0
const items = [
  { name: "account", title: "账号安全", desc: "密码与登录保护", content: "请定期更新密码，并确认绑定手机号可正常接收验证码。" },
  { name: "notice", title: "通知设置", content: "管理系统通知、账单提醒和营销消息。" },
  { name: "disabled", title: "系统维护中（禁用）", content: "该功能暂时不可用。", disabled: true }
] as Array<any>
const faqItems = [
  { name: "invoice", title: "如何申请发票？", icon: "receipt", category: "财务服务", ticket: "FAQ-001", actionLabel: "申请开票", content: "确认账单后可提交开票申请，发票将发送至预留邮箱。" },
  { name: "refund", title: "退款进度在哪里查看？", icon: "help", category: "售后服务", ticket: "FAQ-002", actionLabel: "查询进度", content: "退款审核完成后，款项将原路退回支付账户。" }
] as Array<any>
const longContent = "账单核对包含交易时间、订单编号、支付渠道和实收金额。请逐笔确认优惠与退款记录，存在差异时先保留凭证，再联系财务处理。\n".repeat(8)
const longItems = [
  { name: "height", title: "账单核对清单 · contentHeight", contentHeight: "1200px", maxHeight: "20px", content: longContent },
  { name: "max", title: "退款审核清单 · maxHeight", maxHeight: "1400px", content: longContent },
  { name: "fallback", title: "归档清单 · contentMaxHeight", content: longContent }
] as Array<any>
function record(scene: string, event: string, value: any): void {
  eventSequence += 1
  events.value = [eventSequence.toString() + " / " + scene + " / " + event + " / " + JSON.stringify(value)].concat(events.value).slice(0, 12)
}
function handleFaq(item: any): void {
  faqResult.value = item.ticket + " · " + item.actionLabel + "已提交"
  record("FAQ", "action", { name: item.name, ticket: item.ticket, category: item.category })
}
</script>

<style>
.collapse-demo-scroll { flex: 1; width: 100%; height: 100%; }
.collapse-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.collapse-demo-hero { display: flex; flex-direction: column; padding: 24rpx 0; }
.collapse-demo-kicker { color: #0f766e; font-size: 12px; }
.collapse-demo-title { margin-top: 8px; color: var(--xtf-color-text, #172033); font-size: 26px; font-weight: 700; }
.collapse-demo-section { display: flex; flex-direction: column; margin-top: 24px; padding-bottom: 24px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); }
.collapse-demo-heading { margin-bottom: 16px; color: var(--xtf-color-text, #172033); font-size: 18px; font-weight: 700; }
.collapse-demo-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.collapse-demo-label { flex: 1; margin-left: 8px; color: var(--xtf-color-text, #172033); font-size: 15px; }
.collapse-demo-state { margin-top: 12px; color: var(--xtf-color-text-secondary, #475569); font-size: 13px; }
.collapse-demo-faq-title { display: flex; flex-direction: row; align-items: center; }
.collapse-demo-content { display: flex; flex-direction: column; padding-top: 12px; }
.collapse-demo-copy { margin-bottom: 16px; color: var(--xtf-color-text-secondary, #475569); font-size: 14px; line-height: 22px; }
.collapse-demo-event { margin-bottom: 10px; color: var(--xtf-color-text-secondary, #475569); font-size: 12px; word-break: break-all; }
</style>
