<import-sjs name="utils" from="./indexHead.sjs"/>
<wrapper>
  <!-- 头部 -->
  <mas-adc-nav-bar
    fill="{{ false }}"
    isBack="{{ false }}"
    useSlot="{{ true }}"
    className="nav-header"
    onCallback="onCallback"
    background="transparent"
  >
    <text class="index-head-title" number-of-lines="2">
      {{ utils.getTitle(componentData) }}
    </text>
  </mas-adc-nav-bar>
  <view id="{{ id }}" class="index-head-container{{ utils.msgClass(componentData, showMsg) }}">
    <!-- 用户自定义背景时加蒙层 -->
    <view
      style="{{ utils.getBgStyle(componentData, imgSrcPrefix) }}"
      class="model-{{ utils.getStyleMode(componentData) }} model-bg"
    />
    <!-- 内容 -->
    <view
      class="index-head"
      style="padding-top: {{ navHeight }}px"
    >
      <!-- <view class="index-head-desc" onTap="goToDetail">
        <text class="index-head-desc-txt" >
          {{ utils.getSubTitle(componentData) }}
        </text>
      </view> -->
      <!-- 消息通知 -->
      <view
        class="notification-container"
        a:if="{{ showMsg && utils.getNotifyList(componentData).length > 0 }}"
      >
        <view class="message-notification">
          <view class="scroll-content">
            <swiper
              autoplay="true"
              vertical="true"
              indicator-dots="{{ false }}"
            >
              <swiper-item
                key="swiper-item-{{ index }}"
                a:for="{{ utils.getNotifyList(componentData) }}"
              >
                <button-auth class="message-item" item="{{ item }}">
                  <am-icon size="16" type="voice" color="#333"/>
                  <text class="msg-text" number-of-lines="1">
                    {{ item.serviceDesc }}
                  </text>
                </button-auth>
              </swiper-item>
            </swiper>
          </view>
          <view
            onTap="closeMsgBtn"
            class="close-button"
          >
            <am-icon
              size="16"
              type="close"
              color="#333"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</wrapper>
