<template>
  <view class="login-wrapper">
    <image class="bg" src="./images/bg.png"></image>
    <!-- 头部内容 -->
    <view class="login-header">
      <!-- 卡通形象 -->
      <image class="login-avatar" src="./images/dh.png" mode="widthFix"></image>
      <image
        class="login-title"
        src="./images/dhwq.png"
        mode="widthFix"
      ></image>

      <!-- 描述 -->
      <view class="login-desc">您好，欢迎来到朵花温泉！</view>
    </view>

    <!-- 按钮区域 -->
    <view class="login-btn-area">
      <!-- 同意隐私协议并获取手机号按钮 -->

      <button
        v-if="!isAgree"
        class="login-btn"
        type="primary"
        @click="handleAgreeAndGetPhone"
      >
        微信一键登录
      </button>
      <button
        v-if="isAgree"
        class="login-btn"
        open-type="getPhoneNumber"
        type="primary"
        @getphonenumber="onLogin"
      >
        微信一键登录
      </button>
    </view>

    <!-- 协议勾选 -->
    <view class="login-agreement">
      <CheckBox v-model="isAgree">
        <text class="login-agreement-text">阅读并同意</text>
        <text
          class="login-agreement-link"
          @click.stop="handleAgreeClick('service')"
          >《服务协议》</text
        >
        <text class="login-agreement-text">和</text>
        <text
          class="login-agreement-link"
          @click.stop="handleAgreeClick('privacy')"
          >《隐私协议》</text
        >
      </CheckBox>
    </view>

    <AgreePopup ref="agreePopup" :visible="visible" @close="visible = false" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import CheckBox from "@/components/CheckBox/index.vue";
import AgreePopup from "./components/AgreePopup/index.vue";
import { loginAuth, bindPhone, checkPhone } from "@/manager/LoginManager";
import { goHome } from "@/hooks/useGoHome";

const isAgree = ref(false);
const visible = ref(false);

// 同意隐私协议并获取手机号
const handleAgreeAndGetPhone = () => {
  if (!isAgree.value) {
    uni.showToast({
      title: "请先同意服务协议和隐私协议",
      icon: "none",
    });
    return;
  }
};

const onLogin = (e) => {
  const { code } = e.detail;
  console.error("onLogin code", code);

  loginAuth()
    .then(async () => {
      // 检测是否绑定手机号，已绑定则直接跳转首页，未绑定则获取手机号并绑定
      const res = await checkPhone();

      if (res.data) {
        return goHome();
      }

      const { data } = await bindPhone({
        wechatPhoneCode: code,
        clientId: "2",
      });

      if (data) {
        goHome();
      }
    })
    .catch((err) => {
      console.error("登录失败", err);
    });
};

// 处理同意协议点击事件
const handleAgreeClick = (type) => {
  visible.value = true;
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>