<script setup lang="ts">
import { useAll } from "~/api/pubAll/service";

const { guestbook } = useAll();

let pageTitle: any = ref("Contact Us");

useHead(() => ({
  title: pageTitle.value,
}));

const user = useUserStore();
user.value.adminTitle = "Contact Us";

const query: any = ref({
  phone: "",
  username: "",
  messageContents: "",
  companyName: "",
  companyType: "",
  country: "",
  jobTitle: "",
  languageType: 0,
  mailbox: "",
  queryType: "",
  state: 0,
  trade: "",
});

let loading = ref(false);

async function guestbookFun() {
  loading.value = true;
  let res: any = await guestbook(query.value);
  if (res.httpCode == 200) {
    ElMessage.success(`Submitted successfully`);
    loading.value = false;
    query.value = {
      phone: "",
      username: "",
      messageContents: "",
      companyName: "",
      companyType: "",
      country: "",
      jobTitle: "",
      languageType: 0,
      mailbox: "",
      queryType: "",
      state: 0,
      trade: "",
    };
  }
}
</script>

<template>
  <div class="contact-page">
    <img src="@/assets/img/icon/about-bg.png" alt="" srcset="" class="banner">
    <div class="contact-con">
      <div class="con-lx">
        <h3 class="title">Contact Us</h3>
        <h4 class="mt20">For trading customers</h4>
        <p><img src="@/assets/img/contact/tel.png" />Tel: +86 0755 82565333 Ext. 8016</p>
        <p><img src="@/assets/img/contact/phone.png" />Mobile: 13670157820</p>
        <p><img src="@/assets/img/contact/email.png" />Email: hkt@heketai.com</p>
        <p><img src="@/assets/img/contact/address.png" />Address: 8/F, Building 7, Kangli City, No. 66 Pingji Avenue, Longgang District, Shenzhen</p>
        <h4 class="mt30">For OEM customization business</h4>
        <p><img src="@/assets/img/contact/phone.png" />Mr. Yang: 13652389305</p>
        <p><img src="@/assets/img/contact/phone.png" />Mr. Shen: 13538060488</p>
        <p><img src="@/assets/img/contact/phone.png" />Mr. Chen: 18244986001</p>
      </div>
      <!-- 留言 -->
      <section class="message">
        <div class="title white">
          <h3>Online Message</h3>
        </div>

        <el-form class="form">
          <el-input type="textarea" :rows="3" placeholder="Please enter your message" v-model="query.messageContents" />
          <el-input placeholder="Please enter your name" v-model="query.username" />
          <el-input placeholder="Please enter your phone number" v-model="query.phone" />
          <el-button type="danger" round class="submit" @click="guestbookFun" v-loading="loading">
            Submit Now
          </el-button>
        </el-form>
      </section>
    </div>
  </div>
</template>

<style scoped lang="scss">
.contact-page {
  .contact-con {
    padding: 0 0px 1px;
  }

  .title {
    color: #333;
    text-align: center;
    margin-bottom: 28px;
    font-size: 16px;
    position: relative;

    &::before {
      content: "";
      width: 25px;
      position: absolute;
      bottom: -2px;
      background: $mainColor;
      height: 2px;
      left: 0;
      right: 0;
      margin: auto;
    }
  }

  h4 {
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: bold;
  }
}

.con-lx {
  font-size: 14px;
  background: #fff;
  padding: 25px 15px 50px;

  p {
    display: flex;
    align-content: center;
    line-height: 20px;

    span {
      color: $mainColor;
      font-weight: bold;
    }

    img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }

    & + p {
      margin-top: 15px;
    }
  }
}

/* 留言 */
.message {
  background: #fff;
  padding: 30px 15px 50px;
  margin-top: 12px;
  margin-bottom: 0px;

  .form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .submit {
    margin-top: 10px;
  }
}
</style>
