bjquanjiang
/
DigitalScholl

<template>
  <view @click="$emit('click', $event)" :class="arrow ? 'arrow' : ''" class="cu-item">
    <slot name="avatar">
      <l-avatar
        v-if="avatar"
        :src="avatar"
        :radius="!roundAvatar"
        :round="roundAvatar"
        :style="avatarStyle"
        size="lg"
      />
      <image
        v-else-if="imgAvatar"
        :src="imgAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + imgStyle"
        mode="aspectFill"
        class="list-item-imgAvatar"
      />
      <l-icon
        v-else-if="iconAvatar"
        :type="iconAvatar"
        :style="`border-radius: ${roundAvatar ? '50%' : '3px'}; ` + iconStyle"
        class="list-item-iconAvatar flex justify-center align-center"
      />
    </slot>

    <view class="content">
      <view class="text-grey">
        <slot>{{ title }}</slot>
      </view>

      <view v-if="extra || $slots.extra" class="text-gray text-sm flex">
        <view class="text-cut text-grey">
          <slot name="extra">{{ extra }}</slot>
        </view>
      </view>
    </view>

    <view class="action">
      <view v-if="times" class="text-grey text-sm">
        <view v-if="times" style="display: flex; flex-direction: column; align-items: flex-end;">
          <view class="text-right margin-bottom-xs">{{ times[0] }}</view>
          <view v-if="times[1]" class="text-right">{{ times[1] }}</view>
        </view>
      </view>

      <view v-else-if="time || $slots.time || $slots.tips" class="text-grey text-sm">
        <slot name="time">{{ time }}</slot>
        <slot name="tips"></slot>
      </view>

      <template v-else>
        <slot name="action">{{ action }}</slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-list-item',

  props: {
    title: { default: '' },
    action: { default: '' },
    arrow: {},
    extra: { default: '' },
    time: { default: '' },
    times: {},
    roundAvatar: {},
    avatar: {},
    avatarStyle: { default: '' },
    iconAvatar: {},
    iconStyle: { default: '' },
    imgAvatar: { default: '' },
    imgStyle: { default: '' }
  }
}
</script>