<template>
    <div class="contactUs">
        <Title :value="title"></Title>
        <div class="contactuss" :class="mobileShow ? 'width-100' : 'width-60'">
            <!-- 左边 -->
            <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="labelwidth" :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: stylewidth}" :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: stylewidth}" :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" :style="{width: stylewidth}" :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: stylewidth}" :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: stylewidth}" :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: stylewidth}" :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 class="btn font-size-16">Submit</div>
    </div>
</template>

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

let title = ref<any>({
    title: "Contact Us",
    desc: ""
})
let labelwidth = ref<any>('150px')
let stylewidth = ref<any>('45%')
let form = reactive<any>({
    Requirements: '',
    name: '',
    email: '',
    phone: '',
    country: '',
    address: '',
    title: '',
    company: ''
})
let mobileShow = ref<any>(false)
onMounted(async ()=>{
  if(document.body.offsetWidth<1000){
    mobileShow.value = true
    labelwidth.value = '80px'
    stylewidth.value = '100%'
  }else{
    mobileShow.value = false
    labelwidth.value = '150px'
    stylewidth.value = '45%'
  }
  window.addEventListener('resize',function(){
    if(document.body.offsetWidth<1000){
      mobileShow.value = true
        labelwidth.value = '80px'
        stylewidth.value = '100%'
    }else{
      mobileShow.value = false
        labelwidth.value = '150px'
        stylewidth.value = '45%'
    }
  })
})
</script>

<style scoped lang="less">
.contactUs {
    width: 100%;
    // text-align: center;
    margin-bottom: 12.4vw;
    .btn{
        margin-top: 3rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        display: inline-block;
        // padding: 10px 40px;
        width: 20%;
        border: 1px solid #eee;
        background-color: #409EFF;
        text-align: center;
        height: 3rem;
        line-height: 3rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #ffffff;
    }
}

.contactuss {
    width: 80%;
    // height: 16vw;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .contact-left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-wrap: wrap;
        .item{
            float: left;
            margin: 5px 0;
        }
    }

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


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

        .contactuss {
            display: flex;
            flex-direction: column;
            // height: 90vw;

            .contact-left {
                font-size: 12px;
                display: block;
                // justify-content: space-around;
                .item{
                    margin-right: 10px;
                }
            }
            .contact-right{
                width: 80vw;
            }
        }
    }
}
</style>