<template>
  <uv-popup ref="popup" mode="bottom" border-radius="40">
    <view class="register-box">
      <view class="title">
        <image :src="$handleImageUrl('/logo.png')" mode=""></image>
        <text class="title-text">Hi，欢迎登录</text>
        <text class="close-text" @click="close()">取消</text>
      </view>
      <view class="register-content">
        <button class="register-btn" type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
        <!-- <view class="register-btn" @click.stop="handleRegister()">注册并登录</view> -->
        <view class="no-register-btn" @click.stop="close()">暂不注册</view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup>
import { ref } from 'vue';
import { userInfo, authorizationRegister, authorizationLogin, userPhone } from "@/api/login.js"
// const isRegister = ref(true);
const mobile = ref(undefined);
const openId = ref('');
const popup = ref();
const open = (id) => {
  openId.value = id;
  popup.value.open()
}
const close = () => {
  popup.value.close()
}
const getPhoneNumber = (e) => {
  uni.showLoading({
    title: "手机号获取中",
  })
  const {
    detail
  } = e || {}
  if (detail.errMsg === "getPhoneNumber:ok") {
    userPhone({
      openId: openId.value,
      ...detail
    }).then(res => {
      const {
        phone
      } = res.data || {}
      console.log('getPhoneNumber = ', phone)
      if (phone) {
        registerAndLogin(phone)
      } else {
        getPhoneNumberError()
      }
    }).catch(err => {
      console.log("err = ", err);
      getPhoneNumberError()
    }).finally(() => {
      uni.hideLoading()
    })
  } else {
    getPhoneNumberError()
  }
}
const getPhoneNumberError = () => {
  uni.hideLoading();
  uni.showToast({
    title: '获取手机号码失败!',
    icon: 'none'
  })
}
const registerAndLogin = (phone) => {
  // const sharerInfo = uni.getStorageSync('sharerInfo')
  let nickname = '小彩团' + phone.slice(-4);;
  authorizationRegister({
    "mobile": phone,
    "openId": openId.value,
    nickname: nickname,
    clientType: 1,
    gender: 0
    // "invitation_code": sharerInfo.invitation_code
  }).then(res => {
    const {
      token
    } = res.data || {};
    getUser(token)
  }).catch(err => {

  }).finally(() => {

  })
}
const getUser = (token) => {
  uni.setStorageSync('apiToken', token);
  userInfo().then(res => {
    uni.setStorageSync("personal", res.data)
    uni.switchTab({
      url: '/pages/tabtar/home'
    })
  })
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.register-box {
  width: 100%;
  // height: 446rpx;
  background: #fff;
  // // position: relative;

  .title {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 50rpx 30rpx;
    background: #f8f8f8;
    box-sizing: border-box;
    // height: 219rpx;
    // 102
    // background: url('/static/login.png') no-repeat left bottom;
    // background-size: auto 219rpx;
    // transform: translateY(-102rpx);
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: -102rpx;

    image {
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
      margin-right: 20rpx;
    }

    .title-text {
      display: inline-block;
      // width: 100%;
      // height: 100%;
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: bold;
      color: #1a1a1a;
      // text-align: center;
    }

    .close-text {
      margin-left: auto;
      font-size: 28rpx;
      color: #808080;
    }
  }

  .register-content {
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 72rpx;
    width: 100%;
    // height: 397rpx;
    // background: linear-gradient(180deg, #ffedec, #ffffff);
    background-color: #fff;
    // border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 100rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .register-btn {
      width: 690rpx;
      height: 90rpx;
      background: #ff7a2f;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 90rpx;
    }

    .no-register-btn {
      width: 690rpx;
      height: 90rpx;
      margin-top: 35rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #1a1a1a;
      line-height: 90rpx;
      padding-bottom: 7rpx;
      border: 1rpx solid #f7f7f7;
    }
  }
}
</style>