<template>
  <view class="content">
    <view class="top">
      <image :src="configBox.logo"></image>
      <text>{{configBox.title}}</text>
    </view>
    <view class="edit">
      <view class="ts">
        <view>短信验证码登录</view>
      </view>
      <view class="editem">
        <view class="input">
          <input class="uni-input" v-model="phone" placeholder="请输入手机号" />
        </view>
        <view class="input yanzheng">
          <view class="yanzhengma">
            <input class="uni-input" v-model="code" placeholder="请输入验证码" />
          </view>
          <button class="code" type="none" @click="handleCode" v-model="codeInfo"
            :disabled="disabled">{{second<60 ? second+'S后重发':'获取验证码'}}
          </button>
        </view>
      </view>
      <view class="btnlogin" @click="handleTelLogin">登录</view>
    </view>
    <view class="btnGroup">
      <view class="wxbtn" v-if="iswxphone">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="value==1">
          <icon class="iconfont icon-weixin"></icon>
          <text>微信登录</text>
        </button>
        <button v-else @click="handleIsTel">
          <icon class="iconfont icon-weixin"></icon>
          <text>微信登录</text>
        </button>
      </view>
      <view class="xieyi">
        <checkbox-group @change="checkboxChange" class="group">
          <checkbox :value="1" checked="true" style="transform:scale(0.7)" />同意{{configBox.title}}<text
            @click="handlexieyi">《个人信息保护政策》</text>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        phone: "",
        code: "",
        disabled: false,
        second: 60,
        value: 1,
        iswxphone: true,
        infoRes: {}
      }
    },
    computed: {
      ...mapState(["configBox", "appTheme"]),
    },
    onLoad(options) {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      let that = this
      if (options) {
        that.infoRes = options
        console.log("登录信息", options, that.infoRes, this.configBox)
      }

      this.iswxphone = uni.getStorageSync('iswxphone')
    },
    methods: {
      checkboxChange(e) {
        this.value = e.detail.value.length ? e.detail.value[0] : "0"
      },
      // 登录、
      handleTelLogin() {
        let that = this
        if (this.value == 0) {
          that.$tools.msg("请先勾选同意《个人信息保护政策》")
          return
        }
        if (!this.phone) {
          that.$tools.msg("请输入手机号")
          return
        }
        if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
          that.$tools.msg("请输入正确的手机号码")
          return
        }
        if (!that.code) {
          that.$tools.msg("请输入验证码")
          return
        }
        this.$model.getRegister({
          phone: that.phone,
          tenantId: uni.getStorageSync('tenantid'),
          sessionId: uni.getStorageSync('sessionid'),
          name: that.infoRes.name,
          headImg: that.infoRes.headimg,
          code: that.code,
          isvrcode: true,
        }).then(res => {
          if (res.code != 0) {
            that.$tools.msg(res.message)
            return
          }
          uni.setStorageSync('token', res.data.token)
          uni.setStorageSync('iswxphone', res.data.iswxphone)
          uni.setStorageSync('refreshtoken', res.data.refreshtoken)
          uni.setStorageSync('sessionid', res.data.sessionid)
          if (that.infoRes.url == 'active') {
            uni.reLaunch({
              url: "/pages/index/active?code=" + that.infoRes.code
            })
          } else {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          }
        }).catch(err => {})
      },
      // 获取验证码
      handleCode() {
        let that = this
        if (!that.phone) {
          that.$tools.msg("请输入手机号")
          return
        }
        if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
          that.$tools.msg("请输入正确的手机号码")
          return
        }
        // 
        that.$model.getSendCode({
          phone: that.phone
        }).then(res => {
          console.log(res)
          if (res.code != 0) {
            that.$tools.msg(res.message)
            return
          }
          that.disabled = true
          let interval = setInterval(() => {
            --that.second
          }, 1000)
          setTimeout(() => {
            clearInterval(interval)
            that.disabled = false
            that.second = 60
          }, 60000)
        }).catch(err => {})
      },
      handleIsTel() {
        if (this.value == 0) {
          this.$tools.msg("请先勾选同意《个人信息保护政策》")
          return
        }
      },
      // 授权
      getPhoneNumber(res) {
        const that = this
        if (res.detail.errMsg == 'getPhoneNumber:ok') {
          console.log("res", res)
          this.$model.getregister({
            tenantId: uni.getStorageSync('tenantid'),
            sessionId: uni.getStorageSync('sessionid'),
            encryptedData: res.detail.encryptedData,
            iv: res.detail.iv,
            name: that.infoRes.name,
            headImg: that.infoRes.headimg,
            fansid: uni.getStorageSync('fansid')
          }).then(res => {
            if (res.code != 0) return
            that.value = 1
            uni.setStorageSync('token', res.data.token)
            uni.setStorageSync('iswxphone', res.data.iswxphone)
            uni.setStorageSync('refreshtoken', res.data.refreshtoken)
            uni.setStorageSync('sessionid', res.data.sessionid)
            if (that.infoRes.url == 'active') {
              uni.reLaunch({
                url: "/pages/index/active?code=" + that.infoRes.code
              })
            } else {
              uni.reLaunch({
                url: "/pages/index/index"
              })
            }
          })
        }
      },
      // 
      handlexieyi() {
        uni.navigateTo({
          url: "/pageTwo/login/detail?id=" + this.configBox.privacyid
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 0;
    height: 100vh;
    background-color: #fff;
  }

  .top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 80px 0 0;

    image {
      width: 70px;
      height: 70px;
      margin: auto;
      margin-bottom: 15px;
      border-radius: 50%;
    }

    text {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  .edit {
    width: 75%;
    height: auto;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin: 40px auto 15px;

    .ts {
      text-align: left;
      margin-bottom: 10px;
      color: #999;
    }

    .editem {
      position: relative;
      display: flex;
      align-items: center;
      font-size: 28upx;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .input {
      width: 100%;
      border: #dfdfdf 1px solid;
      padding: 0 10px;
      height: 35px;
      line-height: 35px;
      margin-bottom: 15px;
      display: flex;
      border-radius: 10px;
      position: relative;

      input {
        height: 35px;
        line-height: 35px;
        position: absolute;
        left: 10px;
        right: 120px;
        z-index: 88;
      }
    }

    .btnlogin {
      width: 100%;
      margin: 20px 0;
      height: 38px;
      line-height: 38px;
      background: $btncolor;
      font-weight: 700;
      border-radius: 10px;
      text-align: center;
      color: #fff !important;
    }

    .code {
      width: 110px;
      background: #dfdfdf;
      font-size: 12px;
      margin: 0;
      border-radius: 10px;
      text-align: center;
      position: absolute;
      right: 2.5px;
      top: 2.5px;
      z-index: 99;
    }
  }

  .btnGroup {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: inherit;
    line-height: inherit;
    position: absolute;
    bottom: 80rpx;

    .wxbtn {
      width: 100%;

      icon {
        font-size: 25px;
        color: #28c445;
      }

      text {
        display: block;
        width: 100%;
        margin-top: 5px;
        font-size: 12px;
        color: #666;
        text-align: center;
      }

      button {
        line-height: initial;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        justify-content: center;
      }

      button::after {
        display: none;
      }
    }

    .xieyi {
      font-size: 14px;
      margin-top: 20px;
      color: #333;

      text {
        border-bottom: 1px solid #333;
      }
    }
  }
</style>
