<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { userLoginApi, getUserPhoneApi } from "@/services/home";
import { useMemberStore } from "@/stores/";
import type { LoginParams, GetPhoneParams } from "@/types/home";
import { login } from "@/hooks/useIsLogin";
const useMember = useMemberStore();
const popup = ref<any>();

const userInfoMsg = reactive<LoginParams>({
  code: "",
});

onMounted(() => {
  console.log("登录");
});
//获取手机号
const getPhoneNumber = (e: any) => {
  console.log(e);
  //获取到动态令牌后将动态令牌传输到后台方法
  //同时需要将获取到的openId传输给后台
  const params = {
    openId: useMember.userInfo.openId,
    code: e.detail.code,
  };
  getUserPhone(params);
};
const getUserPhone = async (val: GetPhoneParams) => {
  const res = await getUserPhoneApi(val);

  useMember.userInfo.phone = res.data;

  login().then((res) => {
    //这时可以查询是否授权

    if (useMember.userInfo.isAuth == "0") {
      uni.showToast({
        title: "登录成功，手机未授权",
        icon: "none",
      });
    }
  });
  close();
  //获取到手机号后
  //将缓存里的手机号替换为最新的
};

//拿到code 向后台请求openId   session_key

const open = () => {
  login().then((res: any) => {
    userInfoMsg.code = res.code;
  });
  popup.value.open("bottom");
};
const close = () => {
  popup.value.close();
};

const agree = ref<boolean>(false);
const radioChange = () => {
  agree.value = !agree.value;
};

const stipulate = ref<any>();

const stipulateClose = () => {
  stipulate.value.close();
};

const viewDetail = () => {
  stipulateOpen();
};
const stipulateOpen = () => {
  stipulate.value.open("bottom");
};

defineExpose({
  open,
});
</script>
<template>
  <view>
    <uni-popup ref="popup" :mask-click="false">
      <view class="get_phone_out">
        <view
          style="
            text-align: right;
            width: 100%;
            color: #000000;
            margin-right: 20rpx;
            font-size: 40rpx;
          "
          ><text @click="close">X</text></view
        >

        <view class="welcome">欢迎登录税务风险检测</view>
        <view class="serve">登录后可享受更好的服务</view>
        <button
          :disabled="!agree"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
        >
          点击登录
        </button>
        <view class="clause">
          <label class="radio">
            <radio value="r1" :checked="agree" @click="radioChange" />点击即表示同意
          </label>
          <view class="agreement" @click="viewDetail">《授权协议及条款》</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="stipulate" :mask-click="false">
      <view class="get_phone_out">
        <view
          style="
            text-align: right;
            width: 100%;
            color: #000000;
            margin-right: 20rpx;
            font-size: 40rpx;
          "
          ><text @click="stipulateClose">X</text></view
        >
        <view>
          我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款我是长条款
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<style lang="scss">
.get_phone_out {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;

  .welcome {
    font-size: 40rpx;
    font-weight: 700;
    padding-top: 40rpx;
  }

  .serve {
    font-size: 30rpx;
    font-weight: 100;
    color: #000000;
    padding-top: 20rpx;
  }

  button {
    background: rgb(132, 132, 226);
    color: #ffffff;
    border-radius: 40rpx;
    margin-top: 60rpx;
    padding: 0rpx 60rpx;
  }

  .clause {
    padding-bottom: 100rpx;
    padding-top: 40rpx;
    display: flex;
    .agreement {
      color: blue;
    }
  }
}
</style>
