<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">DATA / 01</text><text class="lab-title">Table 数据表格</text></view>
      <view class="lab-section">
        <text class="lab-heading">库存台账</text>
        <input class="lab-field" v-model="query" placeholder="搜索商品名称" @input="page = 1" />
        <view class="lab-row"><text class="lab-caption">{{ filteredRows.length }} 件商品 · 已选 {{ selected.length }} 项</text><switch :checked="stripe" color="#17796b" @change="stripe = $event.detail.value" /></view>
        <XtfTable ref="table" class="demo-inventory-table" :columns="columns" :data="filteredRows" :stripe="stripe" selectable select-on-row-click :selected-row-keys="selected" :page="page" :page-size="pageSize" show-pagination :min-width="1050" @update:page="page = $event" @update:pageSize="pageSize = $event" @update:selectedRowKeys="selected = $event" @sort="recordSort" @row-click="recordRow">
          <template #cell="scope">
            <text v-if="scope.column.key == 'stock-status'" class="demo-stock-status" :class="scope.row.stock < 20 ? 'demo-stock-low' : 'demo-stock-ready'">{{ scope.row.stock < 20 ? '待补货' : '库存充足' }}</text>
            <view v-else-if="scope.column.key == 'stock-action'" class="demo-stock-action" @tap.stop><button class="demo-stock-replenish" :data-row-id="scope.row.id" @click.stop="replenish(scope.row)">补货 +20</button></view>
            <text v-else class="demo-stock-value">{{ displayValue(scope.value, scope.row, scope.column) }}</text>
          </template>
        </XtfTable>
        <text class="lab-caption demo-stock-summary">补货 {{ replenished }} 次 · 已选 {{ selected.length }} 项</text>
        <view class="lab-row"><text class="lab-caption">每页数量</text><picker :range="pageSizes" :value="pageSizes.indexOf(pageSize)" @change="table?.changePageSize(pageSizes[Number($event.detail.value)])"><text class="lab-label">{{ pageSize }} 条 / 页</text></picker></view>
        <view class="lab-tools"><button class="lab-button lab-button-secondary" @click="table?.clearSelection(); status = '已清空选择'">清空选择</button><button class="lab-button lab-button-secondary" @click="query = ''; page = 1">重置筛选</button></view>
         <text class="lab-result">{{ status }}</text>
         <view class="lab-tools"><button class="lab-button lab-button-secondary demo-table-remove" @click="removeSelected">删除已选</button><button class="lab-button lab-button-secondary demo-table-restore" @click="restoreRows">恢复数据</button></view>
      </view>
      <view class="lab-section"><text class="lab-heading">部门与子团队</text><XtfTable :columns="treeColumns" :data="departments" tree-data default-expand-all :min-width="580" /></view>
      <view class="lab-section"><view class="lab-row"><text class="lab-heading">数据状态</text><switch :checked="loading" color="#17796b" @change="loading = $event.detail.value" /></view><XtfTable :columns="columns" :data="[]" :loading="loading" empty-text="暂无归档商品" :min-width="580" /></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 { computed, ref } from "vue"
import XtfTable from "@/uni_modules/xtf-linkuiunix/components/xtf-table/xtf-table.uvue"
const query = ref("")
const page = ref(1)
const table = ref<any>(null)
const pageSize = ref(3)
const pageSizes = [2, 3, 6]
const stripe = ref(true)
const loading = ref(false)
const selected = ref<any[]>([])
const status = ref("库存更新于 09:30")
const replenished = ref(0)
const columns = [{ key: "product", title: "商品", dataIndex: "name", width: 260 }, { key: "inventory", title: "库存", dataIndex: "stock", width: 150, sortable: true }, { key: "unit-price", title: "单价", dataIndex: "price", width: 180, sortable: true, formatter: (value: number): string => "¥ " + value.toFixed(2) }, { key: "stock-status", title: "库存状态", dataIndex: "stock", width: 170 }, { key: "stock-action", title: "行内补货", width: 190 }]
function initialRows(): Array<any> { return [{ id: 1, name: "便携咖啡杯", stock: 48, price: 89 }, { id: 2, name: "桌面收纳盒", stock: 16, price: 45 }, { id: 3, name: "无线台灯", stock: 8, price: 169 }, { id: 4, name: "随行帆布袋", stock: 62, price: 39 }, { id: 5, name: "方格笔记本", stock: 120, price: 18 }, { id: 6, name: "不锈钢书签", stock: 32, price: 25 }] }
const rows = ref(initialRows())
const filteredRows = computed(() => rows.value.filter((item: any): boolean => item.name.includes(query.value.trim())))
const treeColumns = [{ title: "团队", dataIndex: "name", width: 360 }, { title: "成员", dataIndex: "count", width: 160 }]
const departments = [{ id: "design", name: "产品设计部", count: 12, children: [{ id: "ux", name: "体验设计", count: 7 }, { id: "visual", name: "视觉设计", count: 5 }] }, { id: "dev", name: "研发部", count: 18, children: [{ id: "client", name: "客户端", count: 10 }, { id: "server", name: "服务端", count: 8 }] }]
function recordSort(event: any): void { status.value = event.order == "" ? "已恢复原始顺序" : event.key + " 排序：" + (event.order == "asc" ? "升序" : "降序") }
function recordRow(event: any): void { status.value = "当前商品：" + event.row.name }
function displayValue(value: any, row: any, column: any): string { const text = column.formatter == null ? value : column.formatter(value, row, column); return text == null ? "" : text.toString() }
function replenish(row: any): void { const item = rows.value.find((entry: any): boolean => entry === row); if (item == null) return; item.stock += 20; replenished.value++; status.value = item.name + " 已补货 20，当前库存 " + item.stock }
function removeSelected(): void { const count = selected.value.length; rows.value = rows.value.filter((item: any): boolean => selected.value.indexOf(item.id) < 0); table.value?.clearSelection(); status.value = "已删除 " + count + " 项，剩余 " + rows.value.length + " 项" }
function restoreRows(): void { rows.value = initialRows(); selected.value = []; query.value = ""; page.value = 1; replenished.value = 0; status.value = "已恢复库存数据" }
</script>
<style>
@import "../demo-workbench.css";
.demo-stock-status { padding: 6rpx 10rpx; border-radius: 8rpx; font-size: 22rpx; }
.demo-stock-low { color: #b45309; background-color: #fef3c7; }
.demo-stock-ready { color: #166534; background-color: #dcfce7; }
.demo-stock-action { display: flex; flex-direction: row; align-items: center; }
.demo-stock-replenish { margin: 0; padding: 0 12rpx; color: #ffffff; background-color: #17796b; border-radius: 8rpx; font-size: 22rpx; line-height: 52rpx; }
.demo-stock-value { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; }
.demo-stock-summary { margin-top: 12rpx; }
</style>
