<script setup lang="ts">
import { useAll } from "~/api/pubAll/service";
const { guestbook } = useAll();
let pageTitle: any = ref("关于合科泰");
useHead(() => ({
  title: pageTitle.value,
})); 
const user = useUserStore();
user.value.adminTitle = "联系我们";
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(`提交成功`);
    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">联系我们</h3>
        <h4 class="mt20">贸易客户请联系</h4>
        <p><img src="@/assets/img/contact/tel.png" />电话：+86 0755 82565333转8016</p>
        <p><img src="@/assets/img/contact/phone.png" />手机：13670157820</p>
        <p><img src="@/assets/img/contact/email.png" />邮箱：hkt@heketai.com</p>
        <p><img src="@/assets/img/contact/address.png" />地址：深圳市龙岗区平吉大道66号康利城7栋8层</p>
        <h4 class="mt30">OEM定制业务请联系</h4>
        <p><img src="@/assets/img/contact/phone.png" />杨先生：13652389305</p>
        <p><img src="@/assets/img/contact/phone.png" />沈先生：13538060488</p>
        <p><img src="@/assets/img/contact/phone.png" />陈先生：18244986001</p>
      </div>
      <!-- 留言 -->
      <section class="message">
        <div class="title white">
          <h3>在线留言</h3>
        </div>

        <el-form class="form">
          <el-input type="textarea" :rows="3" placeholder="请输入您的留言内容" v-model="query.messageContents" />
          <el-input placeholder="请输入您的姓名" v-model="query.username" />
          <el-input placeholder="请输入您的联系电话" v-model="query.phone" />
          <el-button type="danger" round class="submit" @click="guestbookFun" v-loading="loading">
            立即提交
          </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> 
