<template>
  <view :style="[{ width: width, height: height }]" class="gg">
    <view class="gg-left u-font-xs u-p-l-10 u-p-r-10">
      <block v-if="showLeft">
        <slot name="left">秒杀</slot>
      </block>
    </view>
    <view class="gg-right u-font-xs u-p-l-10 u-p-r-10">
      <block v-if="showRight">
        <slot name="right">推荐</slot>
      </block>
    </view>
    <u-image :border-radius="borderRadius" :height="height" :lazy-load="lazyLoad" :src="src" :width="width"/>
    <view class="gg-bottom u-font-xs u-p-l-10 u-p-r-10">
      <block v-if="showBottom">
        <slot name="bottom">新人专享</slot>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ListImgItem',
  props: {
    lazyLoad: {
      type: Boolean,
      default: true
    },
    borderRadius: {
      type: String,
      default: '10rpx'
    },
    src: {
      type: String,
      default: '',
      required: true
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200rpx'
    },
    showLeft: {
      type: Boolean,
      default: true
    },
    showRight: {
      type: Boolean,
      default: true
    },
    showBottom: {
      type: Boolean,
      default: true
    }
  }
};
</script>

<style lang="scss" scoped>
.gg {
  position: relative;

  &-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: $u-type-primary;
    color: $u-type-info-light;
    border-top-left-radius: 10rpx;
  }

  &-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: $u-type-error;
    color: $u-type-info-light;
    border-top-right-radius: 10rpx;
  }

  &-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background-color: $u-type-success;
    color: $u-type-info-light;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
}
</style>
