<template>
  <section class="relative"
           :class="{'overflow':!background}"
           :style="{backgroundColor:background ? '':backgroundColor}">
    <div v-if="background" class="absolute flex chat-background-image">
      <div class="flex-1" :style="backgroundStyle"></div>
      <div class="flex-1 chat-background-image-reversal" :style="backgroundStyle"></div>
    </div>
    <div class="relative">
      <slot></slot>
    </div>
  </section>
</template>

<script>
import props from '../props';
export default {
  name: "layout-chat-background",
  props,
  computed:{
    backgroundStyle(){
      if (this.background) {
        return  {
          background:'url('+this.background+')',
          backgroundSize:'100%'
        }
      } else {
        return {};
      }
    }
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
