<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true"><scroll-view class="drag-demo-scroll xtf-page-scroll" style="flex: 1" direction="vertical"><view class="drag-demo-page xtf-safe-bottom xtf-page-scroll-content">
    <view class="drag-demo-hero"><XtfText class="drag-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / COMPONENTS" /><XtfText class="drag-demo-title" level="display" color="inverse" text="Drag Layout" /><XtfText class="drag-demo-intro" level="caption" color="inverse" text="在稳定边界内拖拽排序，也可由数据定义专属布局。" /></view>
    <view class="drag-demo-section"><XtfText class="drag-demo-section-title" level="h3" text="受控网格排序" /><XtfText class="drag-demo-section-desc" level="caption" color="secondary" text="容器宽度以内容区为基准计算，任意列数不会越过 section 边缘。" /><XtfDragLayout v-model="quickItems" :cols="quickCols" :layout-width="620" drag-mode="immediate" :show-add-button="false" @change="recordChange" @end="recordEnd" /><view class="drag-demo-row"><view class="drag-demo-half"><XtfButton label="两列布局" type="light" block @click="quickCols = 2" /></view><view class="drag-demo-half drag-demo-half-right"><XtfButton label="三列布局" type="outline" block @click="quickCols = 3" /></view></view></view>
    <view class="drag-demo-section"><XtfText class="drag-demo-section-title" level="h3" text="可拖拽工作台" /><XtfText class="drag-demo-section-desc" level="caption" color="secondary" text="卡片内部可以有图标、指标、进度和标签，但排序由外层布局统一管理。" /><XtfDragLayout v-model="customItems" :layout-width="620" :cols="2" drag-mode="immediate" :show-label="false" :show-add-button="false" :show-delete-button="false" @change="recordCustomChange"><template #item="slotProps"><view class="drag-demo-dashboard-card" :class="'drag-demo-card-' + slotProps.item.kind"><view class="drag-demo-dashboard-head"><view class="drag-demo-dashboard-icon"><XtfIcon :name="slotProps.item.icon" size="sm" :theme="slotProps.item.theme" /></view><XtfText level="label" color="secondary" :text="slotProps.item.name" /></view><XtfText class="drag-demo-dashboard-value" level="h3" :text="slotProps.item.value" /><view class="drag-demo-dashboard-progress"><view class="drag-demo-dashboard-progress-fill" :style="{ width: slotProps.item.progress }"></view></view><view class="drag-demo-dashboard-foot"><XtfText level="caption" color="secondary" :text="slotProps.item.note" /><XtfText class="drag-demo-dashboard-tag" level="micro" :text="slotProps.item.tag" /></view></view></template></XtfDragLayout><XtfText class="drag-demo-event drag-demo-custom-order" level="caption" color="secondary" :text="customOrder" /></view>
    <view class="drag-demo-section"><XtfText class="drag-demo-section-title" level="h3" text="内容型卡片" /><XtfText class="drag-demo-section-desc" level="caption" color="secondary" text="展示带摘要、状态和快捷入口的异构卡片，仍支持拖拽排序。" /><XtfDragLayout v-model="contentItems" :cols="3" :layout-width="620" drag-mode="immediate" :show-label="false" :show-add-button="false" :show-delete-button="false" @change="recordContentChange"><template #item="slotProps"><view class="drag-demo-content-card"><XtfIcon :name="slotProps.item.icon" size="md" :theme="slotProps.item.theme" /><XtfText class="drag-demo-content-title" level="label" :text="slotProps.item.name" /><XtfText class="drag-demo-content-copy" level="caption" color="secondary" :text="slotProps.item.note" /></view></template></XtfDragLayout></view>
    <view class="drag-demo-section"><XtfText class="drag-demo-section-title" level="h3" text="句柄与只读状态" /><XtfText class="drag-demo-section-desc" level="caption" color="secondary" text="仅拖拽右下角句柄；只读布局仍保留视觉状态。" /><XtfDragLayout :items="handleItems" :cols="3" :layout-width="620" drag-handle handle-only :show-add-button="false" @update:items="setHandleItems"><template #item="slotProps"><view class="drag-demo-slot-card"><XtfText class="drag-demo-slot-index" level="h3" :text="(slotProps.index + 1).toString()" /><XtfText class="drag-demo-slot-name" level="caption" :text="slotProps.item.name" /></view></template><template #handle><XtfIcon name="drag_indicator" size="xs" theme="info" /></template></XtfDragLayout><XtfDragLayout class="drag-demo-readonly" :items="readonlyItems" :cols="3" :layout-width="620" disabled show-readonly-mask :show-add-button="false" /></view>
    <view class="drag-demo-section"><XtfText class="drag-demo-section-title" level="h3" text="事件状态" /><XtfText class="drag-demo-event" level="caption" color="secondary" :text="eventText" /><XtfText class="drag-demo-event" level="caption" color="secondary" :text="'当前顺序：' + orderText" /></view>
  </view></scroll-view></XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
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 XtfDragLayout from "@/uni_modules/xtf-linkuiunix/components/xtf-drag-layout/xtf-drag-layout.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"
type DemoItem = UTSJSONObject
const quickCols = ref(3)
const eventText = ref("等待拖拽")
const quickItems = ref([{ id: "a", name: "账单" }, { id: "b", name: "预算" }, { id: "c", name: "报表" }, { id: "d", name: "成员" }, { id: "e", name: "分类" }, { id: "f", name: "提醒" }] as DemoItem[])
const handleItems = ref([{ id: "h1", name: "早餐" }, { id: "h2", name: "交通" }, { id: "h3", name: "购物" }, { id: "h4", name: "娱乐" }, { id: "h5", name: "住房" }, { id: "h6", name: "其他" }] as DemoItem[])
const readonlyItems = ref([{ id: "r1", name: "锁定" }, { id: "r2", name: "审核" }, { id: "r3", name: "归档" }, { id: "r4", name: "完成" }] as DemoItem[])
const customItems = ref([{ id: "c1", name: "本月支出", value: "¥ 6,240", note: "较上月 -8%", tag: "稳定", kind: "blue", icon: "wallet", theme: "info", progress: "72%", cardStyle: { backgroundColor: "#eff6ff", borderColor: "#bfdbfe" } }, { id: "c2", name: "预算剩余", value: "68%", note: "还可使用 ¥3,760", tag: "健康", kind: "green", icon: "success", theme: "success", progress: "68%", cardStyle: { backgroundColor: "#ecfdf5", borderColor: "#bbf7d0" } }, { id: "c3", name: "待处理", value: "8 项", note: "3 项即将到期", tag: "提醒", kind: "orange", icon: "warning", theme: "warning", progress: "38%", cardStyle: { backgroundColor: "#fff7ed", borderColor: "#fed7aa" } }, { id: "c4", name: "本周趋势", value: "+12%", note: "消费保持增长", tag: "上升", kind: "purple", icon: "trending_up", theme: "info", progress: "84%", cardStyle: { backgroundColor: "#f5f3ff", borderColor: "#ddd6fe" } }, { id: "c5", name: "已同步", value: "24 条", note: "最后更新 2 分钟前", tag: "在线", kind: "teal", icon: "sync", theme: "success", progress: "92%", cardStyle: { backgroundColor: "#f0fdfa", borderColor: "#99f6e4" } }, { id: "c6", name: "成员活跃", value: "16 人", note: "本周有 4 人加入", tag: "团队", kind: "pink", icon: "group", theme: "danger", progress: "56%", cardStyle: { backgroundColor: "#fdf2f8", borderColor: "#fbcfe8" } }] as DemoItem[])
const contentItems = ref([{ id: "p1", name: "账本", note: "12 笔待核对", icon: "book", theme: "info" }, { id: "p2", name: "成员", note: "3 个新邀请", icon: "group", theme: "success" }, { id: "p3", name: "提醒", note: "本周 5 个任务", icon: "notifications", theme: "warning" }, { id: "p4", name: "报表", note: "月度趋势已生成", icon: "bar_chart", theme: "danger" }, { id: "p5", name: "分类", note: "8 个分类已更新", icon: "category", theme: "info" }, { id: "p6", name: "设置", note: "同步状态正常", icon: "settings", theme: "secondary" }] as DemoItem[])
const orderText = computed((): string => { let text = ""; for (let i = 0; i < quickItems.value.length; i++) { if (i > 0) text += " / "; text += quickItems.value[i]["name"].toString() }; return text })
const customOrder = computed((): string => { let text = "自定义排序："; for (let i = 0; i < customItems.value.length; i++) { if (i > 0) text += " / "; text += customItems.value[i]["name"].toString() }; return text })
function recordChange(items: DemoItem[]): void { eventText.value = "change：" + items.length.toString() + " 项" }
function recordEnd(items: DemoItem[]): void { eventText.value = "end：已完成 " + items.length.toString() + " 项排序" }
function setHandleItems(items: DemoItem[]): void { handleItems.value = items; eventText.value = "update:items：句柄排序已同步" }
function recordCustomChange(items: DemoItem[]): void { customItems.value = items; eventText.value = "自定义仪表盘已重新排序" }
function recordContentChange(items: DemoItem[]): void { contentItems.value = items; eventText.value = "内容型卡片已重新排序" }
defineOptions({ styleIsolation: "isolated" })
</script>
<style>
 .drag-demo-scroll { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }.drag-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }.drag-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }.drag-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }.drag-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; line-height: 1.1; }.drag-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }.drag-demo-section { display: flex; flex-direction: column; margin-top: 24rpx; padding: 24rpx; overflow: hidden; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }.drag-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 30rpx; font-weight: 700; }.drag-demo-section-desc { margin-top: 8rpx; margin-bottom: 20rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.45; }.drag-demo-row { display: flex; flex-direction: row; margin-top: 18rpx; }.drag-demo-half { display: flex; flex: 1; flex-direction: column; min-width: 0; }.drag-demo-half-right { margin-left: 14rpx; }.drag-demo-slot-card { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; }.drag-demo-slot-index { color: #0f766e; font-size: 34rpx; font-weight: 700; }.drag-demo-slot-name { margin-top: 6rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; }.drag-demo-dashboard-card { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 18rpx; }.drag-demo-dashboard-head { display: flex; flex-direction: row; align-items: center; }.drag-demo-dashboard-icon { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 42rpx; height: 42rpx; margin-right: 8rpx; border-radius: 12rpx; background-color: #ffffff; }.drag-demo-dashboard-value { margin-top: 8rpx; color: #0f766e; font-size: 28rpx; font-weight: 700; }.drag-demo-dashboard-progress { display: flex; flex-direction: row; width: 100%; height: 8rpx; margin-top: 12rpx; border-radius: 8rpx; background-color: #ffffff; }.drag-demo-dashboard-progress-fill { height: 8rpx; border-radius: 8rpx; background-color: #0f766e; }.drag-demo-dashboard-foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8rpx; }.drag-demo-dashboard-note { color: #64748b; font-size: 20rpx; }.drag-demo-dashboard-tag { padding: 4rpx 8rpx; border-radius: 8rpx; background-color: #ffffff; color: #0f766e; font-size: 18rpx; }.drag-demo-readonly { margin-top: 20rpx; }.drag-demo-event { color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; line-height: 1.6; }.drag-demo-custom-order { margin-top: 18rpx; }.drag-demo-content-card { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 14rpx; }.drag-demo-content-title { margin-top: 10rpx; color: var(--xtf-color-text, #0f172a); font-weight: 700; }.drag-demo-content-copy { margin-top: 6rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 18rpx; text-align: center; }
</style>
