<!--  -->
<template>
    <div class="link-manage">
        <div class="header">
            <div class="header-title">{{ $t('tag.toolbox.addLink') }}</div>
        </div>
        <div class="link-content">
            <ui-input width="100%" @input="onInput('text')" :placeholder="$t('tag.toolbox.linkTitleTips')" type="text" v-model="text" require :error="error.text" :maxlength="40" />
            <ui-input width="100%" type="text" v-model="link" @input="onInput('link')" :error="error.link" require :placeholder="$t('tag.toolbox.linkUrlTips')" />
        </div>
        <div class="btn">
            <ui-button class="cancel" @click="emit('close')">{{ $t('common.cancel') }}</ui-button>
            <ui-button type="primary" @click="confirm">{{ $t('common.add') }}</ui-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, defineEmits, defineProps, ref } from 'vue'
// 注册事件
const emit = defineEmits(['close', 'confirm'])
const text = ref('')
const link = ref('')
const error = ref({
    text: '',
    link: '',
})
const onInput = type => {
    if (type == 'text') {
        if (text.value == '') {
            error.value.text = `${t('tag.toolbox.linkTitleTips')}`
        } else {
            error.value.text = ''
        }
    } else if (type == 'link') {
        if (link.value == '') {
            error.value.link = `${t('tag.toolbox.linkUrlTips')}`
        } else {
            error.value.link = ''
        }
    }
}

const confirm = () => {
    if (text.value == '') {
        error.value.text = `${t('tag.toolbox.linkTitleTips')}`
    } else {
        error.value.text = ''
    }
    if (link.value == '') {
        error.value.link = `${t('tag.toolbox.linkUrlTips')}`
    } else {
        error.value.link = ''
    }

    if (text.value == '' || link.value == '') {
        return
    }
    emit('confirm', { text, link })
}
</script>
<style lang="scss" scoped>
.link-manage {
    position: absolute;
    width: 400px;
    // height: 310px;
    background: rgba(27, 27, 28, 0.9);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border: 1px solid #000000;
    backdrop-filter: blur(4px);
    left: -22px;
    top: 100%;
    margin-top: 5px;
    z-index: 100;
    &::after {
        position: absolute;
        content: '';
        left: 29px;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 10px solid rgba(27, 27, 28, 0.8);
    }
    .link-content {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        padding: 40px 20px;
        .ui-input {
            margin-bottom: 30px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
    .header {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        color: #999;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        .header-title {
            font-size: 16px;
            font-weight: bold;
        }
    }
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 85px;
        height: 60px;
        .cancel {
            color: #00c8af;
            border: 1px solid #00c8af;
            &:hover {
                opacity: 0.9;
            }
        }
        button {
            &:first-of-type {
                margin-right: 10px;
            }
        }
    }
}
</style>
