<script setup lang="ts">
import Taro from "@tarojs/taro";
import UserModal from "@/components/UserModal.vue";
import { ref } from "vue";
import logoImg from "../../../static/logo.jpg";

const isShow = ref(false);

const val = ref(false);

const getCode = () => {
  if (!val.value)
    return Taro.showToast({
      title: "请先阅读并同意用户协议&隐私政策&积分使用规则",
      icon: "none",
    });
  Taro.showLoading({
    title: "授权中...",
    mask: true,
  });
  Taro.login({
    success: (res) => {
      console.log(res);
      Taro.setStorageSync("wx_code", res.code);
      isShow.value = true;
    },
    complete: () => {
      Taro.hideLoading();
    },
  });
};

const toPage = () => {
  if (!val.value)
    return Taro.showToast({
      title: "请先阅读并同意用户协议&隐私政策&积分使用规则",
      icon: "none",
    });
  Taro.navigateTo({
    url: "/pages/users/bindPhone/index?type=1",
  });
};

const clickText = (type: number, text: string) => {
  console.log("点击了协议", type);
  Taro.navigateTo({
    url: `/pages/users/user_agreement/index?type=${type}&name=${text}`,
  });
};
</script>

<template>
  <view class="wrapper">
    <image src="../../../static/wechat_login.jpg" />
    <view class="logo">
      <image :src="logoImg" />
      <view>捷兑通</view>
    </view>
    <view class="center">
      <nut-button type="primary" @click="getCode">一键微信授权登录</nut-button>
      <nut-button style="margin-top: 15px" @click="toPage"
        >手机号登录</nut-button
      >
    </view>
    <view class="checkbox"
      ><nut-checkbox v-model="val"></nut-checkbox>
      <view class="text">
        阅读并同意
        <view style="color: #fa2c1a" @click.stop="clickText(1, '用户协议')">
          用户协议
        </view>
        &<view style="color: #fa2c1a" @click.stop="clickText(2, '隐私政策')">
          隐私政策 </view
        >&<view
          style="color: #fa2c1a"
          @click.stop="clickText(3, '积分使用规则')"
        >
          积分使用规则
        </view>
      </view>
    </view>
    <UserModal v-model:isShow="isShow" @closeEdit="isShow = false" />
  </view>
</template>

<style lang="scss">
page {
  background: #fff;
}

.wrapper {
  position: relative;

  image {
    width: 100%;
    height: 838px;
  }

  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 35px;
    line-height: 70px;

    image {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  }

  .center {
    position: absolute;
    top: 80%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 100px;
  }
}

.checkbox {
  position: absolute;
  bottom: -15%;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;

  .nut-checkbox__label {
    margin-left: -60px;
  }

  .text {
    display: flex;
  }
}
</style>
