<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="descriptions-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="descriptions-demo-page xtf-safe-bottom xtf-page-scroll-content">
        <view class="descriptions-demo-hero">
          <XtfText class="descriptions-demo-kicker" level="micro" color="inverse" text="XTF LINKUI / DISPLAY" />
          <XtfText class="descriptions-demo-title" level="display" color="inverse" text="Descriptions" />
          <XtfText class="descriptions-demo-intro" level="caption" color="inverse" text="以数据或声明式子项展示结构化详情。" />
        </view>
        <view class="descriptions-demo-section">
          <XtfDescriptions title="订单信息" description="items 数据模式" :items="orderItems" :columns="2" label-width="110rpx">
            <template #extra><XtfButton label="刷新" size="sm" type="outline" @click="refreshCount += 1" /></template>
            <template #label="slotProps"><text class="descriptions-demo-label">{{ slotProps.item['label'] }}</text></template>
          </XtfDescriptions>
          <text class="descriptions-demo-note">刷新次数：{{ refreshCount }}</text>
        </view>
        <view class="descriptions-demo-section">
          <view class="descriptions-demo-controls">
            <XtfButton label="切换列数" size="sm" type="outline" @click="columns = columns == 2 ? 3 : 2" />
            <XtfButton label="切换布局" size="sm" type="light" @click="vertical = !vertical" />
          </view>
          <XtfDescriptions title="商品参数" :items="productItems" :columns="columns" :layout="vertical ? 'vertical' : 'horizontal'" bordered size="sm" />
        </view>
        <view class="descriptions-demo-section">
          <XtfDescriptions title="声明式信息" description="DescriptionItem 可单独设置 span" :columns="2" :gap="12">
            <XtfDescriptionItem label="联系人" value="陈经理" />
            <XtfDescriptionItem label="联系电话" value="138 0000 0000" />
            <XtfDescriptionItem label="配送地址" :span="2"><text class="descriptions-demo-address">深圳市南山区科技园</text></XtfDescriptionItem>
          </XtfDescriptions>
        </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 XtfText from "@/uni_modules/xtf-linkuiunix/components/xtf-text/xtf-text.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfDescriptions from "@/uni_modules/xtf-linkuiunix/components/xtf-descriptions/xtf-descriptions.uvue"
import XtfDescriptionItem from "@/uni_modules/xtf-linkuiunix/components/xtf-description-item/xtf-description-item.uvue"
const orderItems = [{ label: "订单号", value: "SO-20261029" }, { label: "状态", value: "待发货" }, { label: "客户", value: "星海商贸" }, { label: "金额", value: "CNY 1,280.00" }] as Array<any>
const productItems = [{ label: "型号", value: "XTF-A12" }, { label: "材质", value: "铝合金" }, { label: "重量", value: "2.4kg" }, { label: "质保", value: "24个月" }, { label: "备注", value: "支持定制", span: 2 }] as Array<any>
const columns = ref(2)
const vertical = ref(false)
const refreshCount = ref(0)
</script>

<style>
.descriptions-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.descriptions-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx; background-color: var(--xtf-color-page, #f8fafc); }
.descriptions-demo-hero { display: flex; flex-direction: column; padding: 32rpx; border-radius: 16rpx; background-color: #0f766e; }
.descriptions-demo-kicker { color: #ffffff; font-size: 20rpx; font-weight: 600; }
.descriptions-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 52rpx; font-weight: 700; }
.descriptions-demo-intro { margin-top: 14rpx; color: #ffffff; font-size: 24rpx; line-height: 1.5; }
.descriptions-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); }
.descriptions-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20rpx; }
.descriptions-demo-label { color: #0f766e; font-size: 24rpx; font-weight: 600; }
.descriptions-demo-note { margin-top: 12rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 22rpx; }
.descriptions-demo-address { color: var(--xtf-color-text, #0f172a); font-size: 24rpx; }
</style>
