<script>
import { get, post } from '../../utils/request'
import EyeClose from '@/components/icon/eye_close.vue'
import EyeOpen from '@/components/icon/eye_open.vue'
import Email from '@/components/icon/email.vue'
import Close from '@/components/icon/close.vue'
import AsideInfo from '@/components/asideInfo.vue'

export default {
  components: { EyeClose, EyeOpen, AsideInfo, Email, Close },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter password.'))
      } else {
        if (this.ruleForm.passwordConfirm !== '') {
          this.$refs.ruleForm.validateField('passwordConfirm')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please confirm password.'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error("Confirm password doesn't match password"))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      checked: false,
      checkBox: false,
      CountDown: 60, //倒计时
      buttonName: 'Send', //按钮初始化文字
      isDisabled: false, //是否禁用按钮
      passwordType: false,
      passwordConfirmType: false,
      checkedMac: false,
      checkedWindows: false,
      ruleForm: {
        email: '',
        verificationCode: '',
        industry: '',
        organization: '',
        job: '',
        name: '',
        password: '',
        passwordConfirm: '',
        platform: []
      },
      rules: {
        email: [
          { required: true, message: 'Please enter email address.', trigger: ['blur'] },
          { type: 'email', message: 'Please enter a valid Email Address', trigger: [''] }
        ],
        verificationCode: [
          { required: true, message: 'Please enter the verification code.', trigger: ['blur'] }
        ],
        industry: [
          { required: true, message: 'Please select industry.', trigger: 'blur' }
        ],
        organization: [
          { required: true, message: 'Please enter organization name.', trigger: ['blur'] }
        ],
        job: [
          { required: true, message: 'Please enter job title.', trigger: ['blur'] }
        ],
        name: [
          { required: true, message: 'Please enter user name.', trigger: ['blur'] }
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
          { min: 6, max: 24, message: 'Password must between 6-24 characters', trigger: ['blur'] }
        ],
        passwordConfirm: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 24, message: 'Password must between 6-24 characters', trigger: ['blur'] }
        ],
        platform: [
          { required: true, message: 'Please select the corresponding platform.', trigger: [''] }
        ]
      },
      baseurl: ''
    }
  },
  watch: {
    checkedMac(value) {
      if (value) {
        this.ruleForm.platform.push(1)
        this.$refs.ruleForm.validateField('platform')
      } else {
        let new_set = new Set(this.ruleForm.platform)
        new_set.delete(1)
        this.ruleForm.platform = [...new_set]
      }
    },
    checkedWindows(value) {
      if (value) {
        this.ruleForm.platform.push(2)
        this.$refs.ruleForm.validateField('platform')
      } else {
        let new_set = new Set(this.ruleForm.platform)
        new_set.delete(2)
        this.ruleForm.platform = [...new_set]
      }
    },
    checked: {
      handler(val) {
        if (this.checked !== '') {
          this.checkBox = false
        } else {
          this.checkBox = true
        }
      }
    }
  },
  mounted() {
    this.baseurl = import.meta.env.MODE === 'production' ? 'https://www.pdfreaderpro.com' : 'http://test-pdf-pro.kdan.cn:3021'
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!this.checked) {
          this.checkBox = true
          this.$message.error({
            duration: 5000,
            message: 'Please read and confirm PRIVACY POLICY and TERMS OF USE first'
          })
          return
        }
        if (valid) {
          post('/pdf-tech/vppMember/createTrial', {
            email: this.ruleForm.email,
            verifyCode: this.ruleForm.verificationCode,
            industry: this.ruleForm.industry,
            company: this.ruleForm.organization,
            job: this.ruleForm.job,
            username: this.ruleForm.name,
            password: this.ruleForm.password,
            confirmPassword: this.ruleForm.passwordConfirm,
            platform: this.ruleForm.platform
          }).then((res) => {
            if (
              res.data.code === 700 &&
              res.data.msg === 'False Code，please check again'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Verification Code Error'
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'The inviteEmailCode is error'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Invited users only'
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Organization has been created'
            ) {
              this.ruleForm.organization = ''
              this.$message.error({
                duration: 5000,
                message: 'Organization has been created'
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Password must between 6-24 characters'
            ) {
              this.$message.error({
                duration: 5000,
                message: 'Password must be 6-24 characters'
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Different Password'
            ) {
              this.$message.error({
                duration: 5000,
                message: "Confirm password doesn't match password"
              })
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Email has been created'
            ) {
              this.dialogVisible = true
            } else if (res.data.code === 200 && res.data.msg === '注册成功') {
              this.$message({
                duration: 5000,
                message: 'Sign up Success',
                type: 'success'
              })
              this.$router.push('/login?freeEmail=' + this.ruleForm.email)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    sendEmail() {
      const regEmail = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/
      if (regEmail.test(this.ruleForm.email) && this.ruleForm.email !== '') {
        if (!this.isDisabled) {
          this.isDisabled = true
          //发送邮件
          get(
            '/pdf-tech/auth/getVerifyCode?action=0&type=0&receiver=' +
            this.ruleForm.email
          ).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: 'Email sent successfully',
                type: "success"
              })
              let timerId = setInterval(() => {
                this.CountDown--
                this.isDisabled = true
                this.buttonName = this.CountDown + 's'
                if (this.CountDown <= 0) {
                  clearInterval(timerId)
                  this.buttonName = 'send'
                  this.CountDown = 60
                  this.isDisabled = false
                }
              }, 1000)
            } else if (
              res.data.code === 700 &&
              res.data.msg === 'Email has been created'
            ) {
              this.dialogVisible = true
              this.isDisabled = false
            } else {
              this.isDisabled = false
            }
          })
        }
      } else if (!regEmail.test(this.ruleForm.email)) {
        this.$refs.ruleForm.validateField('email')
      }
    },
    changeDialogVisible() {
      this.dialogVisible = false
    }
  }
}
</script>

<template>
  <div class="bg w-full min-h-100vh flex justify-center items-center">
    <div class="flex w-1184px py-40px">
      <AsideInfo :isPB80="true">
        <template v-slot:title>
          <div class="mt-74px font-500 text-24px leading-36px px-80px text-[#101828]">
            Try Admin Console for Free
          </div>
        </template>
        <template v-slot:desc>
          <div class="mt-12px text-16px leading-24px px-80px text-[#404653]">
            Contact us to get
            <a :href="`${baseurl}/vpp-purchase-program`" target="_blank" class="text-[#1EB3F9] underline">more license
              codes</a>
            or a longer free trial time.
          </div>
        </template>
      </AsideInfo>
      <div class="w-704px bg-[#fff] flex justify-center rounded-r-16px">
        <div class="w-592px h-auto m-auto rounded-8px p-24px bg-[#fff] loginBox">
          <h1 class="text-24px font-500 mb-8px leading-36px">Sign up</h1>
          <div class="text-16px leading-24px text-[#404653] pb-8px border-b-1px border-[#E2E3E5]">
            Sign up to get
            <span class="text-[#12B76A]">14-day free trial</span>
            of Admin Console (5 licenses).
          </div>
          <div class="mt-24px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="200px"
              class="demo-ruleForm">
              <el-form-item label="Email" prop="email">
                <el-input v-model="ruleForm.email" class="email-input"
                  placeholder="Please enter email address."></el-input>
                <div
                  class="absolute top-0.5px right-1px w-80px h-31px bg-[#0773ED] text-center rounded-tr-4px rounded-br-4px font-500 text-[16px] text-[#fff] leading-32px hover:bg-[#3091FF] cursor-pointer"
                  :class="isDisabled || ruleForm.email === '' ? 'bgColor' : ''" @click="sendEmail">{{ buttonName }}</div>
              </el-form-item>
              <el-form-item label="Verification Code" prop="verificationCode">
                <el-input v-model="ruleForm.verificationCode"
                  placeholder="Please enter the verification code."></el-input>
              </el-form-item>
              <el-form-item label="Industry" prop="industry">
                <el-select v-model="ruleForm.industry" placeholder="Please select industry.">
                  <el-option label="Architecture" value="Architecture"></el-option>
                  <el-option label="Engineering & Construction" value="Engineering_Construction"></el-option>
                  <el-option label="Finance" value="Finance"></el-option>
                  <el-option label="Law Firms & Legal Services" value="Law_Firms_Legal_Services"></el-option>
                  <el-option label="Government" value="Government"></el-option>
                  <el-option label="Healthcare" value="Healthcare"></el-option>
                  <el-option label="Aerospace & Defense" value="Aerospace_Defense"></el-option>
                  <el-option label="Automotive & Marine" value="Automotive_Marine"></el-option>
                  <el-option label="Pharmaceuticals" value="Pharmaceuticals"></el-option>
                  <el-option label="Security" value="Security"></el-option>
                  <el-option label="Information & Document Management"
                    value="Information_Document_Management"></el-option>
                  <el-option label="Media" value="Media"></el-option>
                  <el-option label="Publishing" value="Publishing"></el-option>
                  <el-option label="Education" value="Education"></el-option>
                  <el-option label="eLearning" value="eLearning"></el-option>
                  <el-option label="Marketing Services" value="Marketing_Services"></el-option>
                  <el-option label="Insurance" value="Insurance"></el-option>
                  <el-option label="HR & Staffing" value="HR_Staffing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="Organization Name" prop="organization">
                <el-input v-model="ruleForm.organization" placeholder="Please enter organization name."></el-input>
              </el-form-item>
              <el-form-item label="Job Title" prop="job">
                <el-input v-model="ruleForm.job" placeholder="Please enter job title."></el-input>
              </el-form-item>
              <el-form-item label="User Name" prop="name">
                <el-input v-model="ruleForm.name" autocomplete="off" placeholder="Please enter user name."></el-input>
              </el-form-item>
              <el-form-item label="Password" prop="password">
                <div class="flex items-center">
                  <el-input v-model.trim="ruleForm.password" autocomplete="off" placeholder="Password"
                    :type="passwordType ? '' : 'password'">
                  </el-input>
                  <span v-show="ruleForm.password !== ''" class="show-password" @click="passwordType = !passwordType">
                    <EyeOpen v-show="passwordType" />
                    <EyeClose v-show="!passwordType" />
                  </span>
                </div>
              </el-form-item>
              <el-form-item label="Password Comfirm" prop="passwordConfirm" class="mt-4px">
                <div class="flex items-center">
                  <el-input v-model.trim="ruleForm.passwordConfirm" autocomplete="off"
                    placeholder="Please confirm password." :type="passwordConfirmType ? '' : 'password'">
                  </el-input>
                  <span v-show="ruleForm.passwordConfirm !== ''" class="show-password"
                    @click="passwordConfirmType = !passwordConfirmType">
                    <EyeOpen v-show="passwordConfirmType" />
                    <EyeClose v-show="!passwordConfirmType" />
                  </span>
                </div>
              </el-form-item>
              <el-form-item label="Platform" prop="platform">
                <div class="flex text-14px items-center leading-32px text-[#101828]">
                  <input type="checkbox" v-model="checkedMac" name="type" class="mr-3px" />Mac
                  <input type="checkbox" v-model="checkedWindows" name="type" class="mr-3px ml-16px" />Windows
                </div>
              </el-form-item>
            </el-form>
            <div class="flex justify-between ml-200px">
              <div @click="submitForm('ruleForm')"
                class="rounded-4px bg-[#0773ED] leading-40px w-[48%] text-center font-500 text-16px text-[#fff] hover:bg-[#3091FF] cursor-pointer">
                Sign up</div>
              <a href="/login"
                class="rounded-4px leading-38px w-[48%] border border-[#3091FF] text-center font-500 text-16px text-[#065CBC] hover:opacity-80 cursor-pointer hover:(bg-[#F5FAFF] text-[#065CBC] border-[#3091FF])">Log
                in</a>
            </div>
            <div class="flex items-center ml-200px mt-8px">
              <input type="checkbox" v-model="checked" name="type" />
              <span class="ml-8px text-12px leading-16px" :class="checkBox ? 'text-[#FF5054]' : ''">Read and Agree to
                <a href="https://www.pdfreaderpro.com/privacy-policy" target="_blank" class="text-[#0773ED]">PRIVACY
                  POLICY </a>
                and
                <a href="https://www.pdfreaderpro.com/terms_of_service" target="_blank" class="text-[#0773ED]"> TERMS OF
                  USE</a>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogVisible" width="338px" top="30vh" center :show-close="false"
      class="relative">
      <div class="absolute top-10px right-12px cursor-pointer z-3" @click="changeDialogVisible">
        <Close class="w-20px h-20px" />
      </div>
      <Email />
      <p class="mt-16px font-500 text-16px leading-24px text-[#101828]">
        Account already exists, please change the account or login directly.
      </p>
      <span slot="footer" class="dialog-footer">
        <div class="flex justify-between">
          <a :href="`/login?freeEmail=${ruleForm.email}`"
            class="rounded-4px bg-[#0773ED] leading-40px w-[48%] text-center font-500 text-16px text-[#fff] hover:bg-[#3091FF] cursor-pointer">
            Sign in
          </a>
          <div @click="changeDialogVisible"
            class="rounded-4px leading-38px w-[48%] border border-[#3091FF] text-center font-500 text-16px text-[#065CBC] hover:opacity-80 cursor-pointer hover:(bg-[#F5FAFF] text-[#065CBC] border-[#3091FF])">
            Change Email
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  font-family: Ubuntu;
  background: #e7eaee url('@/assets/images/background.png') center center/100% 100% no-repeat;
}

.show-password {
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 10px;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.bgColor {
  background-color: #82BDFF;
  border: none;
  cursor: not-allowed;
}

.el-form ::v-deep .el-form-item {
  margin-bottom: 28px;

  .el-form-item__label {
    line-height: 40px;
    height: 32px;

    &::before {
      display: none;
    }

    &::after {
      content: '*';
      color: #F56C6C;
      margin-left: 4px;
    }
  }

  .el-form-item__content {
    line-height: 32px;
    height: 32px;

    input,
    select {
      line-height: 32px;
      height: 32px;

      &:hover {
        border-color: #E2E3E5;
      }

      &:focus,
      &:focus-visible {
        border-color: #0773ED;
        outline: none;
      }
    }

    .email-input {
      input {
        padding-right: 82px;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input__icon {
      line-height: 32px;
    }
  }

  &.is-error {
    select {
      border-color: #F56C6C;
    }
  }
}
</style>

