<script setup>
import { ElSpace, ElButton } from 'element-plus';
import "@/styles/main.css"
import { copyToClipboardThenTip } from '@/utils/systemUtils'

// 黑色到白色主色一行
const rowBlackToWhite = [
    { title: "黑色", name: "--text-primary-color" },
    { title: "黑色90% / 主标题文字颜色", name: "--text-primary-90-color" },
    { title: "黑色80% / 小标题文字颜色", name: "--text-primary-80-color" },
    { title: "黑色65% / 正文颜色", name: "--text-primary-65-color" },
    { title: "黑色50%", name: "--text-primary-50-color" },
    { title: "黑色10%", name: "--bg-black-10" },
    { title: "黑色5% / 分割线颜色", name: "--bg-black-5" },
    { title: "黑色2% / 灰色背景色", name: "--bg-black-2" },
    { title: "白色主色", name: "--bg-white-100" },
]
// 主色到主色高亮背景一行（主色高亮背景为浅色，需黑色文字）
const rowPrimaryToHighlight = [
    { title: "主色", name: "--color-primary-100" },
    { title: "主色50%", name: "--color-primary-50", light: true },
    { title: "主色35%", name: "--color-primary-35" },
    { title: "主色10%", name: "--color-primary-10", light: true },
    { title: "主色高亮背景", name: "--color-primary-2", light: true },
]
// 红色到绿色10%一行（*10% 为浅色背景，需黑色文字）
const rowRedToGreen10 = [
    { title: "红色", name: "--color-red-100" },
    { title: "红色10%", name: "--color-red-10", light: true },
    { title: "橙色", name: "--color-orange-100" },
    { title: "橙色10%", name: "--color-orange-10", light: true },
    { title: "黄色", name: "--color-yellow-100" },
    { title: "黄色10%", name: "--color-yellow-10", light: true },
    { title: "绿色", name: "--color-green-100" },
    { title: "绿色10%", name: "--color-green-10", light: true },
]
function copyColorVar(item) {
    const color = `var(${item.name})`
    copyToClipboardThenTip(color)
}
</script>

<template>
    <el-space direction="vertical" alignment="flex-start">
        <div class="text-title-2">颜色</div>
        <el-space direction="vertical" alignment="flex-start">
            <el-space wrap>
                <el-button v-for="(item, index) in rowBlackToWhite" :key="'bw-' + index" :color="`var(${item.name})`"
                    @click="copyColorVar(item)">
                    {{ item.title }}
                </el-button>
            </el-space>
            <el-space wrap>
                <el-button v-for="(item, index) in rowPrimaryToHighlight" :key="'ph-' + index"
                    :class="{ 'color-btn-text-black': item.light }"
                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
                    @click="copyColorVar(item)">
                    {{ item.title }}
                </el-button>
            </el-space>
            <el-space wrap>
                <el-button v-for="(item, index) in rowRedToGreen10" :key="'rg-' + index"
                    :class="{ 'color-btn-text-black': item.light }"
                    :style="item.light ? { '--btn-bg': `var(${item.name})` } : undefined" :color="`var(${item.name})`"
                    @click="copyColorVar(item)">
                    {{ item.title }}
                </el-button>
            </el-space>
        </el-space>
    </el-space>
</template>

<style scoped>
/* 浅色背景按钮：文字黑色 */
:deep(.color-btn-text-black) {
    color: var(--el-color-black) !important;
}
</style>