<template>
  <div class="container">
    <div class="loginContent">
      <div class="login-title" />
      <img :src="'https://img.lkbang.net/tenant/yxm-logo.5h67.png' | imogr" alt="" class="img" />
      <p class="yxm">羊小咩</p>
      <p class="life">美好生活更从容</p>
      <div class="login">
        <cr-button
          shape="circle"
          block
          type="primary"
          native-type="submit"
          class="login-form-submit login-now"
          @click="handelNowLogin"
        >
          立即授权
        </cr-button>
        <p class="login-more" @click="handelLogin">更多登录方式</p>
        <div class="checkbox-content">
          <cr-checkbox v-model="checked" icon-size="14px" shape="round" class="agreement">
            <span class="text">我已阅读并同意 </span>
          </cr-checkbox>
          <a :href="$config.privacyRreaty.url" class="link"
            >《{{ $config.privacyRreaty.label }}》</a
          >
          <a :href="$config.registerRreaty.url" class="link"
            >《{{ $config.registerRreaty.label }}》</a
          >
          <a :href="$config.tianmeidaiRreaty && $config.tianmeidaiRreaty.url" class="link"
            >《{{ $config.tianmeidaiRreaty && $config.tianmeidaiRreaty.label }}》</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTmdToken } from '@/api/tianmeidai.api';
import localStorage from '@/service/localStorage.service';
export default {
  name: 'LoginMiddle',
  data() {
    return {
      checked: false
    };
  },
  methods: {
    async handelNowLogin() {
      if (this.checked) {
        // 调取天美贷接口获取token
        const phone = localStorage.get('vccPhone');
        const [data] = await getTmdToken(phone);
        if (!data.token) {
          // 无 token 跳转到登录页
          this.$router.replace({ name: 'Login', query: { backUrl: location.href } });
          return;
        }
        localStorage.set('vccToken', data.token);

        // 授权成功后 页面 跳转
        if (this.$route.query.backUrl) {
          console.log(this.$route.query.backUrl, 'this.$route.query.backUrl');
          location.replace(this.$route.query.backUrl);
          return;
        }
        this.$router.go(-1);
      } else {
        this.$toast('请仔细阅读并同意相关协议');
      }
    },
    handelLogin() {
      this.$router.replace({ name: 'Login', query: { backUrl: this.$route.query.backUrl || '' } });
    }
  }
};
</script>

<style lang="less" scoped>
.img {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto;
  margin-top: 50px;
}
.yxm {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
  text-align: center;
  margin-top: 4px;
}
.life {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  letter-spacing: 4px;
  text-align: center;
  margin-top: 3px;
}
.agreement {
  display: inline-block;
  .text {
    font-size: 12px;
    color: @gray-5;
  }
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background: @white;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
  .loginContent {
    width: 375px;
    height: auto;
  }
}
.login-title {
  .text-size(24);
  color: @black;
  // font-weight: @font-weight-bold;
  padding: 40px 30px;
}
.checkbox-content {
  margin-top: 49px;
  text-align: center;
  .link {
    font-size: 12px;
  }
}
.login {
  position: absolute;
  bottom: 30px;
  width: 375px;
  margin: 0 auto;
}
::v-deep {
  .cr-checkbox__icon {
    display: inline-block;
  }
  .login-now {
    width: 335px;
    margin: 0 auto;
    display: block;
    margin-top: 100px;
  }
  .login-more {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    margin-top: 20px;
  }
}
</style>
