<template>
  <view>
    <button
      open-type="getUserInfo"
      :style="{ '--size': size + 20 + 'rpx' }"
      class="avatar-btn"
      lang="zh_CN"
      @click="getWxUserProfile"
      @getuserinfo="getUserWxData"
    >
      <view class="image-wrap">
        <u-image
          :mode="imgMode"
          :shape="shape"
          :width="size + 'rpx'"
          :height="size + 'rpx'"
          :src="avatarMini && isAuth ? avatarMini : defaultAvatar"
        ></u-image>
        <view class="sex-wrap" :style="{ '--sex-bg-color': sexBgColor }" v-if="showSex">
          <u-icon :name="sexIcon"></u-icon>
        </view>
        <view class="level-wrap" :style="{ '--level-bg-color': levelBgColor }" v-if="showLevel">
          <u-icon :name="levelIcon"></u-icon>
        </view>
      </view>
    </button>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { Setting } from '../../index';
export default {
  name: 'UserAvatar',
  props: {
    // 默认头像
    defaultAvatar: {
      type: String,
      default: Setting.defaultAvatar,
    },
    // 头像尺寸 单位 rpx
    size: {
      type: Number,
      default: 120,
    },
    // 头像形状 circle-圆形，square-方形
    shape: {
      type: String,
      default: 'circle',
    },
    // 背景颜色，一般显示文字时用
    bgColor: {
      type: String,
      default: null,
    },
    // 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值
    imgMode: {
      type: String,
      default: null,
    },
    // 是否显示右上角的性别图标
    showSex: {
      type: Boolean,
      default: true,
    },
    // 右上角性别图标，可传入图片路径，或内置图标名:man或者woman
    sexIcon: {
      type: String,
      default: 'woman',
    },
    // 性别图标的背景颜色
    sexBgColor: {
      type: String,
      default: null,
    },
    // 是否显示右下角的等级图标
    showLevel: {
      type: Boolean,
      default: true,
    },
    // 右下角等级图标，可传入图片路径，或内置图标名level
    levelIcon: {
      type: String,
      default: 'level',
    },
    // 等级图标的背景颜色
    levelBgColor: {
      type: String,
      default: null,
    },
    // 是否使用 getUserProfile 获取用户头像和昵称信息
    useGetUserProfile: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // user模块数据绑定
    ...mapState('user', {
      isAuth: state => state.isAuth,
      isStaff: state => state.isStaff,
      token: state => state.token,
      detail: state => state.detailUser,
    }),
    ...mapGetters('user', {
      nickname: 'nickname',
      avatar: 'avatar',
      avatarMini: 'avatarMini',
    }),
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      // await this.$store.dispatch('user/detail');
    },
    // 更新用户第三方资料
    async handleUpdateProfile({ bindData, bindDataSign }) {
      const { dispatch } = this.$store;
      const params = {
        form: {
          bindApp: 'wx_miniapp',
          bindKey: Setting.appId,
          bindData,
          bindDataSign,
        },
      };
      try {
        await dispatch('user/updateBindProfile', params);
      } catch (e) {
        console.log(' updateBindProfile mixin error -->', e);
        throw e;
      }
    },
    // 获取用户微信头像 昵称信息 旧版 即将废弃
    getUserWxData() {
      if (this.useGetUserProfile) return;
      uni.getUserInfo({
        provider: 'weixin',
        success: async res => {
          console.log('用户微信信息：', res);
          await this.handleUpdateProfile({
            bindData: res.encryptedData,
            bindDataSign: res.iv,
          });
        },
      });
    },
    // 获取用户微信头像 昵称信息 新版
    getWxUserProfile() {
      uni.getUserProfile({
        desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: async res => {
          // console.log('%c [res]: ', 'color:#1989fa;', res);
          await this.handleUpdateProfile({
            bindData: res.encryptedData,
            bindDataSign: res.iv,
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.avatar-btn {
  border: none !important;
  //padding: 0 !important;
  margin: 0 !important;
  //border-radius: 60rpx;
  width: var(--size, 120rpx);
  height: var(--size, 120rpx);
  padding: 10rpx;
  background-color: transparent;
  &::after {
    border: none;
    width: auto;
    height: auto;
  }
  .image-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #606266;
    position: relative;
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }
  .sex-wrap {
    position: absolute;
    width: 32rpx;
    color: #ffffff;
    height: 32rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 100rpx;
    top: 5%;
    z-index: 1;
    right: -7%;
    border: 1px #ffffff solid;
    background-color: var(--sex-bg-color, #fa3534);
  }
  .level-wrap {
    position: absolute;
    width: 32rpx;
    color: #ffffff;
    height: 32rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 100rpx;
    bottom: 5%;
    z-index: 1;
    right: -7%;
    border: 1px #ffffff solid;
    background-color: var(--level-bg-color, #ff9900);
  }
}
</style>
