<template functional>
  <div class="Ol__body">
    <div
      v-for="(it, idx) in props.list.skuList"
      :key="idx"
      class="Ol__body-item"
      @click="
        () => {
          props.canClick && parent.handleItemClick(it);
        }
      "
    >
      <div class="Ol__body-image">
        <cr-image
          :src="it.imageUrl | replaceUrl"
          width="2.266667rem"
          height="2.266667rem"
          class="Ol__body-img"
        />
        <span class="Ol__body-tag">3人团</span>
      </div>
      <div class="Ol__body-content">
        <div class="Ol__body-row">
          <span class="Ol__body-title">
            {{ it.skuName }}
          </span>
          <span v-if="it.salePrice" class="Ol__body-salePrice">
            <span class="Ol__body-skus">¥{{ it.salePrice }}</span>
            <span class="Ol__body-count">{{ it.count }}件</span>
          </span>
        </div>
        <div class="Ol__body-skus">
          <span class="Ol__body-sku">{{ it.skuAttr }}</span>
        </div>
        <div v-if="props.showAfter && (it.havingService || props.afterShow)" class="Ol__body-skus">
          <span class="Ol__body-sku">
            <cr-button
              size="mini"
              plain
              :type="it.havingService ? 'warning' : props.afterShow ? 'default' : ''"
              shape="circle"
              @click.stop="parent.onOptionClick({ ...props.list, currentSku: it }, 'refund')"
            >
              {{ it.havingService ? '售后中' : props.afterShow ? '售后' : '' }}
            </cr-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ListItem',
  filters: {
    replaceUrl(url) {
      return url.replace('http://', 'https://');
    }
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    },
    showAfter: Boolean,
    afterShow: Boolean,
    canClick: Boolean
  }
};
</script>
<style lang="less" scoped>
@import './List.less';
</style>
