<import-sjs
  from="./index.sjs"
  name="utils"
/>
<view class="member-user-center"
>
  <!-- 背景图 -->
  <view
    class="member-user-center-container"
    style="backgroundImage: url({{defaultBackImg}})"
  >
    <!-- 盒子 以下为会员个人中心内容 -->
    <view
      class="box"
      style="padding-top: {{titleBarHeight + 30}}px"
    >
      <!-- 已登录 -->
      <block a:if="{{(componentData.componentExtInfo.memberInfo.flag || memberLevel !== 'NONE') && userInfo.isLogin}}">
        <!-- userInfo -->
        <view
          a:if="{{userInfo.isLogin}}"
          class="user-info"
        >
          <!-- avator -->
          <view class="atvar">
            <image
              class="size"
              src="{{userInfo.avatar ? userInfo.avatar : defaultAtvar}}"
              lazy-load="{{false}}"
            />
          </view>
          <!-- info -->
          <view class="info">
            <view class="info-name">
              {{userInfo.nickName || userInfo.fullName || '昵称'}}
            </view>
            <view class="info-other">
              {{userInfo.phone}}
            </view>
          </view>
        </view>
        <!-- userInfo end -->
        <!-- 卡包信息  min-height: 200rpx; 148rpx-->
        <view
          a:if="{{componentData.componentExtInfo.memberInfo && componentData.componentConfigure.showInfo.length 
            && utils.hasSomeMemberDataKey(componentData.componentExtInfo.memberInfo,componentData.componentConfigure.showInfo)}}"
          class="member-info"
          data-memberInfo="{{componentData.componentExtInfo.memberInfo}}"
          onTap="goToCardDetail"
        >
          <!-- 每个显示点 -->
          <block a:for="{{componentData.componentConfigure.showInfo}}">
            <view
              class="member-info-{{componentData.componentConfigure.showInfo.length === 1 ? 'alone' : 'item'}}"
              a:if="{{utils.hasMemberDataKey(componentData.componentExtInfo.memberInfo,item)}}"
            >
              <view
                class="member-info-{{componentData.componentConfigure.showInfo.length === 1 ? 'alone' : 'item'}}-text"
              >
                {{componentData.componentExtInfo.memberInfo[item] + utils.getConfigUnit(item)}}
              </view>
              <view
                class="member-info-{{componentData.componentConfigure.showInfo.length === 1 ? 'alone' : 'item'}}-title"
              >
                {{utils.getConfigTitle(item)}}
              </view>
            </view>
            <view
              class="line"
              a:if="{{index !== componentData.componentConfigure.showInfo.length - 1}}"
            ></view>
          </block>
        </view>
      </block>
      <!-- 卡包信息 end-->
      <!-- 未登录 -->
      <block a:else>
        <block>
          <!-- 登录按钮栏 -->
          <view class="user-info no-login">
            <!-- 左侧描述文字 -->
            <view class="desc">
              <view class="desc-title">
                {{componentData.componentTitle || '欢迎'}}
              </view>
              <view class="desc-text">
                {{componentData.componentDesc || '登录入会享更多权益'}}
              </view>
            </view>
            <!-- 右侧按钮 -->
            <view class="btn">
              <button
                class="login-btn"
                scope="phoneNumber"
                open-type="getAuthorize"
                onGetAuthorize="goToLogin"
                size="default"
                onError="doLogin"
              >会员登录</button>
            </view>
          </view>
          <!-- 登录按钮栏 end -->
          <!-- 权益 -->
          <view
            a:if="{{componentData.serviceList.length}}"
            class="member-benefit"
          >
            <view class="member-benefit-title">
              会员专属权益
            </view>
            <view class="member-benefit-list">
              <view
                a:for="{{componentData.serviceList.slice(0,3)}}"
                onTap="benefitClick"
              >
                <button-auth
                  className="member-benefit-list-item"
                  item="{{item}}"
                >
                  <!-- icon -->
                  <image
                    class="benefit-icon"
                    src="{{item.icon || defaultIcon}}"
                  />
                  <!-- title -->
                  <view class="benefit-title">
                    {{item.name || '服务标题'}}
                  </view>
                  <!-- desc -->
                  <view class="benefit-desc">
                    {{item.serviceDesc || '服务描述'}}
                  </view>
                </button-auth>
              </view>
            </view>
          </view>
        </block>
        <!-- 权益 end -->
      </block>
      <!-- 未登录 end -->
    </view>
  </view>
</view>