<template>
  <XtfConfigProvider class="demo-theme-root" :theme="demoTheme" component-size="md" :safe-area="true">
    <view class="select-demo-shell">
      <scroll-view class="select-demo-scroll xtf-page-scroll" direction="vertical">
        <view class="select-demo-page xtf-safe-bottom xtf-page-scroll-content">
          <view class="select-demo-hero">
            <view class="select-demo-hero-copy">
              <text class="select-demo-kicker">XTF LINKUI / COMPONENTS</text>
              <text class="select-demo-title">Select</text>
              <text class="select-demo-intro">清晰的选择状态、可控的编辑草稿与统一弹层体验。</text>
            </view>
            <view class="select-demo-theme-pill">
              <view class="select-demo-theme-dot"></view>
              <text class="select-demo-theme-text">{{ themeName }}</text>
            </view>
          </view>

          <view class="select-demo-section select-demo-feature-section">
            <view class="select-demo-section-heading">
              <view class="select-demo-section-heading-copy">
                <text class="select-demo-section-title">多选体验</text>
                <text class="select-demo-section-desc">先编辑草稿，点击保存后提交；勾选状态更加明确。</text>
              </view>
              <view class="select-demo-status-chip">
                <text class="select-demo-status-text">{{ members.length.toString() }} 已选</text>
              </view>
            </view>
             <XtfSelect v-model="members" label="参与成员" multiple clearable :max="3" :options="membersOptions" confirm-text="保存选择" cancel-text="放弃" @reach-max="record('已达到选择上限')" @confirm="record('成员选择已保存')">
              <template #tag="slotProps"><text class="select-demo-slot-tag">{{ slotProps.label }}</text></template>
              <template #toolbar><text class="select-demo-toolbar-note">可全选或反选当前结果</text></template>
              <template #footer><view class="select-demo-footer-row"><text class="select-demo-footer-note">最多选择 3 位成员</text><text class="select-demo-footer-state">{{ eventText }}</text></view></template>
             </XtfSelect>
          </view>

          <view class="select-demo-section">
            <view class="select-demo-section-heading">
              <view class="select-demo-section-heading-copy">
                <text class="select-demo-section-title">单选与搜索</text>
                <text class="select-demo-section-desc">适合城市、分类等单值字段，支持搜索与即时确认。</text>
              </view>
            </view>
             <XtfSelect v-model="city" label="所在城市" placeholder="请选择所在城市" :options="cities" clearable @change="record('城市已更新')" />
            <view class="select-demo-divider"></view>
             <XtfSelect v-model="product" label="账单分类" placeholder="搜索并选择分类" searchable :options="groupedOptions" @search="record('正在搜索分类')" />
          </view>

          <view class="select-demo-section">
            <view class="select-demo-section-heading">
              <view class="select-demo-section-heading-copy">
                <text class="select-demo-section-title">描述型选项</text>
                <text class="select-demo-section-desc">用副标题解释账户信息，并清晰区分禁用状态。</text>
              </view>
            </view>
             <XtfSelect v-model="account" label="结算账户" :options="accounts" :disabled-values="['cash']" clearable>
              <template #option="slotProps">
                <view class="select-demo-option">
                  <view class="select-demo-option-main">
                    <text class="select-demo-option-name">{{ slotProps.label }}</text>
                    <text class="select-demo-option-desc">{{ slotProps.desc }}</text>
                  </view>
                  <view v-if="slotProps.selected" class="select-demo-option-selected"><text class="select-demo-option-selected-text">已选</text></view>
                </view>
              </template>
             </XtfSelect>
             <view class="select-demo-divider"></view>
             <XtfSelect v-model="treeValue" label="账单树分类" tree default-expand-all :tree-check-strictly="false" :options="treeOptions" show-path placeholder="展开节点后选择子分类" @change="record('树形分类已更新')" />
            <view class="select-demo-readonly-row">
              <view class="select-demo-readonly-copy">
                <text class="select-demo-readonly-label">只读值</text>
                <text class="select-demo-readonly-value">招商银行储蓄卡</text>
              </view>
              <text class="select-demo-readonly-state">只读</text>
            </view>
          </view>

          <view id="select-identity-scene" class="select-demo-section">
            <text class="select-demo-section-title">业务值身份与外部清空</text>
            <XtfSelect id="select-identity" ref="identitySelect" v-model="identityValue" :options="identityOptions" :disabled="identityDisabled" clearable @change="record('业务值：' + JSON.stringify($event))" />
            <view class="select-demo-identity-actions"><button id="select-identity-fill" class="select-demo-identity-button" @click="identityValue = 0">回填数字 0</button><button id="select-identity-clear" class="select-demo-identity-button" @click="identityValue = ''">外部清空</button><button id="select-identity-open" class="select-demo-identity-button" @click="identitySelect?.open()">open()</button><button id="select-identity-disable" class="select-demo-identity-button" @click="identityDisabled = !identityDisabled">切换禁用</button></view>
            <text id="select-identity-result" class="select-demo-section-desc">{{ typeof identityValue }}：{{ JSON.stringify(identityValue) }}</text>
          </view>
          <view class="select-demo-section select-demo-popup-section">
            <view class="select-demo-section-heading">
              <view class="select-demo-section-heading-copy">
                <text class="select-demo-section-title">弹层行为</text>
                <text class="select-demo-section-desc">示例页面统一使用 xtf-popup 承载底部弹层和安全区。</text>
              </view>
              <XtfIcon name="info" size="md" theme="primary" variant="soft" round />
            </view>
            <view class="select-demo-popup-preview">
              <view class="select-demo-popup-preview-copy">
                <text class="select-demo-popup-preview-label">当前选择</text>
                <text class="select-demo-popup-preview-value">{{ popupChoice }}</text>
              </view>
              <XtfButton label="打开弹层" size="sm" type="outline" @click="openPopup" />
            </view>
          </view>
        </view>
      </scroll-view>

      <XtfPopup :show="popupVisible" position="bottom" :show-handle="true" :safe-area-inset-bottom="true" @update:show="popupVisible = $event">
        <view class="select-demo-popup-panel">
          <view class="select-demo-popup-header">
            <view class="select-demo-popup-header-copy">
              <text class="select-demo-popup-kicker">XTf POPUP</text>
              <text class="select-demo-popup-title">选择展示模式</text>
            </view>
            <view class="select-demo-popup-close" @click="popupVisible = false"><XtfIcon name="close" size="sm" theme="secondary" /></view>
          </view>
          <text class="select-demo-popup-hint">这是一个由 xtf-popup 承载的自定义选择面板。</text>
          <view class="select-demo-popup-options">
            <view v-for="(option, index) in popupOptions" :key="option" class="select-demo-popup-option" :class="(popupChoice == option ? 'select-demo-popup-option-active ' : '') + (index > 0 ? 'select-demo-popup-option-spaced' : '')" @click="choosePopupOption(option)">
              <view class="select-demo-popup-option-copy">
                <text class="select-demo-popup-option-name">{{ option }}</text>
                <text class="select-demo-popup-option-desc">{{ option == '底部弹层' ? '适合移动端快速选择' : '适合聚焦内容与确认操作' }}</text>
              </view>
              <view class="select-demo-popup-check" :class="popupChoice == option ? 'select-demo-popup-check-active' : ''"><text v-if="popupChoice == option" class="select-demo-popup-check-mark">✓</text></view>
            </view>
          </view>
          <XtfButton label="完成" block @click="popupVisible = false" />
        </view>
      </XtfPopup>
    </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 XtfSelect from "../../../uni_modules/xtf-linkuiunix/components/xtf-select/xtf-select.uvue"
import XtfIcon from "../../../uni_modules/xtf-linkuiunix/components/xtf-icon/xtf-icon.uvue"
import XtfButton from "../../../uni_modules/xtf-linkuiunix/components/xtf-button/xtf-button.uvue"
import XtfPopup from "../../../uni_modules/xtf-linkuiunix/components/xtf-popup/xtf-popup.uvue"
const city = ref("shanghai")
const members = ref(["amy", "ben"] as any[])
const product = ref("")
const account = ref("bank")
const treeValue = ref("food")
const popupVisible = ref(false)
const popupChoice = ref("底部弹层")
const eventText = ref("等待操作")
const identityValue = ref<any>(0)
const identityDisabled = ref(false)
const identitySelect = ref<any>(null)
const identityOptions = [{ label: "数字 0", value: 0 }, { label: "字符串 0", value: "0" }, { label: "布尔 false", value: false }]

const cities = [{ value: "beijing", label: "北京" }, { value: "shanghai", label: "上海" }, { value: "shenzhen", label: "深圳" }]
const membersOptions = [{ value: "amy", label: "Amy" }, { value: "ben", label: "Ben" }, { value: "cindy", label: "Cindy" }, { value: "david", label: "David" }]
const groupedOptions = [{ label: "日常支出", children: [{ value: "food", label: "餐饮", desc: "早餐、午餐和聚餐" }, { value: "traffic", label: "交通", desc: "通勤、打车和停车" }] }, { label: "固定账单", children: [{ value: "rent", label: "房租", desc: "每月固定居住开支" }, { value: "utility", label: "水电燃气", desc: "家庭公共事业费用" }] }]
const accounts = [{ value: "bank", label: "招商银行储蓄卡", desc: "尾号 4821" }, { value: "wallet", label: "电子钱包", desc: "日常小额消费" }, { value: "cash", label: "现金账户", desc: "当前不可用", disabled: true }]
const treeOptions = [{ value: "daily", label: "日常支出", children: [{ value: "food", label: "餐饮" }, { value: "traffic", label: "交通" }] }, { value: "fixed", label: "固定账单", children: [{ value: "rent", label: "房租" }, { value: "utility", label: "水电燃气" }] }]
const popupOptions = ["底部弹层", "居中弹层"]

const themeName = computed((): string => demoTheme.value == "dark" ? "Dark" : demoTheme.value == "neo" ? "Neo" : demoTheme.value == "china-red" ? "China Red" : "Light")
function record(value: string): void { eventText.value = value }
function openPopup(): void { popupVisible.value = true }
function choosePopupOption(option: string): void { popupChoice.value = option; popupVisible.value = false; record(option + "已切换") }
</script>

<style>
.select-demo-shell { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; min-height: 0; background-color: var(--xtf-color-page, #f8fafc); }
.select-demo-identity-actions { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12rpx; }.select-demo-identity-button { margin: 8rpx 8rpx 0 0; padding: 0 16rpx; font-size: 22rpx; }
.select-demo-scroll { flex: 1; width: 100%; min-height: 0; }
.select-demo-page { display: flex; flex-direction: column; width: 100%; padding: 24rpx 24rpx 36rpx; }
.select-demo-hero { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 30rpx 26rpx; border-radius: 18rpx; background-color: var(--xtf-color-primary, #2563eb); }
.select-demo-hero-copy { display: flex; flex-direction: column; min-width: 0; }
.select-demo-kicker { color: #ffffff; font-size: 19rpx; font-weight: 700; letter-spacing: 1rpx; opacity: 0.82; }
.select-demo-title { margin-top: 8rpx; color: #ffffff; font-size: 50rpx; font-weight: 700; line-height: 1.1; }
.select-demo-intro { max-width: 500rpx; margin-top: 12rpx; color: #ffffff; font-size: 23rpx; line-height: 1.45; opacity: 0.86; }
.select-demo-theme-pill { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; margin-left: 14rpx; padding: 10rpx 14rpx; border-radius: 999rpx; background-color: rgba(255, 255, 255, 0.18); }
.select-demo-theme-dot { width: 12rpx; height: 12rpx; margin-right: 8rpx; border-radius: 6rpx; background-color: #ffffff; }
.select-demo-theme-text { color: #ffffff; font-size: 19rpx; font-weight: 600; }
.select-demo-section { display: flex; flex-direction: column; margin-top: 18rpx; padding: 22rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 16rpx; background-color: var(--xtf-color-surface, #ffffff); }
.select-demo-feature-section { border-color: var(--xtf-color-primary, #2563eb); }
.select-demo-section-heading { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-bottom: 18rpx; }
.select-demo-section-heading-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.select-demo-section-title { color: var(--xtf-color-text, #0f172a); font-size: 29rpx; font-weight: 700; }
.select-demo-section-desc { margin-top: 7rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 21rpx; line-height: 1.45; }
.select-demo-status-chip { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 12rpx; padding: 9rpx 13rpx; border-radius: 999rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }
.select-demo-status-text { color: var(--xtf-color-primary, #2563eb); font-size: 20rpx; font-weight: 700; }
.select-demo-slot-tag { color: var(--xtf-color-primary, #2563eb); font-size: 22rpx; }
.select-demo-toolbar-note { margin-left: 8rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; }
.select-demo-footer-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.select-demo-footer-note, .select-demo-footer-state { color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; }
.select-demo-footer-state { color: var(--xtf-color-primary, #2563eb); }
.select-demo-divider { width: 100%; height: 1rpx; margin-top: 22rpx; margin-bottom: 22rpx; background-color: var(--xtf-color-border, #cbd5e1); }
.select-demo-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex: 1; min-width: 0; }
.select-demo-option-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.select-demo-option-name { color: var(--xtf-color-text, #0f172a); font-size: 27rpx; }
.select-demo-option-desc { margin-top: 5rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 21rpx; }
.select-demo-option-selected { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 7rpx 12rpx; border-radius: 999rpx; background-color: var(--xtf-color-primary-soft, #dbeafe); }
.select-demo-option-selected-text { color: var(--xtf-color-primary, #2563eb); font-size: 19rpx; font-weight: 700; }
.select-demo-readonly-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 18rpx; padding: 16rpx 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.select-demo-readonly-copy { display: flex; flex-direction: column; }
.select-demo-readonly-label { color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; }
.select-demo-readonly-value { margin-top: 5rpx; color: var(--xtf-color-text, #0f172a); font-size: 24rpx; }
.select-demo-readonly-state { color: var(--xtf-color-text-disabled, #94a3b8); font-size: 20rpx; }
.select-demo-popup-section { margin-bottom: 10rpx; }
.select-demo-popup-preview { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 18rpx; border-radius: 12rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.select-demo-popup-preview-copy { display: flex; flex-direction: column; min-width: 0; }
.select-demo-popup-preview-label { color: var(--xtf-color-text-secondary, #475569); font-size: 20rpx; }
.select-demo-popup-preview-value { margin-top: 5rpx; color: var(--xtf-color-text, #0f172a); font-size: 25rpx; font-weight: 600; }
.select-demo-popup-panel { display: flex; flex-direction: column; width: 100%; padding: 24rpx 26rpx 28rpx; background-color: var(--xtf-color-surface, #ffffff); }
.select-demo-popup-header { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; }
.select-demo-popup-header-copy { display: flex; flex-direction: column; }
.select-demo-popup-kicker { color: var(--xtf-color-primary, #2563eb); font-size: 18rpx; font-weight: 700; letter-spacing: 1rpx; }
.select-demo-popup-title { margin-top: 6rpx; color: var(--xtf-color-text, #0f172a); font-size: 32rpx; font-weight: 700; }
.select-demo-popup-close { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 54rpx; height: 54rpx; border-radius: 27rpx; background-color: var(--xtf-color-surface-muted, #f1f5f9); }
.select-demo-popup-hint { margin-top: 10rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 21rpx; }
.select-demo-popup-options { display: flex; flex-direction: column; margin-top: 20rpx; margin-bottom: 20rpx; }
.select-demo-popup-option { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 18rpx; border-width: 1rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 12rpx; background-color: var(--xtf-color-surface, #ffffff); }
.select-demo-popup-option-active { border-color: var(--xtf-color-primary, #2563eb); background-color: var(--xtf-color-primary-soft, #dbeafe); }
.select-demo-popup-option-spaced { margin-top: 12rpx; }
.select-demo-popup-option-copy { display: flex; flex-direction: column; }
.select-demo-popup-option-name { color: var(--xtf-color-text, #0f172a); font-size: 26rpx; font-weight: 600; }
.select-demo-popup-option-desc { margin-top: 5rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 20rpx; }
.select-demo-popup-check { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 38rpx; height: 38rpx; border-width: 2rpx; border-style: solid; border-color: var(--xtf-color-border, #cbd5e1); border-radius: 19rpx; }
.select-demo-popup-check-active { border-color: var(--xtf-color-primary, #2563eb); background-color: var(--xtf-color-primary, #2563eb); }
.select-demo-popup-check-mark { color: #ffffff; font-size: 24rpx; font-weight: 700; line-height: 1; }
</style>
