<template>
  <div :class="$style.wrapper" :style="{marginTop: marginTop}">
    <img v-if="src" :src="src" alt="" :class="$style.img" @load="loadImage">
    <div v-if="status !== ''" :class="$style.status">
      <BadgeStatus :status="status" size="large" />
    </div>
  </div>
</template>
<script>

export default {
  props: {
    src: {
      type: String,
      required: true
    },
    status: {
      type: String,
      default: ''
    },
    marginTop: {
      type: String,
      default: ''
    }
  },
  methods: {
    loadImage () {
      this.$emit('loadImage')
    }
  }
}
</script>

<style module lang="scss">
.wrapper{
  position: relative;
  @include mq-pc {
    margin-top: 1.2rem;
  }

  @include mq-sp {
    // margin: 0.6rem -2rem 0 -2rem;
    margin: 0;
  }
}

.status{
  position: absolute;
  top: 2rem;
  left: 2rem;
  /* display: inline-block; */
}

.img{
  width: 100%;
  @include mq-pc {
  }
  @include mq-sp {

  }
}
</style>
