<template>
    <HomeToolCard title="UUID 生成" description="生成单个或批量 UUID，支持去除中划线。" icon="Tickets">
        <div class="tool-body">
            <div class="control-row">
                <div class="control-item">
                    <label class="field-label">生成数量</label>
                    <el-input-number v-model="count" :min="1" :max="100" />
                </div>
                <div class="control-item switch-item">
                    <label class="field-label">去除中划线</label>
                    <el-switch v-model="removeHyphen" />
                </div>
            </div>

            <div class="toolbar">
                <el-button type="primary" @click="generateUuid">生成 UUID</el-button>
                <el-button @click="copyResult">复制结果</el-button>
                <el-button @click="clearAll">清空</el-button>
            </div>

            <el-input
                v-model="resultText"
                type="textarea"
                :rows="10"
                resize="none"
                readonly
                placeholder="生成结果会显示在这里"
            />
        </div>
    </HomeToolCard>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import HomeToolCard from './HomeToolCard.vue'
import { copyText, createUuidList } from '@/utils/home'

const count = ref(1)
const removeHyphen = ref(false)
const resultText = ref('')

const generateUuid = () => {
    resultText.value = createUuidList(count.value, removeHyphen.value).join('\n')
}

const copyResult = async () => {
    await copyText(resultText.value)
}

const clearAll = () => {
    count.value = 1
    removeHyphen.value = false
    resultText.value = ''
}

onMounted(() => {
    generateUuid()
})
</script>

<style scoped lang="scss">
.tool-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.control-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.control-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.switch-item {
    justify-content: flex-end;
}

.field-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 768px) {
    .control-row {
        grid-template-columns: 1fr;
    }
}
</style>
