<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="result-demo-scroll xtf-page-scroll" direction="vertical">
      <view class="result-demo-page xtf-page-scroll-content">
        <text class="result-demo-title">Result 结果</text>
        <view class="result-demo-section">
          <text class="result-demo-heading">流程状态</text>
          <view class="result-demo-controls"><button v-for="item in statuses" :id="'result-status-' + item" :key="item" class="result-demo-control" :type="status == item ? 'primary' : 'default'" size="mini" @click="status = item">{{ item }}</button></view>
          <view class="result-demo-setting"><text class="result-demo-label">浮动效果</text><switch id="result-float" :checked="floating" @change="floating = !floating" /></view>
          <XtfResult id="result-preset" :status="status" :float="floating" primary-text="查看订单" secondary-text="返回列表" extra="订单 A001" @primary-click="primary" @secondary-click="secondary" />
          <text id="result-events" class="result-demo-state">主操作={{ primaryCount }} 次操作={{ secondaryCount }} 有事件={{ hasEvent }}</text>
          <text id="result-business" class="result-demo-state">{{ business }}</text>
        </view>
        <view class="result-demo-section">
          <text class="result-demo-heading">自定义标题、说明与图标</text>
          <input id="result-title-input" class="result-demo-input" v-model="title" placeholder="结果标题" />
          <input id="result-desc-input" class="result-demo-input" v-model="description" placeholder="结果说明" />
          <button id="result-custom-toggle" class="result-demo-control" size="mini" @click="custom = !custom">切换图标与主题</button>
          <XtfResult id="result-custom" status="success" :title="title" :description="description" :icon="custom ? 'heart' : 'check_circle'" :theme="custom ? 'danger' : 'success'" :float="false" :custom-style="custom ? objectStyle : 'background-color: #eff6ff; padding: 12px;'" extra="凭此订单号查询进度" />
        </view>
        <view class="result-demo-section">
          <text class="result-demo-heading">自定义操作与补充信息</text>
          <view class="result-demo-setting"><text class="result-demo-label">允许重新提交</text><switch id="result-enable" :checked="enabled" @change="enabled = !enabled" /></view>
          <XtfResult id="result-slots" :status="submitted ? 'success' : 'error'" :title="submitted ? '订单已重新提交' : '订单提交失败'" description="订单 A001 · 金额 128.00 元" primary-text="不会显示的默认按钮" extra="不会显示的默认说明" :float="false" @primary-click="primary">
            <template #actions><XtfButton id="result-submit" label="重新提交" :disabled="!enabled || submitted" @click="submit" /></template>
            <template #extra><text id="result-slot-extra" class="result-demo-state">提交次数={{ submissions }} · 订单保留 30 分钟</text></template>
          </XtfResult>
          <button id="result-reset" class="result-demo-control" size="mini" @click="submitted = false; submissions = 0">重置订单</button>
        </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 XtfResult from "@/uni_modules/xtf-linkuiunix/components/xtf-result/xtf-result.uvue"
import XtfButton from "@/uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
const statuses = ['success', 'error', 'warning', 'info', 'pending', '403', '404', '500', 'unknown']
const status = ref('success'), floating = ref(true), custom = ref(false), enabled = ref(false), submitted = ref(false)
const title = ref('订单已受理'), description = ref('订单 A001 已进入处理队列，请保留订单号以便查询。')
const primaryCount = ref(0), secondaryCount = ref(0), submissions = ref(0), hasEvent = ref(false)
const business = ref('当前订单：A001'), objectStyle = { backgroundColor: '#f0fdf4', padding: '12px' }
function primary(event: UniPointerEvent): void { primaryCount.value++; hasEvent.value = event != null; business.value = '订单详情：A001 · 128.00 元' }
function secondary(event: UniPointerEvent): void { secondaryCount.value++; hasEvent.value = event != null; business.value = '订单列表：A001、A002' }
function submit(): void { if (!enabled.value || submitted.value) return; submissions.value++; submitted.value = true }
</script>
<style>
.result-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 0; }
.result-demo-page { display: flex; flex-direction: column; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.result-demo-title { font-size: 26px; font-weight: 700; color: var(--xtf-color-text, #172033); }
.result-demo-section { display: flex; flex-direction: column; padding: 16px 0; margin-top: 12px; border-top: 1px solid var(--xtf-color-border, #dbe2ea); }
.result-demo-heading { font-size: 18px; font-weight: 600; color: var(--xtf-color-text, #172033); margin-bottom: 12px; }
.result-demo-controls { display: flex; flex-direction: row; flex-wrap: wrap; }
.result-demo-control { margin: 4px; font-size: 14px; }
.result-demo-setting { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 8px 0; }
.result-demo-label { font-size: 15px; color: var(--xtf-color-text-secondary, #334155); }
.result-demo-state { font-size: 14px; line-height: 1.6; color: var(--xtf-color-text-secondary, #475569); margin-top: 8px; }
.result-demo-input { height: 42px; padding: 8px; margin-bottom: 8px; background-color: var(--xtf-color-surface, #ffffff); border: 1px solid var(--xtf-color-border, #cbd5e1); color: var(--xtf-color-text, #0f172a); font-size: 15px; }
</style>
