<template>
  <div class="app-apply-form">
    <h2 class="title">{{ $t('aside.apply') }}</h2>
    <div class="form">
      <div class="form-item">
        <input type="text" class="form-input" :placeholder="$t('aside.name')" v-model="ruleForm.name" />
      </div>
      <div class="form-item">
        <input
          type="number"
          class="form-input"
          :placeholder="$t('aside.phone')"
          maxlength="11"
          v-model="ruleForm.phone"
        />
      </div>
      <div class="form-item">
        <select class="form-select" placeholder="请选择项目" v-model="ruleForm.project_id">
          <!-- <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="$t('aside.code')" 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="$t('aside.formBtn')" 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: '',
      },

      phoneCode: '',
      codeButtonDisabled: false,
      timer: null,
      disabledTime: 60,
      projectListMap: [
        { label: this.$t('aside.project1'), value: '1012' },
        { label: this.$t('aside.project5'), value: '1006' },
        { label: this.$t('aside.project6'), value: '1005' },
        { label: '家庭教育硕士MS', value: '1021' },
        { label: this.$t('aside.project3'), value: '1008' },
        // { label: '餐饮管理方向MBA', value: '1015' },
        // { label: this.$t('aside.project4'), value: '1001' },
        // { label: '工商管理硕士保研项目', value: '1016' },
        // { label: '管理信息系统硕士保研项目', value: '9999' },
        { label: '金融硕士保研项目', value: '1018' },
        { label: '全日制工商管理博士项目', value: '1017' },
        { label: '工程管理硕士保研项目', value: '1020' },
        { label: '工商管理博士项目', value: '1023' },
      ],
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        if (val.path === '/studyAbroad') {
          this.ruleForm.project_id = '1018'
        } else {
          this.ruleForm.project_id = '1012'
        }
      },
      // 深度观察监听
      immediate: true,
      deep: true,
    },
  },

  mounted() {
    this.ruleForm.channel = window.localStorage.getItem('channel_num') || 19960
  },
  computed: {
    buttonText() {
      return this.codeButtonDisabled ? `${this.disabledTime}s` : this.$t('aside.codeBtn')
    },
    projectList() {
      if (this.$route.path === '/internationalDegree') {
        return this.projectListMap.slice(0, 7)
      } else if (this.$route.path === '/studyAbroad') {
        return this.projectListMap.slice(-4)
      } else {
        return this.projectListMap
      }
    },
  },
  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() {
      const params = { ...this.ruleForm }
      if (params.project_id === '9999') {
        params.project_id = '1016'
      }
      api.submit(params).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 {
  min-width: 290px;
  position: relative;
  z-index: 2;
  .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 {
  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>
