<template>
  <li :class="[
    img ?  ( imgshape ? imgshape : '' ) : ''
  ]">
    <div class="tl--item" :class="[
      num ? 'num' : ''
    ]">
      <div class="img" v-if="img"><img :src="img"></div>
      <div class="num" v-if="num"><span>{{num}}</span></div>
      <div class="title" :class="[
        $slots.right & r ? 'r' : '',
        $slots.left & l ? 'l' : ''
      ]" :style="{
        paddingRight: $slots.right && r ? r + 'px' : '',
        paddingLeft: $slots.left && l ? l + 'px' : ''
      }">
        <span v-if="$slots.left" class="l"><slot name="left"></slot></span>
        <span v-if="$slots.right" class="r"><slot name="right"></slot></span>
        <slot name="title" v-if="$slots.title"></slot>
      </div>
      <div v-if="$slots.detail" class="detail"><slot name="detail"></slot></div>
    </div>
  </li>
</template>


<script>
  export default {
    name: 'CoListItem',
    props: {
      num: String,
      size: String,
      r: Number,
      l: Number,
      img: String,
      imgshape: String
    }
  };
</script>
