<import-sjs from="./index.sjs" name="utils" />
<button
  scope="{{scopes}}"
  onTap="onLogin"
  hover-class="none"
  class="clear-button"
  onError="onAuthError"
  onGetAuthorize="onGetAuthorize"
  open-type="{{scopes === 'auth_user' ? '' : 'getAuthorize'}}"
>
  <view
    onTap="goToDetail"
    class="user-container"
    style="{{utils.getBackground(componentData,imgSrcPrefix,backgroundUrl)}}"
  >
    <view class="info-container">
      <image
        class="avatar"
        mode="aspectFill"
        src="{{utils.getAvatarUrl(componentData,userInfo,imgSrcPrefix,defaultAvatar)}}"
      />
      <view
        class="user-info"
        a:if="{{ userInfo.isLogin }}"
      >
        <view class="name" style="{{utils.getNameFontStyle(componentData)}}">
          {{userInfo.nickName || componentData.componentExtInfo.defaultNickName}}
        </view>
        <view class="phone" style="{{utils.getPhoneFontStyle(componentData)}}">
          {{userInfo.phone}}
        </view>
      </view>
      <view class="user-info flex-end" a:else>
        <view
          class="login-show-button"
          style="{{utils.getAuthFrameStyle(componentData)}}"
        >
          {{utils.getAuthButtonName(componentData)}}
        </view>
      </view>
      <am-icon
        class="am-icon"
        color="#ccc"
        type="right"
        size="{{18}}"
        a:if="{{userInfo.isLogin}}"
      />
    </view>
  </view>
</button>
