<template>
  <nut-overlay :visible="visible" :close-on-click-overlay="false">
    <view class="text">
      <view>授权提醒</view>
      <view style="margin-top: 10px"
        >请授权头像信息，以便为您提供更好的服务！
      </view>
      <view class="bom">
        <view class="btn b" @click="onCancel">随便逛逛</view>
        <view class="btn a" @tap="onOk">去授权</view>
      </view>
    </view>
  </nut-overlay>
</template>

<script setup lang="ts">
// import { computed, ref } from "vue";
import Taro from "@tarojs/taro";
import { login } from "@/api/user";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible", "ok"]);

const onCancel = () => {
  emit("update:visible", false);
};

const onOk = () => {
  Taro.showLoading({
    title: "正在授权中",
    mask: true,
  });
  Taro.getUserProfile({
    desc: "完善用户资料",
    success: async (user) => {
      Taro.login({
        success: async ({ code }) => {
          try {
            const { data }: any = await login({
              code: code,
              nickName: user.userInfo.nickName,
              avatarUrl: user.userInfo.avatarUrl,
            });
            Taro.setStorageSync("token", data.token);
            emit("ok", false);
          } catch (error) {
            Taro.showToast({
              title: error.message,
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.log(err);
        },
        complete: () => {
          Taro.hideLoading();
        },
      });
    },
    fail: (err) => {
      console.log(err);
    },
    complete: () => {
      Taro.hideLoading();
    },
  });
};
</script>

<style lang="scss">
.text {
  text-align: center;
  background-color: #fff;
  width: 500px;
  padding: 20px;
  margin: auto;
  transform: translateY(150%);
  border-radius: 10px;

  .bom {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 20px;

    .btn {
      width: 150px;
      padding: 10px;
      border-radius: 15px;
      color: #fff;
      margin-bottom: 10px;
    }

    .a {
      background-color: #ff5000;
    }

    .b {
      background-color: rgba(255, 80, 0, 0.5);
    }
  }
}
</style>
