<template>
  <div class="right_bar">
    <ul class="tab_btns">
      <li
        :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
        @mouseover="handleMsOver('enroll')"
        @mouseout="handleMsOut"
      >
        <p>报名咨询</p>
      </li>
      <li
        :class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
        @mouseover="handleMsOver('wx')"
        @mouseout="handleMsOut"
      >
        <p>微信公众号</p>
      </li>
    </ul>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <div v-show="tabBtnActive" class="tab_cont" @mouseover="handleMsOver('')" @mouseout="handleMsOut">
        <div class="enroll_cont" v-show="tabBtnTarget === 'enroll'">
          <h5>报名咨询</h5>
          <p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
          <p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
          <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p>
          <p class="sendcode">
            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">获取验证码</el-button>
          </p>
          <p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
        </div>
        <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
          <h5>扫描关注微信公众号</h5>
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/wx_code2.jpg" />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { sendCode, checkCode, postNes } from '@/api/my'
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: '本科 / 硕士课程',
      sendCode: '',
      isBtnDisabled: false,
      formInfo: {
        name: '',
        phone: '',
        projectId: 1010
      }
    }
  },
  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: 19960,
        project_id: 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 + '秒后重发'
      const timer = setInterval(() => {
        count--
        if (count < 1) {
          clearInterval(timer)
          this.isBtnDisabled = false
          document.querySelector('#checkedCode').innerHTML  = '获取验证码'
        } else {
          document.querySelector('#checkedCode').innerHTML = count + '秒后重发'
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.right_bar {
  position: fixed;
  top: 50%;
  right: 10px;
  z-index: 9999;
  transform:translateY(-50%);
  .tab_btns {
    width: 72px;
    height: 136px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    li {
      padding: 40px 0 10px;
      color: #999;
      background-position: center 10px;
      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;
      padding-top: 48px;
      background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_enroll.png);
      position: relative;
    }
    li.enroll:after {
      content: '';
      width: 144px;
      height: 1px;
      background: #b8bcbf;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) scale(0.5);
    }
    li.enroll.active {
      background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_enroll_active.png);
    }
    li.wx {
      background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_wx.png);
    }
    li.wx.active {
      background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/icon_wx_active.png);
    }
    li > p {
      font-size: 12px;
      line-height: 14px;
      text-align: center;
      font-family: PingFangSC-Regular, PingFang SC;
      transform: scale(0.9);
      cursor: default;
    }
  }
  .tab_cont {
    position: absolute;
    left: -310px;
    top: -120px;
    width: 310px;
    height: 374px;
    background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/application/images/index_right_fixed_bg.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;
        ::v-deep.el-input__inner {
          border: 1px solid #ccc;
          line-height: 44px;
          height: 44px;
        }
        ::v-deep.el-button {
          background-color: #ff8e1a;
          border:#ff8e1a 1px solid;
          color:rgba(255,255,255,.9);
        }
      }
      .sendcode {
        display: flex;
        justify-content: space-between;
        ::v-deep.el-input {
          width: 170px;
        }
        ::v-deep.el-button {
          width: 94px;
          margin-right: 2px;
          padding: 12px 0;
          text-align: 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>