<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 = localStorage.getItem('openId')
    this.unionId = localStorage.getItem('unionId')
  },
  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) {
          localStorage.setItem('userInfo', JSON.stringify(res.data.data))

          if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
            localStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
            this.$store.commit('changeSchool', res.data.data.schoolNames)
            if (!localStorage.getItem('schoolNamesChoose')) {
              localStorage.setItem('schoolNamesChoose', res.data.data.schoolNames[0])
            }
          } else {
            localStorage.setItem('schoolNames', [])
            this.$store.commit('changeSchool', [])
          }
          let prePage = localStorage.getItem('prePage')
          let prePageQuery = localStorage.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>