<template>
  <div id="login">
    <img class="bg" src="@/assets/login_bg.png" alt="">
    <div class="box">
      <p class="login_title">绑定手机号</p>
      <div class="item">
        <p class="title">手机号</p>
        <div class="flex">
          <input class="code phone" type="tel" maxlength="11" v-model="phone" placeholder="请输入您的手机号">
          <span class="getcode" @click="getCode">{{codeText}}</span>
        </div>
      </div>
      <div class="item">
        <p class="title">验证码</p>
        <input class="code" type="text" v-model="code" placeholder="请输入验证码">
      </div>
      <button class="submit" @click="submitOperator">立即绑定</button>
    </div>
  </div>
</template>
<script>
var codeInterval;
export default {
  name: 'LoginPublic',
  data () {
    return {
      code: '',
      phone: '',

      codeText: '获取验证码',//获取验证码按钮文字
      appId: '',
      unionId: '',
      openId: '',
      prefectId: '',
      publicName: '',//SXYX绍兴研学 XST学事通
    }
  },
  mounted () {
    let publicName = this.$route.query.publicName || sessionStorage.getItem('publicName');
    if (publicName == 'SXYX') {
      this.appId = 'wx1305e88d2bc74073'
    } else if (publicName == 'XST') {
      this.appId = 'wx1c630c8773c482f1'
    } else if (publicName == 'KQ') {
      this.appId = 'wx1305e88d2bc74073'
    }
    this.openId = sessionStorage.getItem('openId' + publicName);
    this.unionId = sessionStorage.getItem('unionId');
    if (process.env.NODE_ENV === "production"&&this.common.isWeiXin()) {
      if (!this.openId) {
        this.$router.push({ name: 'Authorize' + publicName })
      }
    }

  },
  methods: {
    getCode () {
      if (this.codeText != '获取验证码') return;
      if (!this.phone) {
        this.$toast('请输入手机号')
        return;
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return;
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.post(`${this.proxyUrl}/prod/api/wx/${this.appId}/getMsg?phone=${this.phone}`).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          let i = 60;
          codeInterval = setInterval(() => {
            if (i == 0) {
              this.codeText = `获取验证码`;
              clearInterval(codeInterval);
              return;
            }
            this.codeText = `重试（${i}）`;
            i--
          }, 1000)
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    submitOperator () {
      if (!this.phone) {
        this.$toast('请输入手机号')
        return;
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return;
      }
      if (!this.code) {
        this.$toast('请输入验证码')
        return;
      }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.post(`${this.proxyUrl}/prod/api/wx/${this.appId}/checkPhoneAndCode`, {
        phone: this.phone,
        code: this.code,
        unionId: this.unionId,
        openId: this.openId
      }).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          this.getUserInfo()
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    checkPhone (phone) {
      if ((/^1[3456789]\d{9}$/.test(phone))) {
        return true
      } else {
        return false
      }
    },
    complete () {
      this.getUserInfo()
    },
    // 获取用户信息
    getUserInfo () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.get(`${this.proxyUrl}/prod/api/wx/${this.appId}/getUserInfo?unionId=${this.unionId}`).then((res) => {
        this.$toast.clear()
        if (res.data.code == 200) {
          sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
          let prePage = sessionStorage.getItem('prePage');
          let prePageQuery = sessionStorage.getItem('prePageQuery');
          if (prePage) {
            this.$router.push({ name: prePage, query: JSON.parse(prePageQuery) })
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
  },
  destroyed () {
    clearInterval(codeInterval);
  }
}
</script>
<style lang="scss" scoped>
#login {
  .bg {
    width: 100%;
  }
  .login_title {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    color: #000;
    padding-bottom: 40px;
  }
  .box {
    width: 702px;
    height: 540px;
    background: linear-gradient(
      180deg,
      rgba(251, 251, 251, 0.99) 0%,
      #ffffff 100%
    );
    box-shadow: 0px 4px 12px 0px rgba(87, 214, 255, 0.2);
    border-radius: 20px;
    position: absolute;
    top: 240px;
    left: 24px;
    box-sizing: border-box;
    padding: 40px;
    .item {
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 30px;
    }
    .title {
      font-size: 34px;
      font-weight: bold;
      margin-bottom: 28px;
    }
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    .code {
      border: 0;
      background: transparent;
      font-size: 28px;
      margin-bottom: 32px;
      width: 100%;
    }
    .phone {
      width: 50%;
      margin: 0;
    }
    .getcode {
      color: #5789ff;
      font-size: 28px;
      padding: 10px;
    }
    .submit {
      width: 622px;
      height: 88px;
      background: linear-gradient(137deg, #83b2ff 0%, #3c80ef 100%);
      box-shadow: 0px 4px 8px 0px rgba(87, 169, 255, 0.5);
      border-radius: 44px;
      border: 0;
      font-size: 34px;
      color: #ffffff;
      margin: 0 auto;
      display: block;
    }
  }
}
.prefect_pop {
  background: transparent;
}
</style>