<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme">
  <scroll-view class="lab-scroll xtf-page-scroll" direction="vertical"><view class="lab-page xtf-page-scroll-content">
    <view class="lab-header"><text class="lab-eyebrow">GESTURE / 02</text><text class="lab-title">Swipable Cell 滑动单元格</text></view>
    <view class="lab-section"><text class="lab-heading">收件箱</text>
      <view class="lab-surface"><XtfSwipableCell v-for="item in messages" :key="item.id" :name="item.id" :right-width="240" @open="status = '已展开：' + item.title" @close="status = '操作区已收起'">
        <template #right><view class="swipe-actions"><view class="swipe-action swipe-read" @click.stop="item.read = !item.read; status = item.read ? '已标为已读' : '已标为未读'"><text class="swipe-action-text">{{ item.read ? '未读' : '已读' }}</text></view><view class="swipe-action swipe-delete" @click.stop="remove(item.id)"><text class="swipe-action-text">删除</text></view></view></template>
        <view class="lab-list-row"><view class="lab-copy"><text class="lab-item-title">{{ item.title }}</text><text class="lab-item-meta">{{ item.desc }}</text></view><text class="lab-status">{{ item.read ? '已读' : '未读' }}</text></view>
      </XtfSwipableCell></view>
      <text v-if="messages.length == 0" class="lab-caption">收件箱已清空</text>
      <view class="lab-tools"><button class="lab-button lab-button-secondary" @click="restore">恢复消息</button></view><text class="lab-result">{{ status }}</text>
    </view>
    <view class="lab-section"><text class="lab-heading">双侧操作</text><XtfSwipableCell ref="both" :left-width="144" :right-width="144"><template #left><view class="swipe-action swipe-read" @click.stop="pinned = !pinned; both?.close()"><text class="swipe-action-text">{{ pinned ? '取消置顶' : '置顶' }}</text></view></template><template #right><view class="swipe-action swipe-archive" @click.stop="status = '项目已归档'; both?.close()"><text class="swipe-action-text">归档</text></view></template><view class="lab-list-row"><text class="lab-item-title">设计评审记录</text><text class="lab-status">{{ pinned ? '置顶' : '项目' }}</text></view></XtfSwipableCell><view class="lab-tools"><button class="lab-button lab-button-secondary" @click="both?.open('right')">展开操作</button><button class="lab-button lab-button-secondary" @click="both?.close()">收起</button></view></view>
    <view class="lab-section"><view class="lab-row"><text class="lab-heading">锁定记录</text><switch :checked="disabled" color="#17796b" @change="disabled = $event.detail.value" /></view><XtfSwipableCell :disabled="disabled" :right-width="144"><template #right><view class="swipe-action swipe-archive"><text class="swipe-action-text">操作</text></view></template><view class="lab-list-row"><text class="lab-label">财务月结报告</text><text class="lab-status">{{ disabled ? '已锁定' : '可滑动' }}</text></view></XtfSwipableCell></view>
  </view></scroll-view>
  </XtfConfigProvider>
</template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
import XtfConfigProvider from '@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfSwipableCell from "@/uni_modules/xtf-linkuiunix/components/xtf-swipable-cell/xtf-swipable-cell.uvue"
const both = ref<any>(null)
const pinned = ref(false)
const disabled = ref(true)
const status = ref("3 条消息")
const initial = [{ id: 1, title: "订单已发货", desc: "物流中心 · 09:42", read: false }, { id: 2, title: "本周设计评审", desc: "产品团队 · 08:30", read: false }, { id: 3, title: "账号安全提醒", desc: "安全中心 · 昨天", read: true }]
const messages = ref(initial.map(item => ({ ...item })))
function remove(id: number): void { messages.value = messages.value.filter(item => item.id != id); status.value = "消息已删除" }
function restore(): void { messages.value = initial.map(item => ({ ...item })); status.value = "已恢复 3 条消息" }
</script>
<style>
@import "../demo-workbench.css";
.swipe-actions { display: flex; flex-direction: row; width: 100%; height: 100%; }
.swipe-action { display: flex; flex-direction: row; align-items: center; justify-content: center; flex: 1; height: 100%; }
.swipe-read { background-color: #17796b; }.swipe-delete { background-color: #c64350; }.swipe-archive { background-color: #557389; }
.swipe-action-text { color: #ffffff; font-size: 24rpx; }
</style>
