<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view style="{{_._style([style, customStyle])}}" class="{{prefix}}-class {{classPrefix}} {{ !bordered || isLastChild ? classPrefix + '--borderless' : ''}} {{classPrefix}}--{{align}}" hover-class="{{ hover ? classPrefix + '--hover' : ''}}" hover-stay-time="70" bind:tap="onClick" aria-role="{{ariaRole || (arrow ? 'button' : '')}}" aria-label="{{ariaLabel}}">

  <view class="{{classPrefix}}--header">
    <view class="{{classPrefix}}__left {{prefix}}-class-left">
      <template wx:if="{{_leftIcon}}" is="icon" data="{{tClass: classPrefix + '__left-icon ' + prefix + '-class-left-icon', ..._leftIcon }}" />
      <slot name="left-icon" />
      <t-image wx:if="{{ image }}" shape="round" t-class="{{classPrefix}}__left-image {{prefix}}-class-image" src="{{ image }}" />
      <slot name="image" />
    </view>
    <view class="{{classPrefix}}__title {{titleFlex?'flex':''}}">
      <text>{{title}}</text>
      <slot name="title">
      </slot>
      <block wx:if="{{required}}">
        <text decode class="{{classPrefix}}--required">&nbsp;*</text>
      </block>

    </view>
    <view wx:if="{{titleRightIcon}}" class="{{classPrefix}}__title--right-icon">
      <t-icon catch:tap="handleTitleRightIcon" data-key="{{key}}" name="{{titleRightIcon}}"></t-icon>
    </view>

    <view class="{{classPrefix}}__note {{prefix}}-class-note">
      <text wx:if="{{ note }}">{{note}}</text>
      <slot name="note" />
    </view>
    <view class="{{classPrefix}}__right {{prefix}}-class-right">
      <template wx:if="{{_arrow}}" is="icon" data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._arrow }}" />
      <block wx:else>
        <template wx:if="{{_rightIcon}}" is="icon" data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._rightIcon }}" />
        <slot name="right-icon" />
      </block>
    </view>
    <view wx:if="{{ suffix }}" class="{{classPrefix}}__suffix">
      <text>{{suffix}}</text>
      <slot name="suffix"></slot>
    </view>
  </view>
  <view class="{{classPrefix}}__description {{prefix}}-class-description">
    <view wx:if="{{ description }}" class="{{classPrefix}}__description-text">{{description}}</view>
    <slot name="description" />
  </view>
</view>