<template>
    <fade v-bind="$attrs">
        <div slot-scope="slot" :class="[$style.layer,slot.className,className]" :style="[slot.styleObj,styleObj]"
             v-show="show">
            <slot :class-name="slot.className" :style-obj="slot.styleObj"></slot>
        </div>
    </fade>
</template>

<style module>
    .layer {
        position: fixed;
        z-index: 99999;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

<script>
    import '../../assets/common.css'
    import Fade from '../fade/index.vue'

    export default {
      name: 'layer',
      inheritAttrs: false,
      props: {
        show: {
          type: Boolean,
          default: false
        },
        background: { // 背景色
          type: String,
          default: 'normal'
        }
      },
      computed: {
        $style () {
          return this.$options.cssModules
        },
        styleObj () {
          return ['normal'].indexOf(this.background) === -1 ? {
            backgroundColor: this.background
          } : {}
        },
        className () {
          return ['normal'].indexOf(this.background) !== -1 ? `va-layer-${this.background}` : ''
        }
      },
      components: {
        Fade
      }
    }
</script>