<!-- TODO i18n -->
<template>
    <div @click="slideUp" ref="messageUs" :class="{ messageUs: true, show: show }" style="height: 40px;">
        <h3 class="messageUsHeader eMailIco">{{ $t('common.message_us.please') }}</h3>
        <span @click.stop="slideOut" :class="{ closeBtn: true, show: show }"></span>
        <div>
            <form>
                <div class="messageUsForm">
                    <div class="line">
                        <input type="text" name="leave_message_name" v-model="formData.leave_message_name" size="40"
                            :placeholder="$t('common.message_us.name')">
                    </div>
                    <div class="line">
                        <input type="text" name="leave_message_phone" v-model="formData.leave_message_phone" size="40"
                            :placeholder="$t('common.message_us.tel')">
                    </div>
                    <div class="line">
                        <input type="email" name="leave_message_email" v-model="formData.leave_message_email" size="40"
                            :placeholder="$t('common.message_us.email')">
                    </div>
                    <div class="line">
                        <textarea name="leave_message_info" cols="40" rows="10"
                            :placeholder="$t('common.message_us.msg')" v-model="formData.leave_message_info"></textarea>
                    </div>
                    <p>
                    <div class="messageUsForm__error ">{{ errorMsg }}</div>
                    <div v-show="showSuccess">{{ $t('common.message_us.success') }}</div>
                    <input @click.prevent="submit" class="btn" type="submit" :value="$t('common.message_us.submit')">
                    </p>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
const { t, locale } = useI18n();

const messageUs = ref(null);

const show = ref(false);

const slideOut = () => {
    show.value = false;
}

const slideUp = () => {
    show.value = true;
}

const initialState = {
    leave_message_name: "",
    leave_message_phone: "",
    leave_message_email: "",
    leave_message_info: ""
}
const showSuccess = ref(false)

const formData = reactive({ ...initialState })

const errorMsg = ref("");

const submit = () => {
    const phoneRegex = /^[+\- ()0-9]*$/;
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

    if (!formData.leave_message_name.trim()) {
        errorMsg.value = t('common.message_us.name_error')
        return
    }
    if (!formData.leave_message_phone.trim() || !phoneRegex.test(formData.leave_message_phone)) {
        errorMsg.value = t('common.message_us.tel_error')
        return
    }
    if (!formData.leave_message_email.trim() || !emailRegex.test(formData.leave_message_email)) {
        errorMsg.value = t('common.message_us.email_error')
        return
    }
    if (!formData.leave_message_info.trim()) {
        errorMsg.value = t('common.message_us.msg_error')
        return
    }

    useFetch('/api/msg/addLeaveMessage', { params: formData }).then(res => {
        if (JSON.parse(res.data.value).code !== 0) {
            ElMessage.error(t('home.products.detail.error'))
            return
        }
        errorMsg.value = ""
        Object.assign(formData, initialState)
        showSuccess.value = true
        setTimeout(() => {
            showSuccess.value = false
            slideOut()
        }, 1000)
    })
}


</script>

<style scoped src="~/assets/css/Popup/message-us.scss" lang="scss"></style>