<template>
  <div class="popup" v-show="visible">
    <div class="app-apply-form" @touchmove.prevent>
      <h2 class="title">报名咨询</h2>
      <div class="form">
        <div class="form-item">
          <input type="text" class="form-input" placeholder="请输入您的姓名" v-model="ruleForm.name" />
        </div>
        <div class="form-item">
          <input
            type="number"
            class="form-input"
            placeholder="请输入您的电话"
            maxlength="11"
            v-model="ruleForm.phone"
          />
        </div>
        <div class="form-item">
          <select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id" disabled>
            <option value="" disabled selected>请选择项目</option>
            <option v-for="(item, index) in projectList" :value="item.value" :key="index">{{ item.label }}</option>
          </select>
        </div>
        <div class="form-item">
          <input type="text" class="form-input" placeholder="请输入短信验证码" maxlength="4" v-model="phoneCode" />
          <input
            type="button"
            class="form-button"
            :disabled="codeButtonDisabled"
            :value="buttonText"
            @click="onSendCode"
          />
        </div>
        <div class="form-item">
          <input type="button" value="立即预约" class="form-button" @click="onSbumit" />
        </div>
      </div>
    </div>
    <div class="overlay" @click="closePop" @touchmove.prevent></div>
  </div>
</template>

<script>
import * as api from '@/api'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: { name: '', phone: '', project_id: '1016', channel: 19960 },
      projectList: [
        { label: '金融工商管理硕士', value: '1000' },
        { label: '酒店及旅游业工商管理硕士', value: '1008' },
        { label: '工商管理硕士', value: '1012' },
        { label: '应用心理学硕士', value: '1006' },
        { label: '教育学硕士', value: '1005' },
        { label: '中国未来金融领袖计划', value: '1007' },
        { label: '1+1 国际硕士', value: '1016' }
      ],
      phoneCode: '',
      codeButtonDisabled: false,
      timer: null,
      disabledTime: 60
    }
  },
  computed: {
    buttonText() {
      return this.codeButtonDisabled ? `${this.disabledTime}秒后重发` : '获取验证码'
    }
  },
  methods: {
    closePop() {
      document.getElementsByTagName('body')[0].style.height = ''
      document.getElementsByTagName('body')[0].style.overflow = ''
      this.$emit('update:visible', false)
    },
    onSbumit() {
      if (!this.ruleForm.name) {
        this.$message('请输入您的姓名')
        return
      }
      if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
        this.$message('请输入正确的手机号')
        return
      }
      if (!this.phoneCode) {
        this.$message('请输入短信验证码')
        return
      }
      this.checkPhoneCode().then(this.handleSubmit)
    },
    handleSubmit() {
      api
        .submit(this.ruleForm)
        .then(response => {
          this.$message('报名成功')
          this.$emit('success')
        })
        .catch(err => {
          if (err && err.type === 'checkcode') this.$message.error(err.msg)
          else this.$message.error(err.msg || '报名提交失败')
        })
    },
    // 校验短信验证码
    checkPhoneCode() {
      return api.checkCode({ account: this.ruleForm.phone, code: this.phoneCode })
    },
    onSendCode() {
      if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
        this.$message('请输入正确的手机号')
        return
      }
      this.sendCode()
    },
    // 发送验证码
    sendCode() {
      this.setTimer()
      api
        .sendCode({ account: this.ruleForm.phone })
        .then(() => {
          this.$message({ type: 'success', message: '验证码发送成功，注意查收' })
        })
        .catch(() => {
          this.clearTimer()
        })
    },
    setTimer() {
      this.codeButtonDisabled = true
      this.disabledTime = 60
      this.timer = setInterval(() => {
        this.disabledTime--
        if (this.disabledTime <= 0) {
          this.clearTimer()
        }
      }, 1000)
    },
    clearTimer() {
      this.codeButtonDisabled = false
      this.timer && clearInterval(this.timer)
    }
  },
  destroyed() {
    this.clearTimer()
  }
}
</script>

<style lang="scss" scoped>
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  background: rgba(0, 0, 0, 0.5);
}
.app-apply-form {
  height: 374px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/4ae1f00a05a40fd10866ffe153fa82b0.png);
  .title {
    padding: 30px 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  margin-right: 20px;
  margin-left: 10px;
}
.form-input {
  padding: 0 10px;
  width: 100%;
  height: 38px;
  background-color: #fff;
  box-sizing: border-box;
  border: none;
}
.form-select {
  appearance: none;
  position: relative;
  padding: 0 10px;
  width: 100%;
  height: 38px;
  background: #fff url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 30px 30px;
  box-sizing: border-box;
  border: none;
}
.form-button {
  padding: 0 10px;
  width: 100%;
  height: 38px;
  font-size: 16px;
  color: #aa1941;
  background-color: #ffd61b;
  border: none;
  cursor: pointer;
}
.form-input + .form-button {
  margin-left: 10px;
}
</style>
