<template>
  <view class="login-wrapper bg-liner">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="goBack">
      <uni-icons fontFamily="znicons" size="24" color="#333">
        {{ zniconsMap["zn-nav-arrow-left"] }}
      </uni-icons>
    </view>

    <!-- 头部内容 -->
    <view class="login-header">
      <!-- 卡通形象 -->
      <image class="w-full h-full" :src="logo" mode="widthFix" />
    </view>

    <!-- 协议勾选 -->
    <view class="login-agreement flex flex-items-center">
      <CheckBox v-model="isAgree">
        <text class="font-size-12 color-525866">我已阅读并同意</text>
        <text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</text>
        <text class="font-size-12 color-525866">和</text>
        <text class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</text>
        <text class="font-size-12 color-525866">，\n</text>
        <text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
      </CheckBox>
    </view>

    <!-- 按钮区域 -->
    <view class="login-btn-area">
      <!-- 同意隐私协议并获取手机号按钮 -->
      <button v-if="needWxAuthLogin" class="login-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
        手机号快捷登录
      </button>
      <button v-else class="login-btn" type="primary" @click="handleAgreeAndGetPhone">
        手机号快捷登录
      </button>
    </view>

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

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import {
  getServiceAgreement,
  getPrivacyAgreement,
} from "@/request/api/LoginApi";
import { onLogin, goBack, refreshToken } from "@/hooks/useGoLogin";
import CheckBox from "@/components/CheckBox/index.vue";
import AgreePopup from "./components/AgreePopup/index.vue";
import { zniconsMap } from "@/static/fonts/znicons";
import { getCurrentConfig } from "@/constant/base";

// 是否需要微信手机号授权登录
const needWxAuthLogin = ref(false);
const isAgree = ref(false);
const visible = ref(false);
const serviceAgreement = ref("");
const privacyAgreement = ref("");
// 协议类型
const AgreeType = ref("service");
const logo = computed(() => getCurrentConfig().logo);

// 同意隐私协议并获取手机号
const handleAgreeAndGetPhone = () => {
  // 如果需要微信登录，直接返回
  if (needWxAuthLogin.value) {
    return;
  }

  if (!isAgree.value) {
    uni.showToast({
      title: "请先同意服务协议和隐私协议",
      icon: "none",
    });
    return;
  }

  refreshToken().then(() => loginSuccess());
};

/// 获取授权后绑定手机号登录
const getPhoneNumber = (e) => {
  if (!isAgree.value) {
    uni.showToast({
      title: "请先同意服务协议和隐私协议",
      icon: "none",
    });
    return;
  }
  onLogin(e).then(() => loginSuccess())
    .catch(() => {
      uni.showToast({
        title: "获取登录手机号失败",
        icon: "none",
      });
     });
};

/// 登录成功返回上一页
const loginSuccess = () => {
  uni.showToast({
    title: "登录成功",
    icon: "success",
  });
  setTimeout(() => {
    goBack();
  }, 500);
};

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

// 计算协议类型
const computedAgreement = computed(() => {
  if (AgreeType.value === "service") {
    return serviceAgreement.value;
  } else {
    return privacyAgreement.value;
  }
});

// 获取服务协议数据
const getServiceAgreementData = async () => {
  const { data } = await getServiceAgreement();
  serviceAgreement.value = data;
};
getServiceAgreementData();

// 获取隐私协议数据
const getPrivacyAgreementData = async () => {
  const { data } = await getPrivacyAgreement();
  privacyAgreement.value = data;
};
getPrivacyAgreementData();

// 页面显示时刷新token
onShow(async () => {
  const res = await refreshToken();
  needWxAuthLogin.value = res;
});


</script>

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

@font-face {
  font-family: znicons;
  src: url("@/static/fonts/znicons.ttf");
}
</style>
