<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">INPUT / 08</text><text class="lab-title">Color Picker 颜色选择</text></view>
    <view class="lab-section"><text class="lab-heading">主题色</text><view class="color-preview" :style="{ borderColor: color }"><view class="color-band" :style="{ backgroundColor: color }" /><view class="color-preview-copy"><text class="lab-item-title">每一天，井然有序</text><text class="lab-caption">工作空间 / 品牌主题</text></view></view><XtfColorPicker v-model="color" show-trigger trigger-label="主题色 · HEX" :presets="presets" :popup-max-height="400" @confirm="confirmed" @cancel="status = '已取消，保留原颜色'" /><text class="lab-result color-committed">{{ color }}</text></view>
    <view class="lab-section"><text class="lab-heading">透明色 · RGBA</text><view class="lab-surface"><XtfColorPicker v-model="rgba" display="inline" format="rgba" title="标记颜色" show-alpha :presets="presets" :show-actions="false" /></view><text class="lab-result color-rgba">{{ rgba }}</text></view>
    <view class="lab-section"><text class="lab-heading">自定义触发器 · HEXA</text><XtfColorPicker v-model="hexa" show-trigger show-alpha format="hexa" :popup-max-height="400" @confirm="confirmed"><template #trigger="scope"><view class="color-trigger"><view class="color-swatch" :style="{ backgroundColor: scope.color }" /><text class="lab-label">{{ scope.value }}</text><text class="lab-caption">编辑</text></view></template></XtfColorPicker></view>
    <view class="lab-section"><text class="lab-heading">锁定色值</text><XtfColorPicker model-value="#88928F" show-trigger disabled trigger-label="系统默认颜色" /></view>
    <text class="lab-result">{{ status }}</text>
  </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 { ref } from "vue"
import XtfColorPicker from "@/uni_modules/xtf-linkuiunix/components/xtf-color-picker/xtf-color-picker.uvue"
const color = ref("#17796B")
const rgba = ref("rgba(45, 109, 136, 0.8)")
const hexa = ref("#C64350CC")
const status = ref("暂无已确认的修改")
const presets = ["#17796B", "#2D6D88", "#C64350", "#D99A26", "#343C40", "#FFFFFF"]
function confirmed(value: string): void { status.value = "已确认：" + value }
</script>
<style>
@import "../demo-workbench.css";
.color-preview { display: flex; flex-direction: row; align-items: stretch; border-width: 1rpx; border-style: solid; min-height: 144rpx; background-color: var(--xtf-color-surface, #ffffff); margin-bottom: 20rpx; border-radius: 8rpx; overflow: hidden; }.color-band { width: 20rpx; }.color-preview-copy { display: flex; flex-direction: column; justify-content: center; padding: 24rpx; }.color-trigger { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 100rpx; padding: 16rpx; background-color: var(--xtf-color-surface, #ffffff); border-radius: 8rpx; }.color-swatch { width: 58rpx; height: 58rpx; border-radius: 8rpx; }
</style>
