<template>
  <div class="app-apply-form">
    <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>
</template>

<script>
import * as api from '@/api'
export default {
  data() {
    return {
      ruleForm: { name: '', phone: '', project_id: '1012', channel: 19960 },
      projectList: [
        { label: '金融工商管理硕士', value: '1000' },
        { label: '酒店及旅游业工商管理硕士', value: '1008' },
        { label: '工商管理硕士', value: '1012' },
        { label: '应用心理学硕士', value: '1006' },
        { label: '教育学硕士', value: '1005' },
        { label: '中国未来金融领袖计划', value: '1007' }
      ],
      phoneCode: '',
      codeButtonDisabled: false,
      timer: null,
      disabledTime: 60
    }
  },
  computed: {
    buttonText() {
      return this.codeButtonDisabled ? `${this.disabledTime}秒后重发` : '获取验证码'
    }
  },
  methods: {
    onSbumit() {
      if (!this.ruleForm.name) {
        this.$notify('请输入您的姓名')
        return
      }
      if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
        this.$notify('请输入正确的手机号')
        return
      }
      if (!this.phoneCode) {
        this.$notify('请输入短信验证码')
        return
      }
      this.checkPhoneCode().then(this.handleSubmit)
    },
    handleSubmit() {
      api.submit(this.ruleForm).then(response => {
        // this.$notify({ type: 'success', message: response.message })
        this.$dialog.alert({ message: response.message }).then(() => {
          this.$emit('success')
        })
      })
    },
    // 校验短信验证码
    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.$notify('请输入正确的手机号')
        return
      }
      this.sendCode()
    },
    // 发送验证码
    sendCode() {
      this.setTimer()
      api
        .sendCode({ account: this.ruleForm.phone })
        .then(() => {
          this.$notify({ 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>
.app-apply-form {
  width: 290px;
  .title {
    padding: 30px 0;
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.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;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
.form-input + .form-button {
  margin-left: 10px;
}
</style>
