<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);
        }
      "
    >
      <cr-image
        v-imogr
        :src="it.imageUrl | replaceUrl"
        width="2.266667rem"
        height="2.266667rem"
        class="Ol__body-img"
        fit="contain"
      />
      <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.orderConfigYxm && it.afterServiceInfo && it.afterServiceInfo.afsButtonText) ||
              ([10, 20, 40, 60].includes(it.serviceStatus) &&
                props.list.orderStatusText === '售后中') // 该状态中显示按钮
          "
          class="Ol__body-skus"
        >
          <span class="Ol__body-sku">
            <cr-button
              size="mini"
              plain
              :type="[10, 20, 40, 60].includes(it.serviceStatus) ? 'warning' : 'default'"
              hairline
              shape="circle"
              @click.stop="parent.onOptionClick({ ...props.list, currentSku: it }, 'refund')"
            >
              <!-- {{ it.havingService ? '售后中' : props.afterShow ? '申请售后' : '' }} -->
              {{
                (it.afterServiceInfo && it.afterServiceInfo.afsButtonText) ||
                  ([10, 20, 40, 60].includes(it.serviceStatus) && props.list.orderStatusText)
              }}
            </cr-button>
          </span>
        </div>
        <div
          v-if="it && it.afterServiceInfo && it.afterServiceInfo.applyTimeLimitText"
          class="after-sale-date"
        >
          {{ it.afterServiceInfo.applyTimeLimitText }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ListItem',
  filters: {
    replaceUrl(url) {
      return url.replace('http://', 'https://');
    }
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    },
    orderConfigYxm: {
      type: Boolean,
      default: true
    },
    showAfter: Boolean,
    afterShow: Boolean,
    canClick: Boolean,
    showExpirationDate: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style lang="less" scoped>
@import './List.less';
</style>
