<wxs src="../wxs/utils.wxs" module="utils" />

<view
  wx:if="{{ showWrapper }}"
  class="{{ utils.bem('dropdown-item', direction) }}"
  style="{{ wrapperStyle }}"
>
  <van-popup
    show="{{ showPopup }}"
    custom-style="position: absolute;"
    overlay-style="position: absolute;"
    overlay="{{ overlay }}"
    position="{{ direction === 'down' ? 'top' : 'bottom' }}"
    duration="{{ transition ? duration : 0 }}"
    close-on-click-overlay="{{ closeOnClickOverlay }}"
    bind:close="onClickOverlay"
  >
    <van-cell
      wx:for="{{ options }}"
      wx:key="{{ item.value }}"
      data-option="{{ item }}"
      class="{{ utils.bem('dropdown-item__option', { active: item.value === value } ) }}"
      clickable
      icon="{{ item.icon }}"
      bind:tap="onOptionTap"
    >
      <view
        slot="title"
        class="van-dropdown-item__title"
        style="{{ item.value === value  ? 'color:' + activeColor : '' }}"
      >
        {{ item.text }}
      </view>
      <van-icon
        wx:if="{{ item.value === value }}"
        name="success"
        class="van-dropdown-item__icon"
        color="{{ activeColor }}"
      />
    </van-cell>

    <slot />
  </van-popup>
</view>