<template>
  <uni-popup ref="auth-popup" type="dialog" title="提示">
    <view class="auth-info">
      <view class="auth-info__tip">
        为了提供更好的服务，我们需要获取您的头像、昵称等个人信息
      </view>
      <button v-if="canIUseGetUserProfile" class="auth-info__agree" @click="getUserInfo">
        一键授权
      </button>
      <button v-else class="auth-info__agree" open-type="getUserInfo" @getuserinfo="handleUserInfo">
        一键授权
      </button>

      <view
        class="auth-info__cancel"
        @click="
          close();
          $emit('get-user-close');
        "
        >暂不需要</view
      >
    </view>
  </uni-popup>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup";

export default {
  name: "UserInfoPopup",
  components: {
    uniPopup
  },
  data() {
    return {
      canIUseGetUserProfile: false
    };
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          val ? this.open() : this.close();
        });
      }
    }
  },

  created() {
    // this.checkUserInfoState();
    if (wx.canIUse("getUserProfile")) {
      this.canIUseGetUserProfile = true;
    }
  },
  methods: {
    checkUserInfoState() {
      const vm = this;
      wx.getSetting({
        success(res) {
          const state = res.authSetting["scope.userInfo"];
          vm.$emit("auth-state", state);
          if (state) {
            vm.getUserInfo();
          }
        }
      });
    },
    getUserInfo() {
      const vm = this;
      const localUserInfo = uni.getStorageSync("userBaseInfo");
      if (localUserInfo && localUserInfo.nickName) {
        vm.setUserInfo(localUserInfo);
        return;
      }
      if (this.canIUseGetUserProfile) {
        wx.getUserProfile({
          desc: "获取您的头像、昵称等个人信息",
          success(res) {
            vm.setUserInfo(res.userInfo);
            vm.close();
          },
          fail(e) {
            console.error("error", e);
          }
        });
        return;
      }
      wx.getUserInfo({
        success(res) {
          console.log("getUserInfo-success", res);
          vm.setUserInfo(res.userInfo);
          vm.close();
        },
        fail() {
          console.log("getUserInfo-false");
          console.error("获取用户信息失败！");
        }
      });
    },
    open() {
      this.$refs["auth-popup"]?.open();
    },
    close() {
      this.$refs["auth-popup"]?.close();
    },
    handleUserInfo(e) {
      this.setUserInfo(e.detail.userInfo);
      this.close();
    },
    setUserInfo(data) {
      console.log(data.nickName);
      if (data.nickName === "微信用户") {
        data.nickName = "点击登录/注册";
      }
      this.$emit("get-user-info", data);
      uni.setStorageSync("userBaseInfo", data);
    }
  }
};
</script>
<style lang="scss" scoped>
.auth-info {
  width: 622rpx;
  padding: 0 40rpx;
  &__tip {
    color: #666;
    font-size: 28rpx;
    line-height: 40rpx;
    text-align: center;
    padding: 24rpx 0 48rpx;
  }
  &__agree {
    background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
    height: 72rpx;
    border-radius: 36rpx;
    color: #fff;
    font-size: 28rpx;
    line-height: 72rpx;
  }
  &__cancel {
    font-size: 28rpx;
    color: #ec1500;
    line-height: 40rpx;
    text-align: center;
    padding: 24rpx 0 36rpx;
  }
}
</style>
