<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <scroll-view class="divider-demo-scroll" direction="vertical">
      <view class="divider-demo-page">
        <text class="divider-demo-title">Divider 分割线</text>

        <view class="divider-demo-section">
          <text class="divider-demo-heading">交互预览</text>
          <view id="divider-preview" data-testid="divider-preview" class="divider-demo-preview">
            <XtfDivider :vertical="vertical" :align="align" :type="lineType" :text="text"
              :length="demoLength" :thickness="demoThickness" :inset="inset"
              :color="color" :text-color="textColor" :content-variant="variant"
              background="#e0f2f1" border-color="#0f766e" glow-color="#fb7185"
              :content-padding="contentPadding" :icon="showIcon ? 'star' : ''" :icon-position="iconPosition" />
          </view>
          <view class="divider-demo-control">
            <text class="divider-demo-label">垂直</text>
            <switch id="divider-vertical" data-testid="divider-vertical" :checked="vertical" @change="vertical = $event.detail.value" />
          </view>
          <view class="divider-demo-options">
            <button v-for="item in aligns" :key="item" :id="'divider-align-' + item" :data-testid="'divider-align-' + item"
              class="divider-demo-option" :class="align == item ? 'divider-demo-selected' : ''" @click="align = item">{{ item }}</button>
          </view>
          <view class="divider-demo-options">
            <button v-for="item in types" :key="item" :id="'divider-type-' + item" :data-testid="'divider-type-' + item"
              class="divider-demo-option" :class="lineType == item ? 'divider-demo-selected' : ''" @click="lineType = item">{{ item }}</button>
          </view>
          <view class="divider-demo-options">
            <button v-for="item in variants" :key="item" :id="'divider-variant-' + item" :data-testid="'divider-variant-' + item"
              class="divider-demo-option" :class="variant == item ? 'divider-demo-selected' : ''" @click="variant = item">{{ item }}</button>
          </view>
          <input id="divider-text" data-testid="divider-text" class="divider-demo-input" :value="text" placeholder="分割线文字" @input="text = $event.detail.value" />
          <view class="divider-demo-options">
            <button id="divider-long-text" data-testid="divider-long-text" class="divider-demo-option" @click="text = longText">长文本</button>
            <button id="divider-empty-text" data-testid="divider-empty-text" class="divider-demo-option" @click="text = ''">清空文字</button>
            <button id="divider-reset" data-testid="divider-reset" class="divider-demo-option" @click="reset">重置</button>
          </view>
          <view class="divider-demo-control">
            <text class="divider-demo-label">图标</text>
            <switch id="divider-icon" data-testid="divider-icon" :checked="showIcon" @change="showIcon = $event.detail.value" />
            <button id="divider-icon-position" data-testid="divider-icon-position" class="divider-demo-option" @click="iconPosition = iconPosition == 'start' ? 'end' : 'start'">{{ iconPosition }}</button>
          </view>
          <view class="divider-demo-control">
            <text class="divider-demo-label">尺寸单位</text>
            <picker id="divider-unit" data-testid="divider-unit" :range="units" :value="unitIndex" @change="unitIndex = parseInt($event.detail.value)">
              <view class="divider-demo-picker"><text class="divider-demo-label">{{ units[unitIndex] }}</text></view>
            </picker>
          </view>
          <text id="divider-dimensions" data-testid="divider-dimensions" class="divider-demo-caption">length: {{ demoLength }} / thickness: {{ demoThickness }}</text>
          <text class="divider-demo-label">长度 {{ lengthValue }}</text>
          <slider id="divider-length" data-testid="divider-length" :value="lengthValue" :min="0" :max="100" :step="1" @change="lengthValue = $event.detail.value" />
          <text class="divider-demo-label">粗细 {{ thicknessValue }}</text>
          <slider id="divider-thickness" data-testid="divider-thickness" :value="thicknessValue" :min="0" :max="8" :step="1" @change="thicknessValue = $event.detail.value" />
          <text class="divider-demo-label">缩进 {{ inset }} rpx</text>
          <slider id="divider-inset" data-testid="divider-inset" :value="inset" :min="0" :max="40" @change="inset = $event.detail.value" />
          <view class="divider-demo-control">
            <text class="divider-demo-label">线条颜色</text>
            <button v-for="(item, index) in colors" :key="item" :id="'divider-color-' + index" :data-testid="'divider-color-' + index"
              class="divider-demo-swatch" :style="{ backgroundColor: item }" :aria-label="item" @click="color = item">{{ color == item ? '✓' : '' }}</button>
          </view>
          <view class="divider-demo-control">
            <text class="divider-demo-label">文字独立颜色</text>
            <switch id="divider-text-color" data-testid="divider-text-color" :checked="textColor.length > 0" @change="textColor = $event.detail.value ? '#be123c' : ''" />
          </view>
          <view class="divider-demo-control">
            <text class="divider-demo-label">数字内边距</text>
            <switch id="divider-padding" data-testid="divider-padding" :checked="numericPadding" @change="numericPadding = $event.detail.value" />
          </view>
        </view>

        <view class="divider-demo-section">
          <text class="divider-demo-heading">线条对照</text>
          <view v-for="item in types" :key="item" :id="'divider-sample-' + item" :data-testid="'divider-sample-' + item" class="divider-demo-sample">
            <text class="divider-demo-caption">{{ item }}</text>
            <XtfDivider :type="item" thickness="3px" color="#0f766e" glow-color="#fb7185" />
          </view>
          <view class="divider-demo-vertical-row">
            <view v-for="item in types" :key="item" :id="'divider-vsample-' + item" :data-testid="'divider-vsample-' + item" class="divider-demo-vertical-sample">
              <XtfDivider vertical :type="item" length="64px" thickness="3px" color="#0f766e" glow-color="#fb7185" />
              <text class="divider-demo-caption">{{ item }}</text>
            </view>
          </view>
        </view>

        <view class="divider-demo-section">
          <text class="divider-demo-heading">主题与内容</text>
          <view v-for="item in themes" :key="item" :id="'divider-theme-' + item" :data-testid="'divider-theme-' + item" class="divider-demo-sample">
            <XtfDivider :theme="item" :text="item" content-variant="chip" />
          </view>
          <view id="divider-slots" data-testid="divider-slots" class="divider-demo-sample">
            <XtfDivider text="此文字被默认插槽替换" icon="star" content-variant="outline" border-color="#0f766e" :content-padding="8">
              <template #icon><XtfIcon name="success" size="xs" theme="success" /></template>
              <text class="divider-demo-slot-text">{{ slotComplete ? '已完成' : '待处理' }}</text>
              <template #icon-end><XtfIcon name="arrow_down" size="xs" theme="info" /></template>
            </XtfDivider>
          </view>
          <button id="divider-slot-toggle" data-testid="divider-slot-toggle" class="divider-demo-option" @click="slotComplete = !slotComplete">切换状态</button>
          <view id="divider-slot-presence" data-testid="divider-slot-presence" class="divider-demo-sample">
            <XtfDivider><template v-if="slotVisible" #default><text class="divider-demo-slot-text">动态插槽</text></template></XtfDivider>
          </view>
          <view class="divider-demo-control"><text class="divider-demo-label">显示插槽</text><switch id="divider-slot-visible" data-testid="divider-slot-visible" :checked="slotVisible" @change="slotVisible = $event.detail.value" /></view>
        </view>

        <view class="divider-demo-section">
          <text class="divider-demo-heading">边界</text>
          <view id="divider-narrow" data-testid="divider-narrow" class="divider-demo-narrow"><XtfDivider :text="longText" align="left" icon="star" content-variant="chip" /></view>
          <view id="divider-unbroken" data-testid="divider-unbroken" class="divider-demo-narrow"><XtfDivider text="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" /></view>
          <view id="divider-short-vertical" data-testid="divider-short-vertical" class="divider-demo-vertical-row"><text class="divider-demo-label">短线 12px</text><XtfDivider vertical length="12px" thickness="2px" /><XtfDivider vertical length="12px" thickness="2px" type="dotted" /></view>
          <view id="divider-thick-double" data-testid="divider-thick-double" class="divider-demo-sample"><XtfDivider type="double" thickness="8px" /></view>
          <view id="divider-zero" data-testid="divider-zero" class="divider-demo-sample"><XtfDivider :length="0" :thickness="0" /></view>
          <view id="divider-custom-style" data-testid="divider-custom-style" class="divider-demo-sample"><XtfDivider custom-class="divider-contract-marker" :custom-style="customStyle" thickness="3px" /></view>
          <text id="divider-style-source" data-testid="divider-style-source" class="divider-demo-caption">{{ JSON.stringify(customStyle) }}</text>
        </view>
      </view>
    </scroll-view>
  </XtfConfigProvider>
</template>

<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { computed, ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfDivider from "@/uni_modules/xtf-linkuiunix/components/xtf-divider/xtf-divider.uvue"
import XtfIcon from "@/uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"

type DividerType = "solid" | "dashed" | "dotted" | "fade" | "gradient" | "glow" | "double"
type DividerAlign = "left" | "center" | "right"
type DividerVariant = "plain" | "chip" | "outline" | "glass"
type DividerTheme = "primary" | "success" | "warning" | "danger" | "info" | "inverse"
const types: DividerType[] = ["solid", "dashed", "dotted", "fade", "gradient", "glow", "double"]
const aligns: DividerAlign[] = ["left", "center", "right"]
const variants: DividerVariant[] = ["plain", "chip", "outline", "glass"]
const themes: DividerTheme[] = ["primary", "success", "warning", "danger", "info", "inverse"]
const units = ["数字（rpx）", "数字字符串（rpx）", "px", "rpx", "% 长度 / px 粗细", "默认长度"]
const colors = ["#0f766e", "#be123c", "#2563eb", "#202124"]
const longText = "动态长文本：订单、付款与配送状态更新后，内容仍应在容器内部换行，不遮挡两侧布局。"
const vertical = ref(false)
const align = ref<DividerAlign>("center")
const lineType = ref<DividerType>("solid")
const variant = ref<DividerVariant>("plain")
const text = ref("订单状态")
const showIcon = ref(false)
const iconPosition = ref<"start" | "end">("start")
const unitIndex = ref(2)
const lengthValue = ref(100)
const thicknessValue = ref(3)
const inset = ref(0)
const color = ref("#0f766e")
const textColor = ref("")
const numericPadding = ref(false)
const slotComplete = ref(true)
const slotVisible = ref(true)
const customStyle = { width: "75%", "--xtf-divider-line": "#be123c" } as UTSJSONObject
const demoLength = computed((): string | number => {
  if (unitIndex.value == 0) return lengthValue.value
  if (unitIndex.value == 1) return lengthValue.value.toString()
  if (unitIndex.value == 2) return lengthValue.value.toString() + "px"
  if (unitIndex.value == 3) return lengthValue.value.toString() + "rpx"
  if (unitIndex.value == 4) return lengthValue.value.toString() + "%"
  return ""
})
const demoThickness = computed((): string | number => {
  if (unitIndex.value == 0) return thicknessValue.value
  if (unitIndex.value == 1) return thicknessValue.value.toString()
  return thicknessValue.value.toString() + (unitIndex.value == 3 ? "rpx" : "px")
})
const contentPadding = computed((): string | number => numericPadding.value ? 12 : "4px 10px")
function reset() {
  vertical.value = false
  align.value = "center"
  lineType.value = "solid"
  variant.value = "plain"
  text.value = "订单状态"
  showIcon.value = false
  iconPosition.value = "start"
  unitIndex.value = 2
  lengthValue.value = 100
  thicknessValue.value = 3
  inset.value = 0
  color.value = "#0f766e"
  textColor.value = ""
  numericPadding.value = false
}
defineOptions({ styleIsolation: "isolated" })
</script>

<style>
.divider-demo-scroll { display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%; min-height: 0; }
.divider-demo-page { display: flex; flex-direction: column; width: 100%; padding: 16px; padding-bottom: 40px; background-color: var(--xtf-color-page, #f8fafc); }
.divider-demo-title { color: var(--xtf-color-text, #0f172a); font-size: 24px; font-weight: 700; }
.divider-demo-section { display: flex; flex-direction: column; margin-top: 20px; padding-top: 16px; border-top-width: 1px; border-top-style: solid; border-top-color: var(--xtf-color-border, #cbd5e1); }
.divider-demo-heading { margin-bottom: 12px; color: var(--xtf-color-text, #0f172a); font-size: 18px; font-weight: 600; }
.divider-demo-preview { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 180px; padding: 12px; background-color: var(--xtf-color-surface, #ffffff); border-width: 1px; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); }
.divider-demo-control { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.divider-demo-label { margin-right: 12px; color: var(--xtf-color-text, #0f172a); font-size: 14px; }
.divider-demo-caption { margin-top: 8px; margin-bottom: 8px; color: var(--xtf-color-text-secondary, #475569); font-size: 12px; word-break: break-all; }
.divider-demo-options { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
.divider-demo-option { display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 36px; margin: 4px 8px 4px 0; padding: 4px 10px; border-width: 1px; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 4px; background-color: var(--xtf-color-surface, #ffffff); color: var(--xtf-color-text-secondary, #334155); font-size: 13px; line-height: 20px; }
.divider-demo-selected { border-color: #0f766e; background-color: #e0f2f1; color: #115e59; }
.divider-demo-input { height: 40px; margin-top: 12px; padding: 8px; border-width: 1px; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 4px; color: var(--xtf-color-text, #0f172a); background-color: var(--xtf-color-surface, #ffffff); font-size: 14px; }
.divider-demo-picker { display: flex; flex-direction: row; min-height: 36px; align-items: center; padding: 8px; background-color: var(--xtf-color-surface-muted, #e2e8f0); }
.divider-demo-swatch { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 4px 8px 4px 0; padding: 0; border-radius: 4px; color: #ffffff; font-size: 18px; }
.divider-demo-sample { display: flex; flex-direction: column; margin-top: 12px; margin-bottom: 12px; }
.divider-demo-vertical-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 48px; margin-top: 16px; }
.divider-demo-vertical-sample { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; margin-bottom: 12px; }
.divider-demo-slot-text { min-width: 0; flex-shrink: 1; color: #0f766e; font-size: 12px; }
.divider-demo-narrow { display: flex; flex-direction: column; width: 100%; max-width: 160px; margin-top: 16px; padding: 8px; border-width: 1px; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); }
</style>
