<template>
  <div class="right_bar">
    <ul class="tab_btns">
      <li
        :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
        @mouseenter="handleMsOver('enroll')"
        @mouseleave="handleMsOut"
      >
        <p>{{ $t('aside.apply') }}</p>
      </li>
      <li
        :class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
        @mouseenter="handleMsOver('wx')"
        @mouseleave="handleMsOut"
      >
        <p>{{ $t('aside.follow') }}</p>
      </li>
    </ul>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <div
        id="show-enroll"
        v-show="tabBtnActive"
        class="tab_cont"
        @mouseenter="handleMsOver('')"
        @mouseleave="handleMsOut"
      >
        <div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
          <h5>{{ $t('aside.apply') }}</h5>
          <div class="p">
            <el-input v-model="formInfo.name" :placeholder="$t('aside.name')"></el-input>
          </div>
          <div class="p">
            <el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')"></el-input>
          </div>
          <div class="p">
            <select name="" id="" v-model="formInfo.projectId">
              <option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
            </select>
            <span class="icon el-icon-arrow-down"></span>
          </div>
          <div class="p sendcode">
            <el-input v-model="sendCode" :placeholder="$t('aside.code')">
              <template #append>
                <el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
                  $t('aside.codeBtn')
                }}</el-button>
              </template>
            </el-input>
          </div>
          <div class="p">
            <el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button>
          </div>
        </div>
        <div class="wx_cont" v-show="tabBtnTarget === 'wx'" id="show-enroll-wx">
          <h5>{{ $t('aside.pay') }}</h5>
          <img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { sendCode, checkCode, postNes } from '@/api/index'
const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
export default {
  data() {
    return {
      tabBtnActive: false,
      tabBtnTarget: '',
      projectName: this.$t('aside.project2'),
      sendCode: '',
      isBtnDisabled: false,
      formInfo: {
        name: '',
        phone: '',
        projectId: ''
      },
      projectListMap: [
        { label: this.$t('aside.project1'), value: '1012' },
        { label: this.$t('aside.project5'), value: '1006' },
        { label: this.$t('aside.project6'), value: '1005' },
        { label: this.$t('aside.project8'), value: '1021' },
        { label: this.$t('aside.project3'), value: '1008' },
        { label: this.$t('aside.project9'), value: '1015' },
        { label: this.$t('aside.project4'), value: '1001' },
        // { label: '工商管理硕士保研项目', value: '1016' },
        // { label: '管理信息系统硕士保研项目', value: '9999' },
        { label: this.$t('aside.project10'), value: '1018' },
        { label: this.$t('aside.project11'), value: '1017' },
        { label: this.$t('aside.project12'), value: '1020' },
        { label: this.$t('aside.project13'), value: '1023' }
      ]
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        if (val.path === '/studyAbroad') {
          this.formInfo.projectId = '1018'
        } else {
          this.formInfo.projectId = '1012'
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },

  computed: {
    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: {
    handleMsOver(type) {
      this.tabBtnActive = true
      if (type !== '') {
        this.tabBtnTarget = type
      }
    },
    handleMsOut(type) {
      this.tabBtnActive = false
    },
    submitEnroll() {
      let flag = true
      Object.keys(this.formInfo).map(item => {
        if (this.formInfo[item] === '') {
          flag = false
        }
      })
      if (!flag || !this.sendCode) {
        this.$message('请完善信息')
      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
        this.$message('手机号格式错误')
      } else {
        this.checkSendcode()
          .then(res => {
            return this.enrollQuery()
          })
          .then(res => {
            this.$message({
              type: 'success',
              message: '报名成功',
              duration: 5000
            })
          })
          .catch(err => {
            if (err && err.type === 'checkcode') this.$message.error(err.msg)
            else this.$message.error(err.msg || '报名提交失败')
          })
      }
    },
    enrollQuery() {
      const params = {
        channel: localStorage.getItem('channel_num') || 19962,
        project_id: this.formInfo.projectId === '9999' ? '1016' : this.formInfo.projectId,
        name: this.formInfo.name,
        phone: this.formInfo.phone
      }
      return new Promise((resolve, reject) => {
        postNes(params).then(res => {
          if (res && res.status === 200 && res.error === 0) {
            resolve({
              type: 'enroll',
              state: 'success'
            })
          } else {
            reject({
              type: 'enroll',
              state: 'fail',
              msg: res.message || '报名提交失败'
            })
          }
        })
      })
    },
    getSendCode() {
      if (!this.formInfo.phone) {
        this.$message('手机号不能为空')
      } else if (!MOBILE_REG.test(this.formInfo.phone)) {
        this.$message('手机号格式错误')
      } else {
        const param = {
          account: this.formInfo.phone,
          service: 'ezijing.com'
        }
        sendCode(param)
          .then(res => {
            this.btnDisabledTimer()
            if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收')
            else this.$message.error('获取验证码失败，请稍后再试')
          })
          .catch(() => {})
      }
    },
    checkSendcode() {
      const checkCodeParam = {
        account: this.formInfo.phone,
        code: this.sendCode,
        countryCode: 86
      }
      return new Promise((resolve, reject) => {
        checkCode(checkCodeParam).then(res => {
          if (res && res.code === 0) {
            res.type = 'checkcode'
            resolve({
              type: 'checked',
              state: 'success'
            })
          } else {
            reject({
              type: 'checked',
              state: 'fail',
              msg: res.msg || '验证码检测失败'
            })
          }
        })
      })
    },
    btnDisabledTimer() {
      this.isBtnDisabled = true
      let count = 60
      document.querySelector('#checkedCode').innerHTML = count + 's'
      const timer = setInterval(() => {
        count--
        if (count < 1) {
          clearInterval(timer)
          this.isBtnDisabled = false
          document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn')
        } else {
          document.querySelector('#checkedCode').innerHTML = count + 's'
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.right_bar {
  position: fixed;
  top: 50%;
  right: 10px;
  z-index: 2000;
  transform: translateY(-50%);
  .tab_btns {
    width: 100px;
    // height: 136px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    li {
      padding: 70px 0 18px;
      color: #999;
      background-position: center 18px;
      background-repeat: no-repeat;
      background-color: #fff;
      text-align: center;
    }
    li.active {
      background-color: #af1b40;
      color: #fff;
      opacity: 0.9;
      transition: 0.3s;
    }
    li.enroll {
      position: relative;
      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
    }
    li.enroll:after {
      content: '';
      width: 100%;
      height: 1px;
      background: #b8bcbf;
      position: absolute;
      left: 0;
      bottom: 0;
      // transform: translateX(-50%) scale(0.5);
    }
    li.enroll.active {
      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
    }
    li.wx {
      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/5526b83d7526b2742f6eba7151c367db.png);
    }
    li.wx.active {
      background-image: url(https://zws-imgs-pub.ezijing.com/static/public/0831ea27fee535ab0ce9f730f467b2e1.png);
    }
    li > p {
      font-size: 12px;
      line-height: 14px;
      text-align: center;
      // transform: scale(0.9);
      line-height: 100%;
      cursor: default;
    }
  }
  .tab_cont {
    position: absolute;
    left: -310px;
    top: -120px;
    width: 310px;
    height: 374px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/4ae1f00a05a40fd10866ffe153fa82b0.png);
    // display:none;
    h5 {
      font-size: 20px;
      line-height: 60px;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
    }
    .enroll_cont {
      padding: 0 20px;
      .p {
        margin-bottom: 15px;
        position: relative;
        ::v-deep(.el-input__inner) {
          border: 1px solid #ccc;
          line-height: 44px;
          height: 44px;
        }
        ::v-deep(.el-select) {
          width: 100%;
        }
        select {
          width: 100%;
          height: 44px;
          border-radius: 5px;
          font-size: 13px;
          border: 1px solid #ccc;
          line-height: 44px;
          height: 44px;
          outline: none;
          color: #606266;
          padding: 0 12px;
          box-sizing: border-box;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
        }
        .icon {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10px;
          color: #606266;
        }
        ::v-deep(.el-button) {
          background-color: #ff8e1a;
          border: #ff8e1a 1px solid;
          color: rgba(255, 255, 255, 0.9);
        }
      }
      .sendcode {
        display: flex;
        justify-content: space-between;
        ::v-deep(.el-input) {
          width: 170px;
        }
        ::v-deep(.el-button) {
          white-space: break-spaces;
          width: 94px;
          margin-right: 2px;
          padding: 12px 0;
          text-align: center;
          display: flex;
          align-items: center;
          height: 45px;
          justify-content: center;
        }
        ::v-deep(.is-disabled) {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;
        }
      }
    }
    .wx_cont img {
      width: 156px;
      height: 156px;
      display: block;
      margin: 65px auto 0;
    }
  }
}
</style>
<style>
/* .right_bar .enroll_cont .el-input__inner {
  border: 1px solid #ccc;
  line-height: 44px;
  height: 44px;
}
.right_bar .sendcode .el-input {
  width: 170px;
}
.right_bar .el-button{
  background: #ff8e1a;
  border:#ff8e1a 1px solid;
  color:rgba(255,255,255,.9);
}
.sendcode .el-button {
  width: 94px;
  margin-right: 2px;
  padding: 12px 0;
  text-align: center;
} */
</style>
