<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>
      <!-- <div class="item">
          <p class="title">学校选择</p>
        <div class="flex">
          <input class="code phone" type="text" placeholder="请选择学校" readonly v-model="school">
          <button type="info" class="btn" @click="chooseSchool">选择学校</button>
        </div>
      </div> -->
      <button class="submit" @click="submitOperator">立即绑定</button>
    </div>
    <van-popup v-model="chooseSchoolisShow" round get-container="body" :safe-area-inset-bottom="true">
      <div v-if="chooseSchoolisShow">
        <chooseSchool v-model="chooseSchoolisShow" @schoolData='schoolData'></chooseSchool>
      </div>
    </van-popup>
  </div>
</template>
<script>
import chooseSchool from '@/views/Home/component/chooseSchool'
var codeInterval;
export default {
  name: 'LoginPublic',
  data () {
    return {
      code: '',
      phone: '',

      codeText: '获取验证码',//获取验证码按钮文字
      appId: 'wx1305e88d2bc74073',
      unionId: '',
      openId: '',
      prefectId: '',

      searchSchool: '',
      school: '',
      schoolId: '',
      chooseSchoolisShow: false
    }
  },
  mounted () {
    this.openId = sessionStorage.getItem('openId');
    this.unionId = sessionStorage.getItem('unionId');
    if (process.env.NODE_ENV === "production"&&this.common.isWeiXin()) {
      if (!this.openId) {
        this.$router.push({ name: 'Authorize' })
      }
    }

  },
  methods: {
    getCode () {
      if (this.codeText != '获取验证码') return;
      if (!this.phone) {
        this.$toast('请输入手机号')
        return;
      }
      if (!this.checkPhone(this.phone)) {
        this.$toast('请输入正确的手机号')
        return;
      }
      // if (!this.school) {
      //   this.$toast('请选择关注学校')
      //   return;
      // }
      this.$toast.loading({
        message: '加载中',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.post(`${this.baseUrl}/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.baseUrl}/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()
    },
    // 获取链接参数
    getQueryVariable (variable) {
      // 取地址栏参数
      var query = window.location.search.substr(1);
      if (!query && window.location.hash.indexOf('?') > -1) {
        query = window.location.hash.split("?")[1];
      }
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return false
    },
    // 获取用户信息
    getUserInfo () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.get(`${this.baseUrl}/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))

          if(res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
            sessionStorage.setItem('schoolNames',JSON.stringify(res.data.data.schoolNames))
            this.$store.commit('changeSchool', res.data.data.schoolNames)
            if(!sessionStorage.getItem('schoolNamesChoose')) {
              sessionStorage.setItem('schoolNamesChoose',res.data.data.schoolNames[0])
            }
          }else {
              sessionStorage.setItem('schoolNames',[])
              this.$store.commit('changeSchool', [])
          }
          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)
        }
      })
    },
     //选择学校
    chooseSchool () {
      this.chooseSchoolisShow = true
    },
    schoolData (val) {
      this.school = val.text;
      this.schoolId = val.id;
    },
  },
  destroyed () {
    clearInterval(codeInterval);
  },
  components: {
    chooseSchool
  }
}
</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;
    height: 650px;
    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;
      .btn {
        width: 240px;
        height: 55px;
        float: right;
        font-size: 28px;
        background: linear-gradient(135deg, #cdf8cf 0%, #8af36f 100%);
        box-shadow: 0px 4px 8px 0px rgba(189, 189, 189, 0.5),
          0px 8px 12px 0px rgba(89, 199, 171, 0.5);
        border-radius: 34px;
        border: transparent;
        color: #333333;
      }
    }
    .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>