<script setup>

const formRef = ref(null)

const form = ref({
    company: '',
    name: '',
    tel: '',
    address: '',
    email: '',
    content: ''
});

const rules = {
    company: [
        { required: true, message: '公司名稱必填', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '姓名必填', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '電話必填', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '信箱必填', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '留言必填', trigger: 'blur' },
    ],
}

const submitForm = async (formEl) => {
    if (!formEl) return

    await formEl.validate(async (valid, fields) => {
        if (valid) {

            let res = await useRequest('/contact/addContact',"POST",form.value);

            if (res.code === 200) {
                form.value = {
                    company: '',
                    name: '',
                    tel: '',
                    address: '',
                    email: '',
                    content: ''
                }
                return ElMessage.success('表單送出成功');
            }
            return ElMessage.error('表單送出失敗');
        } else {
            return ElMessage.error('表單驗證失敗,填寫不完整');
        }
    })
}
</script>

<template>
    <div class="toolbar">
        <div class="text">
            <div class="tTitle">{{ $t('Contact.form') }}</div>
        </div>
    </div>
    <div class="content">
        <div>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm"
                label-position="top" status-icon>
                <el-form-item :label="$t('Contact.company')" prop="company">
                    <el-input v-model="form.company" />
                </el-form-item>
                <el-form-item :label="$t('Contact.name')" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item :label="$t('Contact.tel')" prop="tel">
                    <el-input v-model="form.tel" />
                </el-form-item>
                <el-form-item :label="$t('Contact.email')" prop="email">
                    <el-input v-model="form.email" />
                </el-form-item>
                <el-form-item :label="$t('Contact.content')" prop="content">
                    <el-input v-model="form.content" type="textarea" /> </el-form-item>
                <el-form-item>
                    <div class="desc text-gray">{{ $t('Contact.formmessage') }}</div>
                    <div class="centerFlex">
                        <button type="button" class="btn sendBtn" @click="submitForm(formRef)">
                            {{ $t('Form.submit') }}
                        </button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style lang="less"></style>
