<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="segmented-demo-scroll" direction="vertical">
      <view class="segmented-demo-page">
        <text class="segmented-demo-title">Segmented 分段器</text>

        <view id="seg-basic" class="segmented-demo-section">
          <text class="segmented-demo-heading">受控索引与事件</text>
          <XtfSegmented :current="basicCurrent" :values="basicValues" block @update:current="updateBasic" @change="onChange" @clickItem="onClickItem" />
          <button id="seg-parent-next" class="segmented-demo-button" size="mini" @click="nextBasic">父级切换</button>
          <button id="seg-lock" class="segmented-demo-button" size="mini" @click="acceptUpdate = !acceptUpdate">{{ acceptUpdate ? '回写：开' : '回写：关' }}</button>
          <text id="seg-basic-state" class="segmented-demo-note">current={{ basicCurrent }}；update={{ updateCount }}；change={{ changeCount }}；clickItem={{ clickCount }}</text>
          <text id="seg-event-order" class="segmented-demo-note">{{ eventOrder }}</text>
          <text id="seg-event-payload" class="segmented-demo-note">{{ lastPayload }}</text>
        </view>

        <view id="seg-object" class="segmented-demo-section">
          <text class="segmented-demo-heading">对象、零值与禁用项</text>
          <XtfSegmented v-model:current="objectCurrent" :options="objectOptions" :values="basicValues" block @change="onObjectChange" />
          <button id="seg-toggle-disabled" class="segmented-demo-button" size="mini" @click="toggleDisabled">{{ itemDisabled ? '启用末项' : '禁用末项' }}</button>
          <text id="seg-object-state" class="segmented-demo-note">索引={{ objectCurrent }}；事件={{ objectCount }}；{{ objectMessage }}</text>
        </view>

        <view id="seg-dynamic" class="segmented-demo-section">
          <text class="segmented-demo-heading">动态数据与优先级</text>
          <XtfSegmented v-model:current="dynamicCurrent" :options="dynamicOptions" :values="dynamicValues" block @change="onDynamicChange" />
          <button id="seg-replace" class="segmented-demo-button" size="mini" @click="replaceOptions">替换 options</button>
          <button id="seg-fallback" class="segmented-demo-button" size="mini" @click="useValues">清空 options</button>
          <button id="seg-empty" class="segmented-demo-button" size="mini" @click="clearAll">清空全部</button>
          <button id="seg-restore" class="segmented-demo-button" size="mini" @click="restoreData">恢复数据</button>
          <text id="seg-dynamic-state" class="segmented-demo-note">options={{ dynamicOptions.length }}；values={{ dynamicValues.length }}；索引={{ dynamicCurrent }}；事件={{ dynamicCount }}；{{ dynamicMessage }}</text>
        </view>

        <view id="seg-style" class="segmented-demo-section">
          <text class="segmented-demo-heading">外观与根节点样式</text>
          <XtfSegmented v-model:current="styleCurrent" :values="basicValues" :style-type="textStyle ? 'text' : 'button'" :size="sizes[sizeIndex]" :block="fullWidth" :active-color="greenColor ? '#15803d' : '#c2410c'" custom-class="segmented-demo-custom" :custom-style="objectStyle ? customObjectStyle : customStringStyle" />
          <button id="seg-style-type" class="segmented-demo-button" size="mini" @click="textStyle = !textStyle">样式：{{ textStyle ? 'text' : 'button' }}</button>
          <button id="seg-size" class="segmented-demo-button" size="mini" @click="sizeIndex = (sizeIndex + 1) % 3">尺寸：{{ sizes[sizeIndex] }}</button>
          <button id="seg-block" class="segmented-demo-button" size="mini" @click="fullWidth = !fullWidth">全宽：{{ fullWidth }}</button>
          <button id="seg-color" class="segmented-demo-button" size="mini" @click="greenColor = !greenColor">颜色：{{ greenColor ? '绿色' : '橙色' }}</button>
          <button id="seg-custom-style" class="segmented-demo-button" size="mini" @click="objectStyle = !objectStyle">customStyle：{{ objectStyle ? '对象' : '字符串' }}</button>
        </view>

        <view id="seg-boundary" class="segmented-demo-section">
          <text class="segmented-demo-heading">字符串索引与边界</text>
          <XtfSegmented :current="boundaryCurrent" :values="boundaryValues" block @update:current="updateBoundary" />
          <button id="seg-string-index" class="segmented-demo-button" size="mini" @click="boundaryCurrent = '1'">字符串索引 1</button>
          <button id="seg-invalid-index" class="segmented-demo-button" size="mini" @click="boundaryCurrent = 'Infinity'">非有限索引</button>
          <button id="seg-outside-index" class="segmented-demo-button" size="mini" @click="boundaryCurrent = '99'">越界索引 99</button>
          <text id="seg-boundary-state" class="segmented-demo-note">输入={{ boundaryCurrent }}</text>
        </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 XtfSegmented from "../../../uni_modules/xtf-linkuiunix/components/xtf-segmented/xtf-segmented.uvue"

const basicValues = ['日', '周', '月'] as any[]
const basicCurrent = ref(0)
const acceptUpdate = ref(true)
const updateCount = ref(0)
const changeCount = ref(0)
const clickCount = ref(0)
const eventOrder = ref('尚无事件')
const lastPayload = ref('尚无 payload')
function updateBasic(index: number): void {
  updateCount.value++
  eventOrder.value = 'update:current(' + index.toString() + ')'
  if (acceptUpdate.value) basicCurrent.value = index
}
function onChange(payload: UTSJSONObject): void {
  changeCount.value++
  eventOrder.value += ' → change'
  lastPayload.value = JSON.stringify(payload)
}
function onClickItem(payload: UTSJSONObject): void {
  clickCount.value++
  eventOrder.value += ' → clickItem'
  lastPayload.value = JSON.stringify(payload)
}
function nextBasic(): void { basicCurrent.value = (basicCurrent.value + 1) % 3 }

const objectCurrent = ref(2)
const itemDisabled = ref(true)
const objectCount = ref(0)
const objectMessage = ref('等待选择')
const objectOptions = ref<any[]>(makeObjectOptions(true))
function makeObjectOptions(disabled: boolean): any[] {
  return [{ label: '零', value: 0 }, { text: '否', value: false }, { label: '全部', value: 'all' }, { label: '末项', value: 'last', disabled }]
}
function toggleDisabled(): void {
  itemDisabled.value = !itemDisabled.value
  objectOptions.value = makeObjectOptions(itemDisabled.value)
}
function onObjectChange(payload: UTSJSONObject): void {
  objectCount.value++
  objectMessage.value = JSON.stringify(payload)
}

const dynamicCurrent = ref(0)
const dynamicOptions = ref<any[]>([{ label: '订单', value: 'order' }, { label: '用户', value: 'user' }])
const dynamicValues = ref<any[]>(['回退 A', '回退 B'])
const dynamicCount = ref(0)
const dynamicMessage = ref('等待选择')
function replaceOptions(): void {
  dynamicOptions.value = [{ text: '新甲', value: 'new-a' }, { label: '新乙', value: 'new-b' }, { text: '新丙' }]
}
function useValues(): void { dynamicOptions.value = [] as any[] }
function clearAll(): void {
  dynamicOptions.value = [] as any[]
  dynamicValues.value = [] as any[]
}
function restoreData(): void {
  dynamicOptions.value = [{ label: '订单', value: 'order' }, { label: '用户', value: 'user' }]
  dynamicValues.value = ['回退 A', '回退 B']
  dynamicCurrent.value = 0
}
function onDynamicChange(payload: UTSJSONObject): void {
  dynamicCount.value++
  dynamicMessage.value = JSON.stringify(payload)
}

const styleCurrent = ref(0)
const textStyle = ref(false)
const sizes = ['sm', 'md', 'lg']
const sizeIndex = ref(1)
const fullWidth = ref(true)
const greenColor = ref(false)
const objectStyle = ref(true)
const customObjectStyle = { borderColor: '#15803d', borderWidth: '2px', borderRadius: '8px' } as UTSJSONObject
const customStringStyle = 'border-color: #c2410c; border-width: 2px; border-radius: 4px;'
const boundaryCurrent = ref('1')
const boundaryValues = [0, false, null] as any[]
function updateBoundary(index: number): void { boundaryCurrent.value = index.toString() }
</script>

<style>
.segmented-demo-scroll { flex: 1; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.segmented-demo-page { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; padding: 16px; background-color: var(--xtf-color-page, #f8fafc); }
.segmented-demo-title { color: var(--xtf-color-text, #0f172a); font-size: 24px; font-weight: 700; }
.segmented-demo-section { display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #cbd5e1); }
.segmented-demo-heading { margin-bottom: 12px; color: var(--xtf-color-text, #0f172a); font-size: 16px; font-weight: 600; }
.segmented-demo-button { align-self: flex-start; margin-left: 0; margin-right: 0; margin-top: 10px; font-size: 13px; }
.segmented-demo-note { margin-top: 10px; color: var(--xtf-color-text-secondary, #475569); font-size: 12px; line-height: 19px; word-break: break-all; }
</style>
