17pdf_front_end/components/SdkForm.vue

<template>
<div>
  <div v-if="modalShow" class="success-modal">
    <img src="http://cn-file.17pdf.com/website/sdk/ic_store_success.png" alt="success">
    <div class="title">感谢您与我们联系。</div>
    <div class="desc">您的信息已成功发送，我们将在24小时内回复您。</div>
  </div>
  <div v-else class="en poppins">
    <div class=" contact-container lg:flex lg:justify-between lg:mb-20px">
      <div class="w-full">
        <!-- 用户产品描述 非必填项 -->
        <div class="text-sm font-600 mb-20px text-[#232748]">{{ contactSales.aboutProject }}</div>
        <textarea
          class="appearance-none w-full p-12px text-14px leading-20px rounded-6px outline-none border-1px border-[#E1E3E8] focus:border-[#396FFA] hover:border-[#396FFA] resize-y"
          v-model.trim="description"
          placeholder="您的项目使用场景是什么？（什么情况下需要用到什么功能）"
          rows="6"
          @input="handleInfo('description')"
        ></textarea>
        <!-- SDK构建的产品是对内/对外 -->
        <div class="mt-30px mb-20px text-sm text-[#232748] font-600 "><i class="text-[#FF5050] mt-10px">*</i> {{ contactSales.whoBuildFor }}</div>
        <div class="relative">
          <select class="w-full h-44px px-12px rounded-6px appearance-none border-1px border-[#E1E3E8] outline-none focus:border-[#396FFA] hover:border-[#396FFA]" v-model="building" name="building" @change="handleInfo('building', $event)">
            <option value="公司内部">{{ contactSales.forCustomers }}</option>
            <option value="公司产品的终端用户">{{ contactSales.forInternalUse }}</option>
            <option value="另一家公司的产品">{{ contactSales.forAnotherCompany }}</option>
          </select>
          <Arrow class="absolute bottom-18px right-18px z-2 w-14px h-8px pointer-events-none " />
        </div>
        <!-- 平台 -->
        <div class="mt-30px mb-16px  text-sm font-600  text-[#232748]"><i class="text-[#FF5050] mt-10px">*</i> {{ contactSales.whatDeploy }}</div>
        <div class="grid gap-y-24px grid-cols-3">
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="Windows" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Windows')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Windows class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px">Windows</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="Web" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Web')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Web class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px">Web</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="Android" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Android')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Android class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px ">Android</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="iOS" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('iOS')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><iOS class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px">iOS</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="Mac Catalyst" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Mac Catalyst')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Mac class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px">Mac Catalyst</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="Linux" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('Linux')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Linux class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px">Linux</span>
          </label>
          <label class="flex items-center">
            <input v-model="platforms" type="checkbox" value="ComPDFKit API" @change="handleCheckBox('platforms')">
            <CheckBox v-if="platforms.includes('ComPDFKit API')" />
            <span v-else class="box"></span>
            <span class="ml-8px text-brand-0"><Compdf class="w-24px h-24px" /></span>
            <span class="text-sm text-[#52555F] ml-6px whitespace-nowrap">API 解决方案</span>
          </label>
        </div>
        <div v-show="platforms_err && submitted" class="text-[#FF5050] mt-10px">{{ platforms_err }}</div>
        <!-- 功能 -->
        <div class="mt-27px mb-20px text-sm font-600 "><i class="text-[#FF5050] mt-10px">*</i> {{ contactSales.whichFeatures }}</div>
        <div class="grid gap-y-24px grid-cols-3">
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF查看" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF查看')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">{{ contactSales.platforms.viewer }}</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF批注" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF批注')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">PDF批注</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF签名" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF签名')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px">PDF签名</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF内容编辑" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF内容编辑')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">PDF内容编辑</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF表单" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF表单')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">PDF表单</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="OCR识别" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('OCR识别')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">OCR识别</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF页面管理" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF页面管理')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">{{ contactSales.platforms.documentEditor }}</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="文档转换" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('文档转换')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">文档转换</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF安全保护" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF安全保护')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">PDF安全保护</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="标记密文" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('标记密文')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">标记密文</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="PDF文档对比" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('PDF文档对比')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">PDF文档对比</span>
          </label>
          <label class="flex items-center">
            <input v-model="features" type="checkbox" value="文档压缩" @change="handleCheckBox('features')">
            <CheckBox v-if="features.includes('文档压缩')" />
            <span v-else class="box"></span>
            <span class="text-sm text-[#232748] ml-9px ">文档压缩</span>
          </label>
        </div>
        <div v-show="features_err && submitted" class="text-[#FF5050] mt-10px ">{{ features_err }}</div>
        <!-- 用户数量 非必填项 -->
        <div class="mt-27px mb-16px text-sm text-[#232748] font-600 ">{{ contactSales.numberOfUsers }}</div>
        <div class="relative">
          <select class="w-full h-44px px-12px rounded-6px appearance-none border-1px border-[#E1E3E8] outline-none focus:border-[#396FFA] hover:border-[#396FFA]" v-model="number" name="number" @change="handleInfo('number', $event)">
            <option value="0-100">0-100</option>
            <option value="101-1000">101-1000</option>
            <option value="1001-5000">1001-5000</option>
            <option value="5001-10000">5001-10000</option>
            <option value="10000+">10000+</option>
          </select>
          <Arrow class="absolute bottom-18px right-18px z-2 w-14px h-8px pointer-events-none" />
        </div>
        <!-- 姓名 -->
        <div class="info-content">
          <div class="flex">
            <div class="name flex-1 ">
              <div>
                <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 "><i class="text-[#FF5050] mt-10px">*</i> 姓名</span>
                <input class="w-full h-44px  px-12px rounded-6px !border-1px !border-[#E1E3E8] border-solid !focus:border-[#396FFA] !hover:border-[#396FFA]" v-model.trim="firstName" type="text" placeholder="请输入名字" @input="handleInfo('firstName')">
              </div>
              <div v-if="firstName_err" class="text-[#FF5050] mt-10px ">{{ firstName_err }}</div>
            </div>
          </div>
        </div>
        <!-- 公司邮箱 -->
        <div class="info-content">
          <div class="email">
            <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 "><i class="text-[#FF5050] mt-10px">*</i> 公司邮箱地址</span>
            <input class="w-full h-44px  px-12px rounded-6px !border-1px !border-[#E1E3E8] border-solid !focus:border-[#396FFA] !hover:border-[#396FFA]" v-model.trim="email" type="text" placeholder="name@company.com" @input="handleEmail">
          </div>
          <div v-if="email_err" class="text-[#FF5050] mt-10px ">{{ email_err }}</div>
        </div>
        <!-- 公司网站 非必填项-->
        <!-- <div class="info-content">
          <div class="website">
            <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 ">Company website</span>
            <input class="w-full h-44px  px-12px rounded-6px !border-1px !border-[#E1E3E8] border-solid !focus:border-[#396FFA] !hover:border-[#396FFA]" v-model.trim="website" type="text" placeholder="Enter website" @input="handleInfo('website')">
          </div>
        </div> -->
        <!-- 电话 非必填项 -->
        <!-- <div class="info-content">
          <div class="phone">
            <span class="inline-block mt-25px mb-16px  text-sm text-[#232748] font-600 ">Phone number</span>
            <input class="w-full h-44px  px-12px rounded-6px !border-1px !border-[#E1E3E8] border-solid !focus:border-[#396FFA] !hover:border-[#396FFA]" v-model.trim="phone" type="text" placeholder="Phone number">
          </div>
        </div>
        <div class="mt-30px <mt-24px mb-20px <mb-8px text-sm text-[#232748] font-600 "> {{ contactSales.industry }}</div>
        <div class="relative">
          <select
            class="w-full h-44px  px-12px rounded-6px appearance-none border-1px border-[#E1E3E8] outline-none focus:border-[#396FFA] hover:border-[#396FFA]"
            :class="industry ? 'text-[#232748]' : 'text-[#CCCCCC]'"
            v-model="industry"
            name="Industry"
            @change="handleInfo('industry', $event)"
          >
            <option selected disabled value="">Please select or enter the industry of your business</option>
            <option value="advertising">{{ contactSales.advertising }}</option>
            <option value="aerospaceIindustry">{{ contactSales.aerospaceIindustry }}</option>
            <option value="armsIndustry">{{ contactSales.armsIndustry }}</option>
            <option value="automotiveIndustry">{{ contactSales.automotiveIndustry }}</option>
            <option value="broadcasting">{{ contactSales.broadcasting }}</option>
            <option value="chemicalIndustry">{{ contactSales.chemicalIndustry }}</option>
            <option value="computerIndustry">{{ contactSales.computerIndustry }}</option>
            <option value="constructionIndustry">{{ contactSales.constructionIndustry }}</option>
            <option value="creative">{{ contactSales.creative }}</option>
            <option value="culturalIndustry">{{ contactSales.culturalIndustry }}</option>
            <option value="dataProcessingOutsourcedServices">{{ contactSales.dataProcessingOutsourcedServices }}</option>
            <option value="defenseIndustry">{{ contactSales.defenseIndustry }}</option>
            <option value="educationIndustry">{{ contactSales.educationIndustry }}</option>
            <option value="electricPowerIndustry">{{ contactSales.electricPowerIndustry }}</option>
            <option value="electronicsIndustry">{{ contactSales.electronicsIndustry }}</option>
            <option value="energyIndustry">{{ contactSales.energyIndustry }}</option>
            <option value="entertainment">{{ contactSales.entertainment }}</option>
            <option value="entertainmentIndustry">{{ contactSales.entertainmentIndustry }}</option>
            <option value="fashion">{{ contactSales.fashion }}</option>
            <option value="filmIndustry">{{ contactSales.filmIndustry }}</option>
            <option value="financialServicesIndustry">{{ contactSales.financialServicesIndustry }}</option>
            <option value="fishingIndustry">{{ contactSales.fishingIndustry }}</option>
            <option value="floral">{{ contactSales.floral }}</option>
            <option value="foodIndustry">{{ contactSales.foodIndustry }}</option>
            <option value="gamblingIndustry">{{ contactSales.gamblingIndustry }}</option>
            <option value="healthcareIndustry">{{ contactSales.healthcareIndustry }}</option>
            <option value="horticultureIndustry">{{ contactSales.horticultureIndustry }}</option>
            <option value="hospitalityIndustry">{{ contactSales.hospitalityIndustry }}</option>
            <option value="humanResourceEmploymentServices">{{ contactSales.humanResourceEmploymentServices }}</option>
            <option value="industrialRobotIndustry">{{ contactSales.industrialRobotIndustry }}</option>
            <option value="informationIndustry">{{ contactSales.informationIndustry }}</option>
            <option value="insuranceIndustry">{{ contactSales.insuranceIndustry }}</option>
            <option value="internet">{{ contactSales.internet }}</option>
            <option value="leisureIndustry">{{ contactSales.leisureIndustry }}</option>
            <option value="lowTechnologyIndustry">{{ contactSales.lowTechnologyIndustry }}</option>
            <option value="massMedia">{{ contactSales.massMedia }}</option>
            <option value="meat">{{ contactSales.meat }}</option>
            <option value="meatPacking">{{ contactSales.meatPacking }}</option>
            <option value="mining">{{ contactSales.mining }}</option>
            <option value="musicIndustry">{{ contactSales.musicIndustry }}</option>
            <option value="newsMedia">{{ contactSales.newsMedia }}</option>
            <option value="oilShale">{{ contactSales.oilShale }}</option>
            <option value="petroleumIndustry">{{ contactSales.petroleumIndustry }}</option>
            <option value="pharmaceuticalIndustry">{{ contactSales.pharmaceuticalIndustry }}</option>
            <option value="professionalServices">{{ contactSales.professionalServices }}</option>
            <option value="publishing">{{ contactSales.publishing }}</option>
            <option value="publicAdministration">{{ contactSales.publicAdministration }}</option>
            <option value="pulpAndPaperIndustry">{{ contactSales.pulpAndPaperIndustry }}</option>
            <option value="realEstateIndustry">{{ contactSales.realEstateIndustry }}</option>
            <option value="researchConsultingServices">{{ contactSales.researchConsultingServices }}</option>
            <option value="retailIndustry">{{ contactSales.retailIndustry }}</option>
            <option value="semiconductorIndustry">{{ contactSales.semiconductorIndustry }}</option>
            <option value="shipbuildingIndustry">{{ contactSales.shipbuildingIndustry }}</option>
            <option value="softwareIndustry">{{ contactSales.softwareIndustry }}</option>
            <option value="sportIndustry">{{ contactSales.sportIndustry }}</option>
            <option value="telecommunicationsIndustry">{{ contactSales.telecommunicationsIndustry }}</option>
            <option value="textileIndustry">{{ contactSales.textileIndustry }}</option>
            <option value="tobaccoIndustry">{{ contactSales.tobaccoIndustry }}</option>
            <option value="transportIndustry">{{ contactSales.transportIndustry }}</option>
            <option value="videoGameIndustry">{{ contactSales.videoGameIndustry }}</option>
            <option value="waterIndustry">{{ contactSales.waterIndustry }}</option>
            <option value="woodIndustry">{{ contactSales.woodIndustry }}</option>
          </select>
          <Arrow class="absolute bottom-18px right-18px z-2 w-14px h-8px pointer-events-none <(bottom-10px right-8px)" />
        </div> -->
        <!-- 国家  非必填项-->
        <!-- <div class="info-content">
          <div class="country relative">
            <span class="inline-block mt-24px mb-16px font-600  <mt-16px <mb-8px text-sm">Country</span>
            <select
              v-model="country"
              class="w-full h-44px  px-12px rounded-6px appearance-none border-1px border-[#E1E3E8] outline-none focus:border-[#396FFA] hover:border-[#396FFA]"
              :class="country ? 'text-[#232748]' : 'text-[#CCCCCC]'"
              @change="handleInfo('country', $event)"
            >
              <option value="" disabled>Select a country</option>
              <option
                v-for="(item, index) in countryList"
                :key="index"
                :value="item.name"
              >
                {{ item.name }}
              </option>
            </select>
            <Arrow class="absolute bottom-18px right-18px z-2 w-14px h-8px pointer-events-none <(bottom-10px right-8px)" />
          </div>
        </div> -->
        <div class="lg:hover:bg-[#548CF9] w-full lg:max-w-380px mt-40px text-sm py-15px  text-center mx-auto rounded-8px font-500  bg-[#396FFA] text-white cursor-pointer" @click="submit">{{ submitText }}</div>
      </div>
    </div>
    </div>
</div>
    
</template>

<script>
import checkEmail from '~/utils/checkemail'
import { country } from "~/utils/country.js"
import iOSCN from '~/assets/images/icons/apple.svg?inline'
import MacCN from '~/assets/images/icons/macos.svg?inline'
import AndroidCN from '~/assets/images/icons/android.svg?inline'
import WindowsCN from '~/assets/images/icons/windows.svg?inline'
import WebCN from '~/assets/images/icons/web.svg?inline'
import CheckBox from '~/assets/images/icons/check_box.svg?inline'
import EmailCN from '~/assets/images/icons/email.svg?inline'
import Dot from '~/assets/images/icons/dot.svg?inline'
import ArrowCN from '~/assets/images/icons/arrow.svg?inline'
import LinuxCN from '~/assets/images/icons/linux.svg?inline'
import iOS from '~/assets/images/icons/apple_black.svg?inline'
import Mac from '~/assets/images/icons/mac_black.svg?inline'
import Android from '~/assets/images/icons/android_black.svg?inline'
import Windows from '~/assets/images/icons/windows_black.svg?inline'
import Web from '~/assets/images/icons/web_black.svg?inline'
import Linux from '~/assets/images/icons/linux_black.svg?inline'
import Compdf from '~/assets/images/icons/compdf_api_black.svg?inline'
import Arrow from '~/assets/images/icons/downarrow.svg?inline'
import Email from '~/assets/images/icons/email_new.svg?inline'
import Tech from '~/assets/images/icons/tech_support.svg?inline'

export default {
  components: {
    CheckBox,
    iOSCN,
    MacCN,
    AndroidCN,
    WindowsCN,
    WebCN,
    LinuxCN,
    Dot,
    ArrowCN,
    EmailCN,

    iOS,
    Mac,
    Android,
    Windows,
    Web,
    Linux,
    Compdf,
    Arrow,
    Email,
    Tech
  },
  data() {
    return {
      modalShow: false,
      submitted: false,
      fieldsNum: 0,
      submitText: '提交',
      errText: '',
      building: '公司内部',
      number: '0-100',
      number_cn: 1,
      platforms: [],
      platforms_err: null,
      features: [],
      features_err: null,
      description: '',
      description_err: null,
      firstName: null,
      firstName_err: null,
      lastName: null,
      lastName_err: null,
      name: null,
      name_err: null,
      email: null,
      email_err: null,
      phone: '',
      phone_err: null,
      company: null,
      company_err: null,
      website: '',
      website_err: null,
      industry: '',
      country: '',
      countryList: [],
      country_err: null,
      err: {
        // description: this.$t('contactSales.errDescription'),
        platforms: '请选择开发平台',
        features: '请勾选所需功能',
        firstName: '请输入您的姓名',
        lastName: 'Enter your last name',
        name: '请输入您的姓名',
        // phone_cn: this.$t('contactSales.errPhone'),
        // phone: {
        //   err: 'Enter your phone number',
        //   correct: 'Wrong phone format'
        // },
        email: {
          err: '请输入您公司的邮箱地址',
          correct: '请填写正确格式的邮箱地址',
          business: 'Please enter a non generic email address'
        },
        // company: this.$t('contactSales.errCompany'),
        // website: this.$t('contactSales.errWebsite'),
        // country: 'Please select your country'
      },
      checkbox: false,
      contactSales: {
        "contactUs": "免费试用&获取报价",
        "getConnect": "请填写以下表单, 提供贵公司项目的详细信息获得免费试用和报价。ComPDFKit团队将在一个工作日内，以邮件的形式与您取得联系。",
        "aboutProject": "项目描述",
        "aboutProjectDesc": "您的项目使用场景是什么？您需要什么功能？您期望在哪些方面与ComPDFKit进行合作？\r\n详细的信息，有利于我们了解您的需求，并提供合适的解决方案以及精准的报价。",
        "whoBuildFor": "您的应用程序将用于：",
        "forCustomers": "公司内部",
        "forInternalUse": "公司产品的终端用户",
        "forAnotherCompany": "另一家公司的产品",
        "whatDeploy": "您期望支持部署到哪些开发平台？",
        "whichFeatures": "选择您的项目需要的功能",
        "numberOfUsers": "终端用户人数",
        "name": "姓名",
        "namePlaceholder": "您的全名",
        "businessEmail": "公司邮箱地址",
        "phoneNumber": "电话",
        "phoneNumberPlaceholder": "请输入您的联系电话",
        "companyName": "公司名称",
        "companyNamePlaceholder": "填写您的公司名称",
        "website": "公司网站",
        "websitePlaceholder": "请留下您公司官网网址",
        "submit": "提交",
        "errDescription": "请描述贵公司的项目",
        "errName": "请输入您的姓名",
        "errPhone": "请填写正确的联系电话",
        "errEmailEmpty": "请输入您公司的邮箱地址",
        "errEmailWrong": "请填写正确格式的邮箱地址",
        "errCompany": "请填写您的公司名称",
        "errWebsite": "请留下您公司官网网址",
        "errSubmit": "请完成必选项的填写",
        "modelThank": "感谢您的联系！",
        "modelSuccess": "您的信息已成功发送给ComPDFKit团队，我们将在一个工作日内，以邮件或电话的方式与您取得联系。",
        "commentOneText": "考虑到我们的用户在阅读和学习的时候想要添加注释。我试图处理PDF文件并重新开发所有的功能，但我很快意识到我需要的是如何解决业务问题的方法，而不是开发PDF处理软件。在ComPDFKit 的帮助下，我们不必在开发过程中浪费太多时间。",
        "commentOneJob": "信息技术 运营总监",
        "commentTwoText": "非常感谢 ComPDFKit。我们公司想为客户提供一种简单、快速又安全的方式来签署和填写PDF表格，ComPDFKit做到了，满足我们公司的所有需求。这就是为什么PDF Technologies 多年来一直是我们的合作伙伴的原因。",
        "commentTwoJob": "现代服务业 产品经理",
        "platforms": {
          "viewer": "PDF查看",
          "annotations": "PDF批注",
          "signatures": "PDF签名",
          "forms": "PDF表单填写",
          "documentEditor": "PDF页面管理",
          "editPDF": "PDF内容编辑",
          "security": "PDF安全保护",
          "conversion": "标记密文",
          "documentComparison": "PDF文档对比",
          "ocr": "OCR识别",
          "redaction": "文档转换"
        }
      }
    }
  },
  mounted () {
    this.countryList = country()
  },
  watch: {
    fieldsNum(val) {
      if (((val > 8 ) || (val > 7 )) && !this.errText) {
        this.errText = ''
      }
    },
    checkbox(val) {
      if (val && this.errText !== 'Please fill in the missing fields.') {
        this.errText = ''
      }
    }
  },
  props: ["labelText"],
  methods: {
    doClose() {
      setTimeout(() => {
        this.modalShow = false
      }, 500);
      this.platforms = []
      this.features = []
      this.description = ''
      this.firstName = null
      this.lastName = null
      this.name = null
      this.email = null
      this.company = null
      this.website = ''
      this.phone = ''
      this.country = ''
      this.fieldsNum = 0
      this.submitText = '提交'
    },
    handleCheckBox(arg) {
      if (!this[arg].length) {
        if (!this[arg + '_err']) {
          this[arg + '_err'] = this.err[arg]
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      } else {
        if (this[arg + '_err']) {
          this[arg + '_err'] = false
          this.fieldsNum++
        }
        return true
      }
    },
    handleErr(flag, errMessage, origin) {
      if (!this[flag]) {
        if (!this[flag + '_err']) {
          this[flag + '_err'] = errMessage
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      } else {
        if (this[flag + '_err']) {
          this[flag + '_err'] = origin
          this.fieldsNum++
        }
        return true
      }
    },
    handleEmail() {
      if (!this.email) {
        if (!this.email_err) {
          this.email_err = this.err.email.err
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        return false
      }
      if (!checkEmail(this.email)) {
        if (!this.email_err) {
          if (this.fieldsNum > 0) {
            this.fieldsNum--
          }
        }
        this.email_err = this.err.email.correct
        return false
      }
      if (this.email_err) {
        this.email_err = null
        this.fieldsNum++
      }
      return true
    },
    handleInfo(message, $event) {
      $event && $event.target.blur()
      if (message === 'phone') return this.handleErr('phone', this.err['phone_cn'], null)
      return this.handleErr(message, this.err[message], null)
    },
    // handlePhone () {
    //   const reg = /[^0-9-]+/
    //   if (!this.phone) {
    //     if (!this.phone_err) {
    //       this.phone_err = this.err.phone.err
    //       if (this.fieldsNum > 0) {
    //         this.fieldsNum--
    //       }
    //     }
    //     return false
    //   }
    //   if (reg.test(this.phone)) {
    //     if (!this.phone_err) {
    //       if (this.fieldsNum > 0) {
    //         this.fieldsNum--
    //       }
    //     }
    //     this.phone_err = this.err.phone.correct
    //     return false
    //   }
    //   if (this.phone_err) {
    //     this.phone_err = null
    //     this.fieldsNum++
    //   }
    //   return true
    // },
    submit() {
      this.submitted = true
      let i = 0
      if (this.handleCheckBox('platforms')) i++
      if (this.handleCheckBox('features')) i++
      // if (this.handleInfo('description')) i++
      if (this.handleEmail()) i++
      if (this.handleInfo('firstName')) i++
      // if (this.handlePhone()) i++
      // if (this.handleInfo('country')) i++
      
      // if (this.handleInfo('website')) i++
      this.fieldsNum = i
       if (this.fieldsNum < 4 ) {
        this.errText = this.contactSales.errSubmit
        return
      }
      this.errText = ''
      const self = this
      this.$axios({
        method: 'POST',
        url: this.$config.pdfDomain + '/api/contact',
        data: {
          'detail[platform]': self.platforms.join(', '),
          'detail[feature]': self.features.join(', '),
          'detail[description]': self.description,
          'contact_email[user_name]':  self.firstName,
          'contact_email[email]': self.email,
          'contact_email[product_name]': '17PDF',
          'contact_email[email_subject]': 'Contact for SDK Plan',
          'detail[building]': self.building,
          'detail[phone]': self.phone,
          'detail[number]':  self.number,
          'detail[website]': self.website,
          'detail[industry]': self.industry,
          'detail[country]': self.country,
           'detail[label]': self.labelText
        },
        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') {
            console.log('Replace the success Flag')
            
            setTimeout(function () {
              self.submitText = 'Success'
              self.modalShow = true
            }, 0)
          } else {
            alert('The email fails to send.')
          }
        })
        .catch((err) => {
          console.log(err)
          alert('The email fails to send.')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .poppins {
    font-family: 'Poppins';
  }
  .contact-container {
    
      label {
        input {
          position: absolute;
          border: 0px;
          clip: rect(0px, 0px, 0px, 0px);
          height: 1px;
          width: 1px;
          margin: -1px;
          padding: 0px;
          overflow: hidden;
          white-space: nowrap;
        }
        svg {
          flex-shrink: 0;
          color: #1460F3;
        }
      }
      .box {
        flex-shrink: 0;
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #A6B2BF;
        border-radius: 2px;
      }
    
    .comment-item {
      &::before {
        content: '';
        display: block;
        width: 60px;
        height: 2px;
        margin-bottom: 18px;
        background-color: rgba(20, 96, 243, 0.1);
      }
      & + .comment-item {
        margin-top: 30px;
      }
    }
  }
  .en {
    .contact-container .contact-box .box {
      border-radius: 4px;
    }
    select,
    input {
      font-size: 14px;
      line-height: 40px;
    }
    select option {
      color: #000;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      /* WebKit browsers，webkit内核浏览器 */
      color: #CCCCCC;
    } 
    input:-moz-placeholder,
    textarea:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */ 
      color: #CCCCCC;
    } 
    input::-moz-placeholder,
    textarea::-moz-placeholder {
      /* Mozilla Firefox 19+ */ 
      color: #CCCCCC;
    } 
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      /* Internet Explorer 10+ */ 
      color: #CCCCCC;
    }
    .nowrap {
      white-space: nowrap;
    }
    .privacy-box {
      flex-shrink: 0;
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid #CCCCCC;
      border-radius: 2px;
    }
    .privacy-box-active {
      min-width: 16px;
      max-width: 16px;
      height: 16px;
      color: #1460F3;
    }
  }
  @media screen and (min-width: 930px) {
    .cn .contact-container {
      .contact-box {
        box-shadow: 0px 4px 35px rgba(129, 149, 200, 0.18);
      }
    }
    .en {
      .container {
        padding-left: 0;
        padding-right: 0;
      }
      .contact-container .contact-box {
        box-shadow: 0px 4px 35px rgba(0, 41, 146, 0.1);
      }
    }
  }
  .success-modal {
  text-align: center;
  padding-bottom: 30px;
  img {
    width: 87px;
    display: inline-block;
  }
  .title {
    margin-top: 16px;
    margin-bottom: 2px;
    font-size: 28px;
    font-family: Helvetica-Bold,Helvetica;
    font-weight: bold;
    color: #1d2023;
    line-height: 44px;
  }
  .desc {
    font-size: 16px;
    color: #606972;
    line-height: 22px;
  }
}
</style>