<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>
