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

<view
  class="aio-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable }]) }}"
  hover-class="aio-cell--hover hover-class"
  hover-stay-time="70"
  style="{{ customStyle }}"
  bind:tap="onClick"
>
  <aio-image
    wx:if="{{ icon }}"
    name="{{ icon }}"
    width="{{ leftIconSize }}"
    height="{{ leftIconSize }}"
    class="aio-cell__left-icon-wrap"
    aio-class="aio-cell__left-icon"
  />
  <slot wx:else name="icon" />

  <view
    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
    class="aio-cell__title title-class"
  >

    <block wx:if="{{ title }}">{{ title }}</block>
    <slot wx:else name="title" />

    <view wx:if="{{ label || useLabelSlot }}" class="aio-cell__label label-class">
      <slot wx:if="{{ useLabelSlot }}" name="label" />
      <block wx:elif="{{ label }}">{{ label }}</block>
    </view>
  </view>

  <view class="aio-cell__value value-class">
    <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
    <slot wx:else />
  </view>

  <aio-image
    wx:if="{{ isLink }}"
    width="{{ rightIconSize }}"
    height="{{ rightIconSize }}"
    name="{{ arrowDirection ? 'arrow' + '-' + arrowDirection + '-16px' : 'arrow-right-16px' }}"
    class="aio-right-image-class right-icon-class"
    aio-class="aio-cell__right-icon"
  />
  <view wx:else class="aio-cell__right-icon-wrap right-icon-class">
    <slot name="right-icon" />
  </view>

  <slot name="extra" />
</view>