<template>
  <div>
    <nav>
      <headTop />
    </nav>
    <div class="contactPage">
      <div class="main">
        <div class="contactTitle">
          <h2>Get in touch with a TrustyPay expert</h2>
          <h3>We're eager to help you succeed with our range of solutions.</h3>
        </div>
        <!-- 表单 -->

        <div class="formPage">
          <div class="formTitle">
            <p>
              Simply fill out the form below and we'll be in touch in the next
              24 hours.
            </p>
          </div>

          <el-form
            :model="form"
            :rules="rules"
            ref="contactForm"
            label-position="top"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="Name" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Business Name" prop="businessName">
                  <el-input v-model="form.businessName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="Mobile(10 digits)" prop="mobile">
                  <el-input v-model="form.mobile"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Email" prop="email">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="Language Preference">
              <el-select
                v-model="form.languagePreference"
                placeholder="Select Language"
              >
                <el-option
                  v-for="language in languages"
                  :key="language.value"
                  :label="language.label"
                  :value="language.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="Your message" prop="message">
              <el-input
                type="textarea"
                v-model="form.message"
                :rows="4"
                placeholder=""
              ></el-input>
            </el-form-item>

            <div class="formInfo">
              <div>
                <p>
                  TrustyPay's Privacy Policy details our procedures for managing
                  personal information. By agreeing to our Privacy Policy, you
                  consent to TrustyPay contacting you about products, services,
                  and other pertinent information.
                </p>
              </div>
              <div>
                <p>
                  By clicking the 'Submit' button, you confirm that you have
                  reviewed and accepted
                  <router-link to="/Privacy"
                    >TrustyPay's Privacy Policy.</router-link
                  >
                  Additionally, you authorize TrustyPay to contact you and send
                  marketing communications.
                </p>
              </div>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('contactForm')"
                >Submit</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <footerMenu />
  </div>
</template>

<script>
import headTop from "@/components/headTop.vue";
import footerMenu from "@/components/footerMenu.vue";
import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
export default {
  name: "ContactUs",
  data() {
    return {
      form: {
        name: "",
        businessName: "",
        mobile: "",
        email: "",
        languagePreference: "",
        message: "",
      },
      languages: [
        { value: "en", label: "English" },
        { value: "zh", label: "中文" },
        { value: "한국", label: "한국" },
        { value: "हिंदी", label: "हिंदी" },
        { value: "Ελληνικά", label: "Ελληνικά" },       
       
      ],
      rules: {
        name: [
          {
            required: true,
            message: "Please enter your name",
            trigger: "blur",
          },
        ],
        businessName: [
          {
            required: true,
            message: "Please enter your business name",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            trigger: ["blur"],
            validator: elIsValidatePhone
          },
        ],
        email: [
          {
            required: true,
            trigger: ["blur"],
            validator: elIsEmail
          }
        ],
        message: [{ required: true, message: "Please enter" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          console.log("Form submitted:", this.form);
        } else {
          console.log("Error submitting form!");
          return false;
        }
      });
    },
  },

  components: {
    headTop,
    footerMenu,
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}
.contactPage {
  margin-top: 60px;

  .contactTitle {
    margin-bottom: 100px;
    h2 {
      text-align: center;
      color: #1a5271;
      font-size: 50px;
    }
    h3 {
      text-align: center;
      color: #1a5271;
      font-size: 26px;
    }
  }

  .formPage {
    width: 880px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 100px;
    border-radius: 12px;
    box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.2);
    padding: 30px;
    .formTitle {
      p {
        font-size: 20px;
        padding: 20px 0;
      }
    }

    /deep/.el-input__inner {
      background-color: #45c7f6 !important;
      &::placeholder {
        color: #1a5271;
      }
    }
    // 下拉箭头
    /deep/.el-icon-arrow-up:before {
      color: #1a5271;
    }
    // 多行输入框背景色
    /deep/.el-textarea__inner {
      background-color: #45c7f6 !important;
    }
    // 选择框
    .el-select {
      display: inline;
    }
    //    submit居中
    /deep/.el-form-item__content {
      text-align: center;
    }
    // button背景色
    .el-button {
      background-color: #45c7f6;
      border: #45c7f6;
      margin-top: 20px;
      width: 140px;
      height: 44px;
    }
    .el-button--primary {
      font-size: 24px;
    }
    .formInfo {
      padding: 20px 0;
      p {
        text-align: center;
      }
    }
  }
}
</style>
