<template>
  <view class="mask" v-if="show">
    <view class="content shadow">
      <view class="text-black text-bold text-lg margin-bottom-lg">健康码小程序</view>
      <view class="text-df text-gray">为了您的正常使用</view>
      <view class="text-df text-gray margin-bottom-lg">小程序需要获得您的基本公开信息</view>

      <button
        @tap="getuserinfo"
        class="text-purple"
        open-type="getUserInfo"
        plain
        style="border: none;"
      >极速登录</button>
    </view>
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  data() {
    return { show: false };
  },
  computed: {
    ...mapState('user', ['user']),
  },

  watch: {
    // 登录以后 如果没有微信信息
    // 就显示本组件
    user(value) {
      if (value) {
        if (!value.wxInfo || !value.wxInfo.nickname) {
          this.show = true;
        }
      }
    },
  },

  methods: {
    ...mapActions('user', ['updateUserInfo']),

    // 获取用户信息
    getuserinfo() {
      this.show = false;
      uni.getUserInfo({
        provider: 'weixin',
        success: infoRes => {
          const {
            nickName,
            avatarUrl,
            city,
            country,
            gender,
            language,
            province,
          } = infoRes.userInfo;
          const params = {
            nickname: nickName,
            headImgUrl: avatarUrl,
            city,
            country,
            sex: gender,
            language,
            province,
          };
          this.updateUserInfo(params);
        },
      });
    },
  },
};
</script>

<style scoped>
.mask {
  z-index: 9998;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}
.content {
  z-index: 9999;
  position: absolute;
  left: 50upx;
  top: 50%;
  box-sizing: border-box;
  width: 650upx;
  padding: 20px;
  font-size: 14px;
  transform: translate3d(0, -50%, 0);
  background: #fff;
  border-radius: 20upx;
  text-align: center;
}
</style>
