<import-sjs from="./index.sjs" name="page"/>
<import-sjs from="./../../utils/render.sjs" name="utils"/>
<wrapper>
  <view
    class="cert-detail-component"
    style="{{ utils.getCardStyle(serviceInfo.extInfo, imgSrcPrefix) }}"
  >
    <view class="loading-container-center" a:if="{{ loading }}">
      <loading color="#fff"/>
    </view>
    <block a:else>
      <view class="cert-detail-component-header">
        <view class="cert-icon">
          <image src="{{ page.getCardIcon(serviceInfo,imgSrcPrefix) }}" />
        </view>
        <view class="cert-detail-name">
          <text number-of-lines="2">{{ details.certName || serviceInfo.title }}</text>
        </view>
      </view>
      <view class="cert-detail-content">
        <view class="cert-avatar" a:if="{{ page.showPhoto(serviceInfo.extInfo) }}">
          <image src="{{ utils.getImageUrl(details.certPhotoUrl, imgSrcPrefix) }}" />
        </view>
        <view class="cert-info-content">
          <view class="cert-info-row" a:for="{{ rows }}">
            <view class="cert-info-label">{{ item.name }}</view>
            <view class="cert-info-value">
              <text  number-of-lines="2">{{ item.value }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="view-button">
        <button-auth
          item="{{ item }}"
          onCallBack="onCallBack"
          class="view-button-item-inner"
          formClass="view-button-item"
          a:for="{{ componentData.serviceList }}"
        >
          <view class="qr-image" a:if="{{ item.icon }}">
            <image src="{{ item.icon }}" />
          </view>
          <view>{{ item.name }}</view>
        </button-auth>
      </view>
    </block>
  </view>

</wrapper>
