<view
  class="dm-list-item {{className || ''}} {{hoverClass=='none'?'dm-list-item-hover-none':'dm-list-item-hover'}}"
  data-dmId="{{dmId}}"
  onTap="onDmTap"
>

  <view class="dm-list-item-content">
    <dingui-icon
      type="required"
      a:if="{{required}}"
      className="dm-list-item-required"
    />
    <slot name="left"></slot>
    <!-- thumb -->
    <block a:if="{{onDmThumbCatchClick}}">
      <view
        a:if="{{($slots.thumb || thumbClassName || thumbUrl || thumbContent)&&!checkable}}"
        class="dm-list-item-thumb-wrapper {{thumbVTop ? 'dm-list-item-thumb-valign-top' : ''}} "
        data-dmId="{{dmId}}"
        catchTap="onDmThumbCatchClick"
      >
        <slot name="thumb">
          <view
            a:if="{{thumbClassName || thumbUrl}}"
            class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} {{thumbClassName ? thumbClassName=='default'?'dm-list-item-thumb-default':thumbClassName:thumbClassName}}"
            style="backgroundImage: url({{thumbUrl}});"
          ></view>
          <view
            a:elif="{{thumbContent}}"
            class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} dm-list-item-thumb-content"
          >
            {{thumbContent.length > 2 ? thumbContent.slice(-2) : thumbContent}}
          </view>
        </slot>
      </view>
    </block>
    <block a:else>
      <view
        a:if="{{($slots.thumb || thumbClassName || thumbUrl || thumbContent)&&!checkable}}"
        class="dm-list-item-thumb-wrapper {{thumbVTop ? 'dm-list-item-thumb-valign-top' : ''}} "
        data-dmId="{{dmId}}"
        data-type="thumb"
        onTap="onDmThumbClick"
      >
        <slot name="thumb">
          <view
            a:if="{{thumbClassName || thumbUrl}}"
            class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} {{thumbClassName ? thumbClassName=='default'?'dm-list-item-thumb-default':thumbClassName:thumbClassName}}"
            style="backgroundImage: url({{thumbUrl}});"
          ></view>
          <view
            a:elif="{{thumbContent}}"
            class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} dm-list-item-thumb-content"
          >
            {{thumbContent.length > 2 ? thumbContent.slice(-2) : thumbContent}}
          </view>
        </slot>
      </view>
    </block>
    <!-- 主要内容区域 -->
    <view class="dm-list-item-main {{thumbSize == 'large' ? 'dm-list-item-large-main' : ''}}">
      <!-- 单选框 -->
      <view
        a:if="{{checkable}}"
        class="dm-list-item-checkbox-wrapper"
      >
        <dingui-checkbox
          disabled="{{disabled}}"
          isChecked="{{selected}}"
        ></dingui-checkbox>
      </view>
      <block a:if="{{onDmThumbCatchClick}}">
        <view
          a:if="{{($slots.thumb || thumbClassName || thumbUrl || thumbContent)&&checkable}}"
          class="dm-list-item-thumb-wrapper {{thumbVTop ? 'dm-list-item-thumb-valign-top' : ''}} "
          data-dmId="{{dmId}}"
          data-type="thumb"
          catchTap="onDmThumbCatchClick"
        >
          <slot name="thumb">
            <view
              a:if="{{thumbClassName || thumbUrl}}"
              class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} {{thumbClassName ? thumbClassName=='default'?'dm-list-item-thumb-default':thumbClassName:thumbClassName}}"
              style="backgroundImage: url({{thumbUrl}});"
            ></view>
            <view
              a:elif="{{thumbContent}}"
              class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} dm-list-item-thumb-content"
            >
              {{thumbContent.length > 2 ? thumbContent.slice(-2) : thumbContent}}
            </view>
          </slot>
        </view>
      </block>
      <block a:else>
        <view
          a:if="{{($slots.thumb || thumbClassName || thumbUrl || thumbContent)&&checkable}}"
          class="dm-list-item-thumb-wrapper {{thumbVTop ? 'dm-list-item-thumb-valign-top' : ''}} "
          data-dmId="{{dmId}}"
          data-type="thumb"
          catchTap="onDmTap"
        >
          <slot name="thumb">
            <view
              a:if="{{thumbClassName || thumbUrl}}"
              class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} {{thumbClassName ? thumbClassName=='default'?'dm-list-item-thumb-default':thumbClassName:thumbClassName}}"
              style="backgroundImage: url({{thumbUrl}});"
            ></view>
            <view
              a:elif="{{thumbContent}}"
              class="dm-list-item-thumb dm-list-item-thumb-size-{{thumbSize}} dm-list-item-thumb-type-{{thumbType}} dm-list-item-thumb-content"
            >
              {{thumbContent.length > 2 ? thumbContent.slice(-2) : thumbContent}}
            </view>
          </slot>
        </view>
      </block>
      <block a:if="{{onDmContentCatchClick}}">
        <view
          class="dm-list-item-main-content"
          data-dmId="{{dmId}}"
          data-type="content"
          catchTap="onDmContentCatchClick"
        >
          <view
            class="dm-list-item-caption {{briefList.length < 1 ?'dm-list-item-caption-placeholder':''}} {{captionClassName}} {{disabled?'dm-list-item-disabled':''}}"
          >
            <slot>
            </slot>
          </view>
          <view class="dm-list-item-brief {{briefClassName}}">
            <slot name="brief">
              <view
                a:for="{{briefList}}"
                class="dm-list-item-brief-item {{item.className || ''}} {{briefList.length <= 1 ? 'dm-list-item-brief-no-margin' : ''}}"
                style="{{item.style || ''}}"
              >{{item.text}}</view>
            </slot>
          </view>
        </view>
      </block>
      <block a:else>
        <view
          class="dm-list-item-main-content"
          data-dmId="{{dmId}}"
          data-type="content"
          onTap="onDmContentClick"
        >
          <view
            class="dm-list-item-caption {{briefList.length < 1 ?'dm-list-item-caption-placeholder':''}} {{captionClassName}} {{disabled?'dm-list-item-disabled':''}}"
          >
            <slot>
            </slot>
          </view>
          <view class="dm-list-item-brief {{briefClassName}}">
            <slot name="brief">
              <view
                a:for="{{briefList}}"
                class="dm-list-item-brief-item {{item.className || ''}} {{briefList.length <= 1 ? 'dm-list-item-brief-no-margin' : ''}}"
                style="{{item.style || ''}}"
              >{{item.text}}</view>
            </slot>
          </view>
        </view>
      </block>
      
      <view
        class="dm-list-item-extra {{extraClassName}} {{extraVTop ? 'dm-list-item-extra-valign-top' : ''}}"
      >
        <slot name="extra">
          <text class="dm-list-item-extra-text">{{extraText}}</text>
        </slot>
      </view>
      <view
        a:if="{{badgeShow}}"
        class="dm-list-item-badge"
      >
        <dingui-badge
          slotWidth="{{0}}"
          show="{{true}}"
          text="{{badgeText}}"
        />
      </view>
      <block a:if="{{onDmArrowCatchClick}}">
        <view
          a:if="{{arrowType || arrowClassName}}"
          class="dm-list-item-wrapper-arrow"
          data-dmId="{{dmId}}"
          catchTap="onDmArrowCatchClick"
        >
          <dingui-icon
            size="{{arrowSize}}"
            className="{{arrowClassName}} dm-list-item-wrapper-arrow-color-gray"
            type="{{arrowType}}"
          />
        </view>
      </block>
      <block a:else>
        <view
          a:if="{{arrowType || arrowClassName}}"
          class="dm-list-item-wrapper-arrow"
          data-dmId="{{dmId}}"
          data-type="arrow"
          onTap="onDmArrowClick"
        >
          <dingui-icon
            size="{{arrowSize}}"
            className="{{arrowClassName}} dm-list-item-wrapper-arrow-color-gray"
            type="{{arrowType}}"
          />
        </view>
      </block>
      <view
        a:if="{{!noborder||hasborder}}"
        class="dm-list-item-border {{hasborder?'dm-list-item-border-hasborder':''}}"
      ></view>
    </view>
    <view
      class="dm-list-item-error"
      a:if="{{error}}"
    >{{errorText}}</view>
  </view>
</view>