<template>
    <table style="width: 1600px; border-collapse: collapse; border: 1px solid #ebeef5;">
        <!-- 表头 -->
        <thead>
            <tr class="text-title-2">
                <th> 名称</th>
                <th> 类型名称</th>
                <th> 操作</th>
            </tr>
        </thead>

        <!-- 表格内容 -->
        <tbody>
            <template v-for="(row, index) in tableData" :key="index">
                <!-- 隔行变色效果 -->
                <tr :style="{
                    height: '60px',
                    backgroundColor: index % 2 === 1 ? '#fafafa' : 'transparent'
                }">
                    <!-- 名称列 -->
                    <td style="padding: 12px; border: 1px solid #ebeef5;">
                        <div :class="row.className">
                            {{ row.name }}
                        </div>
                    </td>

                    <!-- 类型名称列（带复制功能） -->
                    <td style="padding: 12px; border: 1px solid #ebeef5;">
                        <div @click="copyToClipboardThenTip(row.className)" style="cursor: pointer;">
                            <span>{{ row.className }}</span>
                        </div>
                    </td>

                    <!-- 操作列 -->
                    <td style="padding: 12px; border: 1px solid #ebeef5; text-align: center;">
                        <el-button type="primary" link @click="copyToClipboardThenTip(row.className)">
                            <el-icon>
                                <DocumentCopy />
                            </el-icon>
                            复制
                        </el-button>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>

<script setup>
import { ref } from 'vue'
import { DocumentCopy } from '@element-plus/icons-vue'
import "@/styles/common.scss"
import { copyToClipboardThenTip } from '@/utils/systemUtils'

// 表格数据
const tableData = ref([
    // { name: '0级标题', className: 'text-title-0' },
    { name: '0级标题-加粗', className: 'text-title-0-bold' },
    { name: '0级标题-综艺', className: 'text-title-0-show' },

    // { name: '1级标题', className: 'text-title-1' },
    { name: '1级标题-加粗', className: 'text-title-1-bold' },
    { name: '1级标题-综艺', className: 'text-title-1-show' },

    { name: '2级标题', className: 'text-title-2' },
    { name: '2级标题-加粗', className: 'text-title-2-bold' },
    { name: '2级标题-综艺', className: 'text-title-2-show' },


    { name: '3级标题', className: 'text-title-3' },
    { name: '3级标题-加粗', className: 'text-title-3-bold' },
    { name: '3级标题-综艺', className: 'text-title-3-show' },

    { name: '正文', className: 'text-regular' },
    { name: '正文-加粗', className: 'text-bold' },
    { name: '正文-紧凑', className: 'text-compact' },
    { name: '正文-紧凑-加粗', className: 'text-compact-bold' },

    { name: '1级提示文字', className: 'text-tip-1' },
    { name: '1级提示文字-加粗', className: 'text-tip-1-bold' },

    { name: '2级提示文字', className: 'text-tip-2' },
    { name: '2级提示文字-加粗', className: 'text-tip-2-bold' },

    { name: '3级提示文字', className: 'text-tip-3' },

    { name: '黑色', className: 'text-primary-clor'},
    { name: '黑色90% / 主标题文字颜色', className: 'text-primary-90-clor'},
    { name: '黑色80% / 小标题文字颜色', className: 'text-primary-80-clor'},
    { name: '黑色65% / 正文颜色', className: 'text-primary-65-clor'},
    { name: '黑色50%', className: 'text-primary-50-clor'},

    { name: '黑色10%', className: 'bg-black-10'},
    { name: '黑色5% / 分割线颜色', className: 'bg-black-5'},
    { name: '黑色2% / 灰色背景色', className: 'bg-black-2'},
    { name: '白色主色', className: 'bg-white-100'},

    {name: '主色', className: 'main-color'},
    {name: '高亮背景色', className: 'color-bg-active'},

    {name: '红色', className: 'color-red-100'},
    {name: '红色10%-背景', className: 'bg-red-10'},

    {name: '橙色', className: 'color-orange-100'},
    {name: '橙色10%-背景', className: 'bg-orange-10'},

    {name: '黄色', className: 'color-yellow-100'},
    {name: '黄色10%-背景', className: 'bg-yellow-10'},

    {name: '绿色', className: 'color-green-100'},
    {name: '绿色10%-背景', className: 'bg-green-10'},

])
</script>

<style scoped></style>