<template>
  <div class="contact-wrapper">
    <Header class="fixed top-0 z-20 w-full" />
    <div class="lg:mb-40px lg:pt-80px <lg:pt-66px">
      <div class="lg:relative lg:flex lg:justify-center">
        <div class="<lg:bg-[#EDEDED] <lg:pt-45px <lg:pb-65px lg:sticky lg:top-80px lg:flex-none !lg:w-1/2 lg:h-[calc(100vh - 80px)] lg:max-h-1260px">
          <div
            class="header container lg:max-w-none !lg:min-w-[initial] lg:pt-60px lg:rounded-r-16px px-0 h-full"
          >
            <div class="2xl:w-500px lg:w-300px lg:ml-auto lg:mr-45px">
              <h1 class="text-xl text-brand-1 lg:text-2xl <md:text-lg font-bold">联系ComPDFKit团队</h1>
              <h3 class="lg:mt-44px text-tiny <tiny:text-xs text-brand-1 <lg:mt-16px">开发者文档没有解决您的问题？</h3>
              <div class="my-8px text-tiny <tiny:text-xs text-brand-1">请详细填写右侧表格，并提供您的问题、建议或请求的详细内容。您也可以通过<a class="text-brand-0 hover:underline" href="mailto:support@compdf.com?subject=申请ComPDFKit技术支持">support@compdf.com</a>邮箱向我们描述您的问题！</div>
              <p class="text-[#A6B2BF] text-16px <tiny:text-14px leading-20px">※ 我们将在一个工作日内，以邮件的方式回复您！</p>
            </div>
          </div>
        </div>
        <div class="form-contact container !lg:w-1/2 !lg:min-w-[initial] lg:max-w-none lg:pt-70px !lg:pl-40px !2xl:pl-90px <lg:mb-65px">
          <ul>
            <li class="name"><span class="required">*</span> 姓名</li>
            <li><input v-model="nameText" v-focus="nameFocus" type="text" name="contact_email[user_name]" @blur="nameFocus = false"></li>
            <li class="name"><span class="required">*</span> 邮箱地址</li>
            <li><input v-model="emailText" v-focus="emailFocus" type="email" name="contact_email[email]" @blur="emailFocus = false"></li>
            <li class="name"><span class="required">*</span> 电话</li>
            <li>
              <input v-model="phoneText" v-focus="phoneFocus" type="text" name="contact_email[phone]" @blur="phoneFocus = false">
              <p class="lg:mt-8px lg:pl-12px <lg:mt-4px text-12px leading-18px text-brand-0">为了与您取得联系，移动电话最好开通了微信，固定电话请填写区号。</p>
            </li>
            <li class="name"><span class="required">*</span> 产品</li>
            <li class="product">
              <select v-model="productText" name="contact_email[product]" @change="handleChange">
                <option value="ComPDFKit PDF SDK" selected>ComPDFKit PDF SDK</option>
                <option value="ComPDFKit Conversion SDK">ComPDFKit 转档 SDK</option>
                <option value="ComPDFKit API">ComPDFKit API</option>
                <option value="Document AI">Document AI</option>
                <option value="Web Viewer">Web Viewer</option>
              </select>
              <i class="icon"></i>
            </li>
            <li v-show="platformShow" class="name"><span class="required">*</span> 产品版本</li>
            <li v-show="platformShow">
              <input v-model="versionText" v-focus="versionFocus" placeholder="e.g.1.1.1" type="text" name="contact_email[version]" @blur="versionFocus = false">
              <a
                class="lg:mt-8px lg:pl-12px <lg:mt-4px text-12px leading-18px text-brand-0 hover:underline"
                :href="versionUrl"
              >点击链接，查看如何找到您正在使用的产品版本号。</a>
            </li>
            <li v-show="platformShow" class="name"><span class="required">*</span> 开发平台</li>
            <li v-show="platformShow" class="product">
              <select v-model="platformText" name="contact_email[platform]" @change="handleChange">
                <option value="Android" selected>Android</option>
                <option value="Windows">Windows</option>
                <option value="iOS">iOS</option>
                <option value="macOS">macOS</option>
                <option value="Web">Web</option>
                <option value="Linux">Linux</option>
              </select>
              <i class="icon"></i>
            </li>
            <li class="name"><span class="required">*</span> 详情</li>
            <li>
              <textarea v-model="descriptionText" v-focus="descriptionFocus" placeholder="详细、清楚的描述能够帮助我们快速解决您的问题。" name="contact_email[description]" @blur="descriptionFocus = false"></textarea> 
              <button class="a-submit" :class="{ ready: sendStatus === 'ready', sending: sendStatus === 'sending', success: sendStatus === 'success' }" type="button" @click="sendForm">
                <div class="text-container" :class="{ sent: sendStatus === 'success' }">
                  <div v-if="sendStatus === 'sending'" class="loading"></div>
                  <div class="text">{{ btnText }}</div>
                </div>
                <div v-if="sendStatus === 'success'" class="send-succ">
                  <svg class="display-block" :class="{ show: showRight }" width="18" height="13.99" viewBox="0 0 18 13.99">
                    <path d="M4.57,13.49.69,9.79a2.52,2.52,0,0,1,0-3.49h0A2.35,2.35,0,0,1,4,6.23l.07.07L6,8,14,.65a2.43,2.43,0,0,1,3.3,0h0a2.12,2.12,0,0,1,.12,3l-.12.12L7.16,13.49a1.91,1.91,0,0,1-2.59,0" />
                  </svg>
                </div>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Modal @close="doClose" :modalShow="modalShow" />
    <Footer />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      update (el, { value }) {
        if (value) {
          el.focus()
        }
      }
    }
  },
  layout: 'custom',
  head() {
    return {
      title: this.$config.meta['contact-us-title'],
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$config.meta['contact-us-desc']
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.$config.meta['contact-us-title']
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.$config.meta['contact-us-desc']
        },
        {
          hid: 'twitter:title',
          property: 'twitter:title',
          content: this.$config.meta['contact-us-title']
        },
        {
          hid: 'twitter:description',
          property: 'twitter:description',
          content: this.$config.meta['contact-us-desc']
        }
      ],
      link: [{
        hid: 'canonical',
        rel: 'canonical',
        href: process.env.domain + this.$route.path
      }]
    }
  },
  asyncData({ query }) {
    const product = query.product
    if (product === 'api') {
      return {
        productText: 'ComPDFKit API'
      }
    } else if (product === 'ai') {
      return {
        productText: 'Document AI'
      }
    }
  },
  data() {
    return {
      modalShow: false,
      nameFocus: false,
      emailFocus: false,
      phoneFocus: false,
      versionFocus: false,
      descriptionFocus: false,
      nameText: '',
      emailText: '',
      phoneText: '',
      productText: 'ComPDFKit PDF SDK',
      versionText: '',
      platformText: 'iOS',
      descriptionText: '',
      btnText: '提交',
      value: '',
      sendStatus: 'ready',
      showRight: false
    }
  },
  computed: {
    versionUrl () {
      return this.productText === 'ComPDFKit PDF SDK' ? '/check-versions-compdfkit-pdf-sdk' : '/check-versions-compdfkit-conversion-sdk'
    },
    platformShow () {
      return this.productText === 'ComPDFKit API' || this.productText === 'Document AI' ? false : true
    }
  },
  watch: {
    productText () {
      if (this.productText === 'ComPDFKit API' || this.productText === 'Document AI') {
        this.versionText = ' '
      }
    }
  },
  methods: {
    handleChange ($event) {
      $event.target.blur()
    },
    doClose() {
      this.modalShow = false
      this.nameText = ''
      this.emailText = ''
      this.productText = 'ComPDFKit PDF SDK'
      this.versionText = ''
      this.platformText = 'iOS'
      this.descriptionText = ''
      this.btnText = '提交'
      this.sendStatus = 'ready'
      this.showRight = false
      document.documentElement.scrollTop = window.pageYOffset = document.body.scrollTop = 0
    },
    sendForm () {
      if (this.nameText === '') {
        alert('请输入您的姓名')
        this.nameFocus = true
        return false
      }
      const emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (this.emailText === '') {
        alert('请输入您的邮箱地址')
        this.emailFocus = true
        return false
      } else if (!emailReg.test(this.emailText)) {
        alert('请输入正确的邮箱地址')
        this.emailFocus = true
        return false
      }
      const phoneReg = /^((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})|([1][3,4,5,6,7,8,9][0-9]{9})$/
      if (this.phoneText === '' || !phoneReg.test(this.phoneText)) {
        alert('请填写正确的联系电话')
        this.phoneFocus = true
        return false
      }
      if (this.versionText === '') {
        alert('请填写您正在使用的产品版本号。')
        this.versionFocus = true
        return false
      }
      if (this.descriptionText === '') {
        alert('请描述您的建议、请求、或当前遇到的问题。')
        this.descriptionFocus = true
        return false
      }
      this.sendStatus = 'sending'

      const that = this
      this.$axios({
        method: 'POST',
        url: this.$config.pdfDomain + '/api/contact',
        data: {
          'contact_email[user_name]': that.nameText,
          'contact_email[email]': that.emailText,
          'contact_email[product_name]': that.productText,
          'contact_email[os_version]': that.versionText,
          'detail[platform]': that.platformText,
          'detail[phone]': that.phoneText,
          'contact_email[email_subject]': 'Contact Form',
          'detail[email_comment]': that.descriptionText
        },
        transformRequest: [function (data) {
          let ret = ''
          for (let item in data) {
            ret += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
          }
          ret = ret.substr(0, ret.length - 1)
          return ret
        }]
      })
        .then((res) => {
          console.log(res)
          const { data } = res
          if (data.status === 'success') {
            this.sendStatus = 'success'
            const self = this
            setTimeout(function () {
              self.showRight = true
              self.modalShow = true
            }, 0)
          } else if (data.status === 'faild') {
            alert('The email fails to send.')
          }
        })
        .catch((err) => {
          console.log(err)
          alert('The email fails to send.')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .contact-wrapper {
    .form-contact {
      li {
        margin-bottom: 24px;
        span {
          color: red;
          vertical-align: middle;
        }
        input, select, textarea {
          font-size: 18px;
          background-color: white;
          border-radius: 6px;
          border: 1px solid #ccc;
          outline: none;
          &:focus {
            border-color: #1460F3;
            outline: none;
          }
          &:hover {
            border-color: #1460F3;
          }
        }
        input {
          width: 500px;
          height: 44px;
          padding-left: 10px;
          vertical-align: middle;
        }
        select {
          display: block;
          width: 500px;
          height: 44px;
          padding-left: 12px;
          padding-right: 30px;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
        }
        textarea {
          width: 100%;
          height: 150px;
          padding: 12px;
          vertical-align: top;
        }
        &.product {
          position: relative;
          .icon {
            position: absolute;
            right: 10px;
            top: 15px;
            width: 20px;
            height: 20px;
            background: url('/images/contact/arrow.svg') center no-repeat;
            transition: transform ease-out .2s;
          }
        }
      }
      .name {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #3F454B;
        line-height: 24px;
      }
      .t-h {
        margin: 30px 0 18px;
        color: black;
      }
      .a-bottom {
        display: inline-block;
        font-size: 14px;
        text-align: left;
        color: #99A6B2;
        line-height: 20px;
        a {
          color: #0097FF;
          text-decoration: none;
          outline: 0;
          &:hover {
            color: #007aff;
            text-decoration: underline;
          }
        }
      }
      .a-submit {
        position: relative;
        width: 95%;
        height: 54px;
        font-size: 15px;
        margin-top: 40px;
        font-weight: bold;
        background-color: #1460F3;
        border-radius: 6px;
        text-align: center;
        color: #fff;
        border: 0;
        text-decoration: none;
        pointer-events: none;
        &.ready {
          &:hover {
            background-color: #548CF9;
          }
          pointer-events: initial;
        }
        &.sending {
          background: #f9fafb;
          color: #8792a1;
        }
        &.success {
          background: #60d956;
        }
        &:focus {
          outline: none;
        }
        @keyframes a {
          0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
          }
          to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
          }
        }
        @-webkit-keyframes a {
          0% {
            -webkit-transform: rotate(0);
            transform: rotate(0)
          }
          to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
          }
        }
        .loading {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-right: 12px;
          border-radius: 50%;
          transition-timing-function: ease-in-out;
          transition-duration: .15s;
          border: 1px solid #8792a1;
          border-right-color: transparent;
          animation: a .8s infinite linear;
        }
        .text-container {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          &.sent {
            opacity: 0;
            -webkit-transform: translateX(-50%) translateY(40px);
            -ms-transform: translateX(-50%) translateY(40px);
            transform: translateX(-50%) translateY(40px);
            transition: .7s cubic-bezier(.075,.82,.165,1) .15s;
            transition-property: opacity, transform, -webkit-transform;
          }
        }
        .text {
          display: inline-block;
          line-height: 54px;
        }
        .display-block {
          display: block;
          margin: 0 auto;
          fill: #fff;
          transition: all .5s cubic-bezier(.68,-.55,.265,1.55) .3s;
          opacity: 0;
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          transform: scale(0);
          &.show {
            opacity: 1;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
          }
        }
      }
    }
    @media screen and (max-width: 929px){
      .form-contact {
        padding-top: 48px;
        li {
          margin-bottom: 16px;
          &.name {
            margin-bottom: 8px;
            font-size: 16px;
          }
          input, select {
            width: 100%;
            font-size: 14px;
            line-height: 20px;
          }
          textarea {
            width: 100%;
            font-size: 14px;
            line-height: 20px;
          }
          &.product {
            width: 100%;
            .icon {
              top: 10px;
            }
          }
        }
        .a-submit {
          width: 100%;
          &:active {
            background-color: #548CF9;
          }
        }
      }
    }
    @media screen and (min-width: 930px){
      .header {
        background: url('/images/contact/support_pic.jpg') center no-repeat;
        background-size: cover;
      }
      .form-contact {
        li {
          width: 100%;
          input, select, textarea {
            width: 95%;
          }
          span {
            display: inline-block;
          }
          &.product {
            width: 100%;
            .icon {
              right: calc(5% + 10px);
            }
          }
        }
      }
    }
    @media screen and (min-width: 1280px){
      .form-contact {
        li {
          width: 500px;
        }
        li.product {
          width: 500px;
          .icon {
            right: 35px;
          }
        }
      }
    }
  }
</style>
