<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 :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="~@/assets/images/wx_code.jpg" />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import cAction from '@action'
import { sendCode, checkCode } 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: 1005
      }
    }
  },
  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: window.localStorage.getItem('channel_num') || 19960,
        project_id: this.formInfo.projectId,
        name: this.formInfo.name,
        phone: this.formInfo.phone
      }
      return new Promise((resolve, reject) => {
        cAction.News.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 => {
          console.log(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
      $('#checkedCode').html(count + '秒后重发')
      const timer = setInterval(() => {
        count--
        if (count < 1) {
          clearInterval(timer)
          this.isBtnDisabled = false
          $('#checkedCode').html('获取验证码')
        } else {
          $('#checkedCode').html(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(~@/assets/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(~@/assets/images/icon_enroll_active.png);
    }
    li.wx {
      background-image: url(~@/assets/images/icon_wx.png);
    }
    li.wx.active {
      background-image: url(~@/assets/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('~@/assets/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;
        // /deep/ .el-input__inner{}
      }
      .sendcode {
        display: flex;
        justify-content: space-between;
      }
    }
    .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, 0.9);
}
.sendcode .el-button {
  width: 94px;
  margin-right: 2px;
  padding: 12px 0;
  text-align: center;
}
</style>
