<template>
  <view class="content">
    <view class="bg"></view>
    <view class="bg2"></view>
    <view class="tips">
      <text class="title">登录</text>
      <text class="subtitle">欢迎再次回来~</text>
    </view>
    <view class="form-box">
      <image src="@/assets/logo/guohui.png"/>
      <view class="btn margin-top-lg" @click="login">一键登录</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import api from "@/request";
import {CLIENT_TYPE, MINI_PROGRAM_USER_CONFIG} from "@/config";
import {useUserStore} from "@/store/userStore";

const {saveTokenInfo} = useUserStore()
const login = () => {
  Taro.login({
    success: (res) => {
      if (res.code) {
        api.post<TokenInfo>("/login", {
          clientType: CLIENT_TYPE,
          loginParams: {
            code: res.code
          }
        }, {loading: true}).then(async ({data: tokenInfo}) => {
          //保存用户信息
          saveTokenInfo(tokenInfo!)
          //根据用户身份跳转对应主页
          await Taro.switchTab({
            url: MINI_PROGRAM_USER_CONFIG[tokenInfo!.extData.identity.value].toIndex
          })
        }).catch(err => {
          //没有账号
          if (err.code === 402) {
            //跳转注册页注册
            Taro.navigateTo({
              url: "/pages/register/register",
            });
          }
        })
      }
    },
  });
};
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;

  .tips {
    padding-top: 200rpx;
    padding-left: 80rpx;
    display: flex;
    flex-direction: column;

    .title {
      line-height: 70rpx;
      font-weight: bold;
      font-size: 50rpx;
    }

    .subtitle {
      line-height: 70rpx;
      font-size: 35rpx;
      font-weight: bold;
      color: #b0b0b1;
    }

  }

  .bg {
    position: fixed;
    top: -250rpx;
    right: -250rpx;
    width: 600rpx;
    height: 600rpx;
    border-radius: 100%;
    background-color: #00baef;
    z-index: 2
  }

  .bg2 {
    position: fixed;
    top: -150rpx;
    right: -300rpx;
    width: 600rpx;
    height: 600rpx;
    border-radius: 100%;
    background-color: #ade8f9;
    z-index: 1;
  }

  .form-box {
    padding-top: 180rpx;
    padding-left: 70rpx;
    width: 610rpx;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 200px;
      height: 200px;
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100rpx;
      border-radius: 100rpx;
      color: #FFFFFF;
      background: linear-gradient(to right, #00c6fc, #9adcf1);
    }
  }
}
</style>
