<template>
    <div class="button-showcase">
        <section class="intro">
            <p class="eyebrow">组件展示 · Buttons</p>
            <h1>按钮组件设计指南</h1>
            <p class="subtitle">
                通过多种色彩、尺寸与状态组合，让操作意图更加清晰。以下示例展示了不同的按钮组及推荐的使用场景，帮助快速搭建一致、优雅的界面体验。
            </p>
        </section>

        <section class="card-grid">
            <el-card
                v-for="group in buttonGroups"
                :key="group.id"
                shadow="hover"
                class="group-card"
            >
                <template #header>
                    <div class="card-header">
                        <h3>{{ group.title }}</h3>
                        <span>{{ group.caption }}</span>
                    </div>
                </template>
                <p class="group-description">{{ group.description }}</p>
                <div class="button-grid">
                    <div v-for="item in group.buttons" :key="item.label" class="button-item">
                        <ComButton v-bind="item.props">{{ item.label }}</ComButton>
                        <span class="button-note">{{ item.note }}</span>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full">
            <el-card shadow="hover">
                <template #header>
                    <div class="card-header">
                        <h3>交互示例</h3>
                        <span>展示异步操作下的反馈与状态提示</span>
                    </div>
                </template>
                <div class="playground">
                    <div class="playground-info">
                        <div class="metric">
                            <span class="metric-value">{{ interactiveState.successCount }}</span>
                            <span class="metric-label">成功提交次数</span>
                        </div>
                        <p class="status-text">{{ interactiveState.lastAction }}</p>
                    </div>
                    <div class="playground-actions">
                        <ComButton type="primary" size="large" @click="handleAsyncAction">
                            模拟提交操作
                        </ComButton>
                        <ComButton
                            plain
                            type="primary"
                            :disabled="!interactiveState.successCount"
                            @click="resetMetrics"
                        >
                            重置统计
                        </ComButton>
                    </div>
                </div>
            </el-card>
        </section>

        <section class="card-full guide-card">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <h3>使用建议</h3>
                        <span>保持一致性，提升辨识度与效率</span>
                    </div>
                </template>
                <ul class="guide-list">
                    <li v-for="tip in usageGuides" :key="tip">
                        {{ tip }}
                    </li>
                </ul>
            </el-card>
        </section>
    </div>
</template>

<script setup name="ShowButton">
import { reactive } from 'vue'
import ComButton from '@/components/ComButton/index.vue'

const buttonGroups = [
    {
        id: 'brand',
        title: '品牌色按钮',
        caption: 'Primary Actions',
        description:
            '用于页面中最主要、最重要的操作，强调高优先级任务，确保用户一眼就能捕捉到关键信息。',
        buttons: [
            {
                label: '主要操作',
                note: '强调性主操作 / form 提交',

                props: { type: 'primary' },
            },
            {
                label: '次要操作',
                note: '常规操作按钮',
                props: { type: 'success' },
            },
            {
                label: '信息提示',
                note: '提示性操作 / 查看详情',
                props: { type: 'info' },
            },
            {
                label: '危险操作',
                note: '删除、重置、警示类操作',
                props: { type: 'danger' },
            },
        ],
    },
    {
        id: 'style',
        title: '样式变体',
        caption: 'Visual Variants',
        description:
            '通过朴素、圆角、链接等样式变化提升层级与视觉对比度，适用于不同的信息密度与布局策略。',
        buttons: [
            {
                label: '朴素按钮',
                note: '保留层次又不抢占视觉焦点',
                props: { type: 'primary', plain: true },
            },
            {
                label: '圆角按钮',
                note: '适合强调友好、动感的品牌气质',
                props: { type: 'primary', round: true },
            },
            {
                label: '圆形',
                note: '突出图标操作，例如「上一页/下一页」',
                props: { type: 'primary', circle: true },
            },
            {
                label: '链接按钮',
                note: '嵌入文案中的轻量操作',
                props: { type: 'primary', link: true },
            },
        ],
    },
    {
        id: 'size',
        title: '尺寸与密度',
        caption: 'Density & Sizing',
        description: '通过不同尺寸适配多端布局，从移动端到桌面端的操作触达都能保持舒适体验。',
        buttons: [
            {
                label: 'Large CTA',
                note: '适用于主流程、全宽布局',
                props: { type: 'primary', size: 'large' },
            },
            {
                label: 'Default',
                note: '桌面端通用尺寸',
                props: { type: 'primary', size: 'default' },
            },
            {
                label: 'Small',
                note: '列表行内操作 / 紧凑信息区',
                props: { type: 'primary', size: 'small' },
            },
            {
                label: 'Mini',
                note: '空间极小的场景或辅助操作',
                props: { type: 'primary', size: 'small', plain: true, style: 'padding: 4px 12px;' },
            },
        ],
    },
]

const usageGuides = [
    '主操作仅保留一个，避免页面内多个高亮按钮造成干扰。',
    '当按钮触发异步任务时，务必提供 Loading 状态或禁用态反馈。',
    '根据页面背景选择对比度合适的按钮类型，确保文本可读性与无障碍体验。',
    '按钮尺寸需与所处容器的密度相匹配，保证点击区域充足。',
    '在不同模块中沿用一致的按钮样式命名与语义化文案。',
]

const interactiveState = reactive({
    successCount: 0,
    lastAction: '点击 “模拟提交操作” 以体验按钮的加载反馈。',
})

const delay = (ms) =>
    new Promise((resolve) => {
        setTimeout(resolve, ms)
    })

const handleAsyncAction = async () => {
    interactiveState.lastAction = '正在提交中，请稍候…'
    await delay(1600)
    interactiveState.successCount += 1
    interactiveState.lastAction = `第 ${interactiveState.successCount} 次提交已完成！`
}

const resetMetrics = () => {
    interactiveState.successCount = 0
    interactiveState.lastAction = '统计已重置，可以重新发起体验。'
}
</script>

<style scoped>
.button-showcase {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 40px 48px;
    background: linear-gradient(160deg, #f6f8ff 0%, #ffffff 55%, #f9fbff 100%);
    min-height: 100%;
}

.intro {
    max-width: 720px;
    text-align: left;
}

.eyebrow {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5c6aff;
    margin-bottom: 12px;
    font-weight: 600;
}

.intro h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1f2a56;
}

.subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: #4c5a7a;
    margin: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.group-card {
    border-radius: 18px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2a56;
}

.card-header span {
    font-size: 14px;
    color: #8792b0;
}

.group-description {
    font-size: 14px;
    line-height: 1.6;
    color: #4c5a7a;
    margin-bottom: 16px;
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
}

.button-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 120px;
}

.button-note {
    font-size: 12px;
    color: #98a5c7;
}

.card-full {
    width: 100%;
}

.playground {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.playground-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 220px;
}

.metric {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.metric-value {
    font-size: 36px;
    font-weight: 700;
    color: #3a49ff;
}

.metric-label {
    font-size: 14px;
    color: #8792b0;
}

.status-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #4c5a7a;
}

.playground-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.guide-card :deep(.el-card__body) {
    padding: 20px 28px 28px;
}

.guide-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: #4c5a7a;
    font-size: 14px;
    line-height: 1.6;
}

.guide-list li {
    list-style: disc;
}

@media (max-width: 1024px) {
    .button-showcase {
        padding: 24px 24px 36px;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 600px) {
    .intro h1 {
        font-size: 26px;
    }

    .subtitle {
        font-size: 15px;
    }

    .playground {
        flex-direction: column;
        align-items: flex-start;
    }

    .playground-actions {
        width: 100%;
    }

    .playground-actions :deep(.el-button) {
        width: 100%;
    }
}
</style>
