<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">COMMERCE / 06</text><text class="lab-title">Goods Nav 商品导航</text></view>
    <view class="lab-section"><text class="lab-heading">商品详情</text><view class="product"><image class="product-image" src="/static/logo.png" mode="aspectFit" /><view class="lab-copy"><text class="lab-item-title">Link 组件开发套装</text><text class="lab-item-meta">数字商品 · 标准版</text><text class="product-price">¥ 99.00</text></view></view><XtfGoodsNav :options="options" :button-group="buttons" @click="optionClick" @button-click="buttonClick" /><text class="lab-result">{{ status }}</text></view>
    <view class="lab-section"><text class="lab-heading">直角填充</text><XtfGoodsNav fill :options="[{ icon: 'storefront', text: '店铺' }]" :button-group="[{ text: '联系商家', backgroundColor: '#2d6d88' }, { text: '立即预订', backgroundColor: '#17796b' }]" @click="optionClick" @button-click="recordAction" /></view>
    <view class="lab-section"><text class="lab-heading">单按钮与收藏</text><XtfGoodsNav :options="[{ icon: 'favorite', text: favorite ? '已收藏' : '收藏' }]" :button-group="[{ text: '到货提醒', backgroundColor: '#3d4851' }]" @click="favorite = !favorite; status = favorite ? '已收藏商品' : '已取消收藏'" @button-click="status = '已订阅到货提醒（本地演示）'" /><view class="lab-tools"><button class="lab-button lab-button-secondary" @click="cart = 0; status = '购物车已清空'">清空购物车</button></view></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 XtfGoodsNav from "@/uni_modules/xtf-linkuiunix/components/xtf-goods-nav/xtf-goods-nav.uvue"
const cart = ref(0)
const favorite = ref(false)
const status = ref("购物车为空 · 本地交互演示")
const options = computed(() => [{ icon: "storefront", text: "店铺" }, { icon: "shopping_cart", text: "购物车", info: cart.value > 0 ? cart.value : null }])
const buttons = [{ text: "加入购物车", backgroundColor: "#e7eee9", color: "#225448" }, { text: "立即购买", backgroundColor: "#17796b" }]
function optionClick(event: any): void { status.value = event.content.text == "购物车" ? "购物车中有 " + cart.value.toString() + " 件商品" : "Link 官方店铺" }
function buttonClick(event: any): void { if (event.index == 0) { cart.value += 1; status.value = "已加入购物车 · 共 " + cart.value.toString() + " 件" } else status.value = "模拟订单已创建，未发起真实支付" }
function recordAction(event: any): void { status.value = event.content.text + "（本地演示）" }
</script>
<style>
@import "../demo-workbench.css";
.product { display: flex; flex-direction: row; align-items: center; padding: 24rpx; background-color: var(--xtf-color-surface, #ffffff); }.product-image { width: 136rpx; height: 136rpx; margin-right: 24rpx; border-radius: 8rpx; background-color: #f0f5f1; }.product-price { margin-top: 16rpx; color: #bd4554; font-size: 32rpx; font-weight: 700; }
</style>
