<template>
  <view class='content'>
    <view class='title'>
      欢迎登录VIP顾客中心
    </view>

    <image class='logo' :src='assetsUrl("ic_logo.jpeg")' />

    <button class='login-btn' @tap='wechatLogin'>
      微信登录
    </button>
    <view class='hint'>
      <image @click.stop='bindCheck'
             :src='isAgreePrivacy?("/static/images/ic_checked_green.png"):("/static/images/ic_checked_gray.png")' />

      <text @click.stop='bindCheck'>请先阅读并同意
        <text class='link' @click.stop='openPrivacy'>
          《小程序隐私保护协议》
        </text>
        并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
      </text>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { useUserStore } from '@/store';
import { assetsUrl } from '@/utils/assets';
import { showToast } from '@/utils';

const userStore = useUserStore();
const isAgreePrivacy = ref(false);

function wechatLogin() {
  if(!isAgreePrivacy.value) {
    showToast('请先阅读并同意小程序隐私保护协议');
    return;
  }

  uni.showLoading();
  userStore.login().then(() => {
    uni.hideLoading();
    uni.reLaunch({ url: '/pages/home/index' });
  });
}

const bindCheck = () => {
  isAgreePrivacy.value = !isAgreePrivacy.value;
};

const openPrivacy = () => {
  wx.openPrivacyContract({
    success: () => {
    }, // 打开成功
    fail: () => {
    }, // 打开失败
    complete: () => {
    }
  });
};

</script>

<style lang='scss' scoped>
.content {
  background: #FFFFFF;
  height: 100vh;
}

.title {
  font-size: 60rpx;
  text-align: left;
  font-weight: 500;
  margin: 50rpx;
}

.logo {
  width: 300rpx;
  height: 300rpx;
  align-self: center;
  margin: 30rpx;
  border-radius: 50%;
}

.login-btn {
  padding: 12rpx 0;
  font-size: 30rpx;
  color: #FFFFFF;
  background-color: #1cbf1e;
  border: none;
  border-radius: 45rpx;
  margin: 100rpx 45rpx 0 45rpx;

  &::after {
    border: none;
  }
}

.hint {
  display: inline-block;
  padding: 20rpx 50rpx;
  font-size: 25rpx;
  color: $u-tips-color;
  position: absolute;
  align-items: center;
  bottom: 50rpx;

  .link {
    color: $u-warning;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
    margin-bottom: -5rpx;
  }
}
</style>
