<template>
    <div class="contactUs">
        <Title :value="title"></Title>
        <div class="contactuss">
            <!-- 左边 -->
            <div class="contact-left">
                <div class="item">
                    <p><strong>USA office:</strong></p>
                    <p>California</p>
                    <p>Encinitas, California, USA</p>
                </div>
                <div class="item">
                    <p><strong>Canada office:</strong></p>
                    <p>Victoria, BC, Canada</p>
                </div>
                <div class="item">
                    <p><strong>China office:</strong></p>
                    <p>H910, Huiyun Center, Nanshan, Shenzhen,China</p>
                </div>
                <div class="item">
                    <p><strong>website: </strong><br />www.i-montieri.com</p>
                    <p><strong>Email: </strong><br />bill@i-montieri.com</p>
                </div>
            </div>
            <!-- 右边 -->
            <div class="contact-right">
                <el-form ref="ruleFormRef" :model="form" class="demo-ruleForm" label-width="150px" :size="'default'"
                    :inline="true" status-icon>
                    <el-form-item label="Requirements" prop="desc" style="width: 100%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your requirements',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.Requirements" placeholder="Requirements" type="textarea"/>
                    </el-form-item>
                    <el-form-item label="Name" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your name',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.name" placeholder="Name" clearable />
                    </el-form-item>
                    <el-form-item label="Email" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your email',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.email" placeholder="Email" clearable />
                    </el-form-item>
                    <el-form-item label="Phone Number" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your phone number',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.phone" placeholder="Phone Number" clearable />
                    </el-form-item>
                    <el-form-item label="Country" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your country',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.country" placeholder="Country" clearable />
                    </el-form-item>
                    <el-form-item label="Address" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your address',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.address" placeholder="Address" clearable />
                    </el-form-item>
                    <el-form-item label="Title" style="width: 45%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your title',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.title" placeholder="Title" clearable />
                    </el-form-item>
                    <el-form-item label="Company" style="width: 100%" :rules="[
                        {
                            required: true,
                            message: 'Please enter your company',
                            trigger: 'blur',
                        }]">
                        <el-input v-model="form.company" placeholder="Company" clearable />
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Title from '../components/Title.vue';
import { ref, reactive } from 'vue'

let title = ref<any>({
    title: "Contact Us",
    desc: ""
})

let form = reactive<any>({
    Requirements: '',
    name: '',
    email: '',
    phone: '',
    country: '',
    address: '',
    title: '',
    company: ''
})
</script>

<style scoped lang="less">
.contactUs {
    margin-top: 4.5vw;
}

.contactuss {
    width: 80%;
    height: 30vw;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .contact-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .contact-right {
        width: 60%;
    }
}


@media (max-width: 960px) {
    .contactUs {
        margin-top: 15vw;

        .contactuss {
            height: 90vw;

            .contact-left {
                width: 30%;
                font-size: 12px;
            }
        }
    }
}
</style>