<import-sjs
  from="./index.sjs"
  name="utils"
/>
<!-- 卡组件 -->
<view
  class="member-card-container"
  a:if="{{componentData && componentData.componentExtInfo.memberInfo && !componentData.componentExtInfo.memberInfo.err}}"
>
  <view class="box">
    <!-- 背景图 -->
    <!-- 默认是170rpx  有行动点 则为 223rpx -->
    <view
      class="box-back"
      style="min-height: {{utils.getPointList(componentData.serviceList).length && componentData.componentExtInfo.memberInfo.flag ? '223rpx' : '170rpx'}};
        {{ componentConfigure.backgroundUrl ?
          `backgroundImage: url(${componentConfigure.backgroundUrl})` :
          `backgroundImage: url(https://gw.alipayobjects.com/mdn/rms_933648/afts/img/A*qYS4S7SsFYsAAAAAAAAAAAAAARQnAQ)`}}"
    >
    </view>
    <!-- 右上角 -->
    <view
      class="box-right-point"
      a:if="{{componentConfigure.rightTipShow }}"
    >
      <view class="box-right-point-text">
        {{componentConfigure.rightTip || 'New'}}
      </view>
    </view>
    <!-- 权益标签 -->
    <view
      class="box-right-tag"
      style="backgroundImage: url({{rightTagImg}})"
      a:if="{{componentData.componentExtInfo.memberInfo.flag && componentConfigure.cardConfigure.inviolableRightsLabelShowType !== 'NONE'}}"
    >
      <view class="box-right-tag-text">
        {{componentConfigure.cardConfigure.inviolableRightsLabel || '会员权益'}}
      </view>
    </view>
    <!-- 有会员卡 -->
    <view
      class="has-member card"
      a:if="{{componentData.componentExtInfo.memberInfo && componentData.componentExtInfo.memberInfo.flag || false}}"
      onTap="goToCardDetail"
      data-memberInfo="{{componentData.componentExtInfo.memberInfo}}"
    >
      <view
        class="card-link"
        onTap="goToCardDetail"
        a:if="{{false}}"
        data-memberInfo="{{componentData.componentExtInfo.memberInfo}}"
      ></view>
      <!-- 底部行动点配置 -->
      <view
        class="member-bottom-point"
        a:if="{{utils.getPointList(componentData.serviceList).length}}"
        catchTap="bottomPointClick"
      >
        <block a:for="{{utils.getPointList(componentData.serviceList)}}">
          <!-- <view class="member-bottom-point-item" catchTap="catchTest" data-index="{{index}}">
          {{item.name}}
        </view> -->
          <view class="member-bottom-point-item">
            <button-auth
              className="member-bottom-point-item-text"
              item="{{item}}"
            >
              {{item.name}}
            </button-auth>
          </view>
        </block>
      </view>
      <!-- 卡面 170 有行动点 123 -->
      <view
        class="member-top"
        style="min-height: {{utils.getPointList(componentData.serviceList).length ? '223rpx' : '170rpx'}}"
      >
        <view class="atvar">
          <image
            class="size"
            src="{{componentData.componentIcon ? (componentData.componentIcon.length==32 ? imgSrcPrefix + componentData.componentIcon : componentData.componentIcon) : defaultAtvar}}"
            lazy-load="{{false}}"
          />
        </view>
        <view class="card-info">
          <!-- 没有描述文字 -->
          <view
            class="card-title"
            style="margin-top: {{componentConfigure.desc ? '40rpx' : '62rpx'}}"
          >
            <text
              number-of-lines="1"
              class="title text-center"
              style="color: {{componentConfigure.nameColor || '#fff'}}"
            >{{componentData.componentTitle || 'VIP会员卡'}}</text>
            <view
              class="vip"
              a:if="{{componentConfigure.cardConfigure.inviolableRightsLabelShow && componentData.componentExtInfo.memberInfo.level}}"
            >
              {{componentData.componentExtInfo.memberInfo.level || '铂金'}}</view>
          </view>
          <view
            class="desc"
            a:if="{{componentConfigure.desc}}"
            style="color: {{componentConfigure.descColor || '#fff'}}"
          >{{componentConfigure.desc || '描述'}}</view>
          <!-- <view class="member-info">
            <view class="member">
              <text
                class="balance text-center"
                a:if="{{componentData.componentExtInfo.showBlance === 'Y' && componentData.componentExtInfo.memberInfo.balance || true}}"
              >余额：{{componentData.componentExtInfo.memberInfo.balance}}元</text>
              <text
                class="balance text-center"
                a:if="{{componentData.componentExtInfo.showPoint === 'Y' && componentData.componentExtInfo.memberInfo.point || true}}"
              >积分：{{componentData.componentExtInfo.memberInfo.point}}</text>
            </view>
            <view class="cardId member">NO：{{componentData.componentExtInfo.memberInfo.cardNo}}
            </view>
          </view> -->
        </view>
      </view>

    </view>
    <!-- 无会员卡 -->
    <view
      class="no-member card"
      a:else
    >
      <view class="atvar">
        <image
          class="size"
          src="{{componentData.componentIcon ? (componentData.componentIcon.length==32 ? imgSrcPrefix + componentData.componentIcon : componentData.componentIcon) : defaultAtvar}}"
          lazy-load="{{false}}"
        />
      </view>
      <view class="card-info">
        <view class="card-title">
          <text
            number-of-lines="1"
            class="title text-center"
            style="color: {{componentConfigure.nameColor || '#fff'}}"
          >{{componentData.componentTitle || 'VIP会员卡'}}</text>
        </view>
        <view
          class="desc"
          a:if="{{componentConfigure.desc}}"
          style="color: {{componentConfigure.descColor || '#fff'}}"
        >{{componentConfigure.desc}}</view>
      </view>
      <view
        class="join"
        data-index="{{componentData.componentExtInfo.memberInfo.index}}"
        onTap="addCard"
        style="color: {{componentConfigure.noCardConfigure.textColor || '#333'}}; ;background-color: {{componentConfigure.noCardConfigure.btnColor || '#fff'}}"
      > {{componentConfigure.noCardConfigure.btnDesc || '免费领'}}
      </view>
    </view>
    <!-- <view
      class="member-footer"
      onSubmit="onSubmit"
      report-submit="{{true}}"
      a:if="{{componentData.serviceList.length}}"
    >
      <block a:for="{{componentData.serviceList.slice(0,3)}}">
        <button-auth
          className="link"
          item="{{item}}"
        >
          {{item.name}}
        </button-auth>
        <view
          class="line"
          a:if="{{index !== componentData.serviceList.slice(0,3).length - 1}}"
        ></view>
      </block>
    </view> -->
  </view>
</view>