<template>
  <div class="el-background" :class="[backgroundSize ? 'el-background--' + backgroundSize : '']">
    <!-- 背景区 -->
    <div class="el-background-fill">
      <!-- 当bgUrl为空时。不会触发error事件 -->
      <img
        v-if='src'
        class="el-background-fill-image"
        :src="src"
      />
      <div v-else class="el-background-fill-color"></div>
    </div>
    <!-- 遮罩层 -->
    <div :class="['el-background-shade', mode === 'straight' ? 'el-background-shade-straight' : '']"></div>
  </div>
</template>

<script>
export default {
  name: 'ElBackground',
  props: {
    src: String,
    size: String,
    mode: {
      type: String,
      default: 'straight'
    }
  },
  computed: {
    backgroundSize() {
      return this.size || (this.$ELEMENT || {}).size;
    }
  }
};
</script>
