<script setup>
import { ref } from "vue";
import RegisterLayer from "../../components/RegisterLayer.vue";
import { useUserStore } from "../../stores/user";
import { jump, JumpType } from "../../utils";
import md from "../../md";
import Checkbox from "./toggle-button/index.vue";

const userStore = useUserStore();
const showRegisterLayer = ref(false);
const readProtocol = ref(false);

async function clickBack() {
  uni.navigateBack({
    delta: 1
  })
}

async function onRegisterConfirm(data) {
  console.log('注册确认:', data);

  await Promise.all([
    userStore.loadMemberInfo(),
    userStore.loadUserInfo(),
  ])

  uni.navigateBack({
    delta: 1
  })
}

async function onRegisterCancel() {
  console.log('注册取消');

  await Promise.all([
    userStore.loadMemberInfo(),
    userStore.loadUserInfo(),
  ])

  //用户信息更新，抛出事件
  uni.$emit("updateUserInfo");
  uni.navigateBack({
    delta: 1
  })
}

async function getRealtimePhoneNumber(e) {
  console.log("获取手机号码", e);

  if (e.detail.errMsg !== "getPhoneNumber:ok") {
    uni.showToast({
      title: "请授权使用手机号",
      icon: "none",
    });
    return;
  }

  await userStore.phoneCallback(e.detail, () => {
    showRegisterLayer.value = true;
  });
}

// 页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    animationDuration: 0,
    fail: (err) => {
      console.error("页面跳转失败:", err);
      uni.showToast({
        title: "页面跳转失败",
        icon: "none",
      });
    },
  });
};

const handleHot = (e) => {
  const type = e.currentTarget.dataset.type;
  md.sensorLog(e);

  console.log("handleHot", type);
  md.sensorComponentLogTake({
    xcxComponentClick: "true",
    pageName: "我的页面",
    componentName: "查看协议",
    componentContent: type === "member" ? "会员规则" : "隐私协议"
  })
  if (type === "member") {
    navigateTo("/pages/webview/webview?type=MEMBER_URL");
  } else if (type === "privacy") {
    navigateTo("/pages/webview/webview?type=PRIVACY_URL");
  }
};

function clickRegister(e) {
  uni.showToast({
    title: "请先阅读并同意协议《会员规则》及《隐私协议》",
    icon: "none",
  });
}

function testClick() {
  jump({
    type: JumpType.MINI,
    url: '/subPackages/xmhMainProcess/mine/index',
    extra: {
      appId: 'wx4205ec55b793245e',
    }
  })
}
</script>

<template>
  <div class="page">
    <view>
      <image src="@/assets/images/back-btn.png" class="btn-back" @click="clickBack" />
    </view>
    <div class="content">
      <div class="logo-container">
        <image src="@/assets/logo.png" class="logo" />
        <text>星妈会</text>
      </div>
      <button v-if="readProtocol" class="register-button" open-type="getPhoneNumber"
        @getphonenumber="getRealtimePhoneNumber">
        授权登录
      </button>
      <button v-else class="register-button disabled" @click="clickRegister">
        授权登录
      </button>
      <!--    <button @click="testClick">
            测试
          </button>-->
      <view class="protocol-container">
        <Checkbox v-model="readProtocol" class="checkbox" />
        我已阅读并同意
        <view class="link" :data-log="{
          xcxClick: '注册页面点击',
          pageName: '注册页面',
          buttonName: '会员规则',
        }" @click="handleHot" data-type="member">《会员规则》
        </view>
        及
        <view class="link" :data-log="{
          xcxClick: '注册页面点击',
          pageName: '注册页面',
          buttonName: '隐私协议',
        }" @click="handleHot" data-type="privacy">《隐私协议》
        </view>
      </view>
    </div>
    <RegisterLayer v-model="showRegisterLayer" @confirm="onRegisterConfirm" @cancel="onRegisterCancel" />
  </div>
</template>

<style lang="less" scoped>
.page {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .btn-back {
    position: absolute;
    left: 10rpx;
    top: 100rpx;
    width: 60rpx;
    height: 60rpx;
  }

  .logo-container {
    width: 100vw;
    display: flex;
    align-items: center;
    gap: 12rpx;
    flex-direction: column;
    background-image: linear-gradient(180deg, #F4E2B2 0%, transparent 100%);

    font-size: 34rpx;
    font-weight: bold;
    padding-top: 350rpx;
    padding-bottom: 80rpx;

    .logo {
      width: 176rpx;
      height: 176rpx;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .register-button {
      width: 600rpx;
      height: 94rpx;
      border-radius: 100rpx;
      background-color: #d3a358;
      color: white;
      margin-top: 130rpx;

      &.disabled {
        background-color: #E3CC9E;
      }
    }

    .protocol-container {
      margin: 40rpx 0;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      gap: 4rpx;
      color: #797979;

      .link {
        color: #d3a358;
      }
    }
  }

}
</style>