<script setup lang="ts">
import Taro from "@tarojs/taro";
import UserModal from "@/components/UserModal.vue";
import { ref } from "vue";
import { getPhone, login } from "@/api/user";
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 userInfo = ref({
  phone: "",
});

const getPhoneNumber = async (e: any) => {
  if (!val.value) {
    Taro.showToast({
      title: "请先阅读并同意用户协议&隐私政策&积分使用规则",
      icon: "none",
    });
  } else {
    Taro.showLoading({
      title: "授权手机号中",
      mask: true,
    });
    const { code } = e.detail;
    const res = await getPhone({
      code: code,
    });
    userInfo.value.phone = res.data.phone;
    if (!res.data.phone)
      return Taro.showToast({
        title: "手机号获取失败",
        icon: "none",
      });
    Taro.login({
      success: async (res) => {
        Taro.setStorageSync("wx_code", res.code);
        const ress = await login({
          Code: Taro.getStorageSync("wx_code"),
          Phone: userInfo.value.phone,
          Referee: Taro.getStorageSync("bind_id") || "",
        });
        Taro.showToast({
          title: ress.msg,
          icon: "success",
          duration: 2000,
        });
        Taro.setStorageSync("token", ress.data.token);
        setTimeout(() => {
          Taro.removeStorageSync("wx_code");
          Taro.removeStorageSync("bind_id");
          Taro.switchTab({
            url: "/pages/user/index",
          });
        }, 2000);
      },
      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) => {
  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"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        >手机号一键登录</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>
