<template>
  <view class="user-info-box">
    <view class="user-info" @click="openLogin">
      <view class="portrait-box">
        <image
          class="portrait"
          :src="
            userInfo.portrait ||
              userBaseInfo.avatarUrl ||
              'https://img.lkbang.net/xcx/missing-face.png'
          "
        />
      </view>
      <view class="info-box">
        <view
          v-if="$config('yxm')"
          class="username"
          :class="{
            username_v1: $config('yxm')
          }"
        >
          <view v-if="userInfo.nickname || userBaseInfo.nickName" class="userInfo">
            <view class="content-item">
              <text class="phone">{{ userInfo.nickname || userBaseInfo.nickName }}</text>
              <view v-if="showMaxMember && maxMemberIconUrl" class="maxMemberIcon">
                <image :src="maxMemberIconUrl" mode="widthFix" style="width: 100%;height: auto;" />
              </view>
              <view class="icon">
                <image
                  :src="memberInfo.userLevelPic"
                  style="width:100%; height: auto"
                  mode="widthFix"
                />
              </view>
            </view>
            <view
              v-if="memberInfo && Object.keys(memberInfo).length"
              class="content-item column"
              @click="toDetail"
            >
              <view class="progress-text">
                <text>{{ memberInfo.pointTextName }}</text>
                <text class="current">{{ memberInfo.currentPoint }}</text>
                <text>/{{ memberInfo.nextLevelPoint }}</text>
                <!-- #ifdef MP-WEIXIN -->
                <text class="iconfont icon-arrow" />
                <!-- #endif -->
              </view>
              <view class="progress-container">
                <view class="progress" />
                <view
                  class="actual"
                  :style="{
                    width: progressWidth
                  }"
                />
              </view>
            </view>
          </view>
          <text v-else class="desc">{{ "点击登录/注册" }}</text>
        </view>
        <view v-else class="username">
          <text v-if="userInfo.nickname || userBaseInfo.nickName">{{
            userInfo.nickname || userBaseInfo.nickName
          }}</text>
          <text v-else>{{ "点击登录/注册" }}</text>
        </view>
      </view>
    </view>
    <view
      class="user-config"
      :class="{ yxm: $config('yxm') }"
      @click="navTo('/subPackages/common/set/set')"
    >
      <i class="iconfont icon-setting-line config" />
    </view>
  </view>
</template>
<script>
const OPEN_LOGIN = "open-login";
const NAV_TO = "nav-to";
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    },
    userBaseInfo: {
      type: Object,
      default: () => ({})
    },
    memberInfo: {
      type: Object,
      default: () => ({})
    },
    showMaxMember: {
      type: Boolean,
      default: false
    },
    maxMemberIconUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {
    progressWidth() {
      const { currentPoint, nextLevelPoint } = this.memberInfo;
      const currentPointFloat = parseFloat(currentPoint);
      const nextLevelPointFloat = parseFloat(nextLevelPoint);
      if (
        currentPoint &&
        nextLevelPoint &&
        !isNaN(currentPointFloat) &&
        !isNaN(nextLevelPointFloat)
      ) {
        const percent = Math.floor((currentPointFloat / nextLevelPointFloat) * 100);
        return percent < 1
          ? "1%"
          : `${Math.floor((currentPointFloat / nextLevelPointFloat) * 100)}%`;
      } else {
        return "1%";
      }
    }
  },
  methods: {
    openLogin() {
      this.$emit(OPEN_LOGIN);
    },
    navTo(url) {
      this.$emit(NAV_TO, url);
    },
    toDetail() {
      // #ifdef MP-WEIXIN
      uni.navigateTo({
        url: "/subPackages/common/member/growStrategy"
      });
      /* #endif */
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/var.scss";
.user-info-box {
  // height: 180rpx;
  display: flex;
  // align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  .info-box {
    height: 112rpx;
    display: flex;
    align-items: center;
  }
  .portrait-box {
    width: 112rpx;
    height: 112rpx;
    margin-left: 20rpx;
  }
  .portrait {
    width: 112rpx;
    height: 112rpx;
    // border:5rpx solid #fff;
    border-radius: 50%;
  }
  .username {
    font-size: $font-lg + 2rpx;
    color: #fff;
    margin-left: 20rpx;
    &.username_v1 {
      height: 112rpx;
      display: flex;
      align-items: center;
    }
    .desc {
      @include text-size(32);
      color: $black;
    }
    view {
      display: inline-block;
    }
    .middle {
      position: relative;
      top: 4rpx;
    }
    // 以下是会员改动，仅限羊小咩
    .userInfo {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .content-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        &.column {
          flex-direction: column;
          align-items: flex-start;
          .progress-text {
            @include text-size(24);
            color: $black;
            display: flex;
            align-items: center;
            align-content: center;
            .current {
              margin-left: $padding-unit;
              font-weight: $font-weight-bold;
              font-size: 28rpx;
            }
            .iconfont {
              margin-left: 20rpx;
              font-size: 18rpx;
            }
          }
          .progress-container {
            position: relative;
            width: 240rpx;
            height: 8rpx;
            .progress {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #e5b4c1;
              border-radius: 6rpx;
            }
            .actual {
              z-index: 2;
              position: absolute;
              top: 0;
              left: 0;
              border-radius: 6rpx;
              height: 8rpx;
              background-image: linear-gradient(269deg, #ff1900 12%, #ff651f 85%);
            }
          }
        }
        .phone {
          font-weight: $font-weight-bold;
          @include text-size(32);
          color: $black;
          margin-right: 20rpx;
        }
        .maxMemberIcon {
          width: 82rpx;
          margin-right: 8rpx;
        }
        .icon {
          width: 120rpx;
          height: 56rpx;
        }
      }
    }
  }
}
.user-config.yxm {
  .config {
    color: $black;
  }
}
</style>
