<template>
  <cr-popup
    v-model="show"
    class="cp-login"
    :style="{ height: '60%' }"
    round
    closeable
    position="bottom"
  >
    <img :src="'https://img.lkbang.net/tenant/yxm-logo.5h67.png' | imogr" alt="" class="img" />
    <p class="yxm">羊小咩</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="configTmd.tianmeidaiRreaty.url" class="link"
        >《{{ configTmd.tianmeidaiRreaty.label }}》</a
      >
    </div>
    <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>
  </cr-popup>
</template>

<script>
import localStorage from '@/service/localStorage.service';
import { getTmdToken } from '@/api/tianmeidai.api';
import TMDConfig from '@/customize/tmd-config';
export default {
  name: 'LoginAuthorize',
  data() {
    return {
      show: false,
      checked: false,
      phoneNum: '',
      configTmd: ''
    };
  },
  watch: {
    $route(to) {
      if (to.query[this.configTmd.channelId.lable]) {
        this.handelPopupShow(
          to.query[this.configTmd.channelId.lable] || '',
          to.query[this.configTmd.channelPhone.lable]
        );
      }
    }
  },
  created() {
    const config = new TMDConfig();
    this.configTmd = config;
  },
  mounted() {
    if (this.$route.query[this.configTmd.channelId.lable]) {
      this.handelPopupShow(
        this.$route.query[this.configTmd.channelId.lable],
        this.$route.query[this.configTmd.channelPhone.lable]
      );
    }
  },
  methods: {
    handelLogin() {
      this.show = false;
      this.$router.replace({ name: 'Login', query: { backUrl: location.href } });
    },
    handelPopupShow(id, phone) {
      if (id == this.configTmd.channelId.id && !localStorage.get('vccToken')) {
        this.show = true;
        localStorage.set('vccChannel', this.configTmd.channelId.id);
        // 种 获取天美贷 提供的参数  调取接口获取token
        localStorage.set('vccPhone', phone);
        this.phoneNum = phone;
      }
    },
    async handelNowLogin() {
      if (this.checked) {
        this.show = false;
        const [data] = await getTmdToken(this.phoneNum);
        if (!data.token) {
          // 无 token 跳转到登录页
          this.$router.replace({ name: 'Login', query: { backUrl: location.href } });
          return;
        }
        localStorage.set('vccToken', data.token);
      } else {
        this.$toast('请仔细阅读并同意相关协议');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.img {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto;
  margin-top: 68px;
}
.yxm {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
  text-align: center;
  margin-top: 4px;
}
.checkbox-content {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 28px;
  .link {
    font-size: 12px;
  }
}
.agreement {
  display: inline-block;
  .text {
    font-size: 12px;
    color: @gray-5;
  }
}
.cp-login {
  height: 406px;
}
::v-deep {
  .cr-checkbox__icon {
    display: inline-block;
  }
  .login-now {
    width: 335px;
    margin: 0 auto;
    display: block;
  }
  .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;
    // margin-bottom: 30px;
  }
}
</style>
